figma-sync

Use when extracting design tokens, components, or assets from Figma via the Figma MCP — reading variables, styles, frames, components, or exporting assets. Also use when the user says “sync from Figma”, “extract tokens”, “Figma MCP”, “pull design tokens”, or “import from Figma”.

Model	Source
sonnet	pack: ux-ui

Full Reference

figma-sync

Figma MCP reference — design token extraction, component inspection, and asset export from Figma into code. Covers all 6 Figma MCP capabilities, token mapping to Tailwind v4, and the sync workflow.

Announcement

┏━ 🎨 figma-sync ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [one-line: what Figma extraction task]          ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Quick Reference

Item	Value
MCP package	figma-developer-mcp
Auth	Figma personal access token (FIGMA_ACCESS_TOKEN)
Primary capability	Read variables, styles, components
Token output format	Tailwind v4 @theme CSS custom properties
Asset export	SVG, PNG at specified resolution
File reference	Figma file URL or file key

Reference Index

I want to…	File
Read design variables (colors, spacing, typography)	reference/figma-capabilities.md
Extract component definitions and variants	reference/figma-capabilities.md
Export frames or assets as images/SVGs	reference/figma-capabilities.md
Read text styles and font specifications	reference/figma-capabilities.md
Map Figma variables to Tailwind v4 tokens	reference/token-mapping.md
Configure Figma MCP auth and setup	reference/figma-setup.md

Usage: Read the reference file matching your current task.

Token Extraction Workflow

1. Get Figma file URL from design team
2. Extract variables → map to @theme CSS properties
3. Extract text styles → map to typography scale
4. Export component specs → pass to magic-21st as design spec
5. Commit tokens to codebase

Token Mapping Pattern

Figma variables map to Tailwind v4 @theme block:

/* From Figma variables */
@theme {
  --color-brand-primary: oklch(62% 0.19 250);
  --color-brand-secondary: oklch(78% 0.12 195);
  --spacing-section: 5rem;
  --radius-card: 0.75rem;
  --font-heading: "Inter", sans-serif;
}

Always use OKLCH for colors — convert Figma’s hex/RGB output using the perceptual mapping in reference/token-mapping.md.

Skill Chains

Before or alongside Figma sync:

• ui-craft (frontend pack) — set aesthetic direction that Figma will implement
• magic-21st — use extracted tokens as design spec for component generation
• stitch-design — alternative when no Figma file exists yet
• generate-workflow — full design-to-code pipeline orchestration
• tailwind-css (frontend pack) — implement the extracted @theme tokens

Completion Pattern

Variables extracted:    [N] tokens
Styles extracted:       [N] typography + [N] shadow + [N] effect
Assets exported:        [N] files
Token file:             [path to @theme output]
Next:                   pass tokens to magic-21st or tailwind-css