Design Token to Figma Component via MCP

From live website to token-bound Figma components in ~1 hour.

This guide covers the end-to-end workflow using Claude skills, Claude Code, Claude in Chrome, Tokens Studio, and the Variable Binder plugin. Each phase feeds into the next — no manual data entry at any point.

---

Pipeline Overview

Phase	Skill / Tool	Input	Output	Time
1. Extract	design-token-extractor	Live website URL	raw-tokens.json + HTML report	~5 min
2. Synthesise	design-system-synthesis	raw-tokens.json	Foundation Spec (.md) + structured-tokens.json	~3 min
3. Transform	tokens-studio-ready	structured-tokens.json	[brand]-tokens-studio.json	~2 min
4. Import	Tokens Studio plugin (Figma)	[brand]-tokens-studio.json	Figma Variables	~2 min
5. Generate	figma-component-generator	[brand]-tokens-studio.json + Figma URL	Component frames in Figma	~10 min
6. Bind	Variable Binder plugin (Figma)	Built frames + imported variables	Token-bound frames	~1 min
7. Convert	Manual in Figma	Bound frames	Real Figma Components with variants	~30 min

---

Prerequisites

Before starting, confirm these are set up:

• Claude Pro/Team account with Claude in Chrome extension installed
• Claude Code installed (npm install -g @anthropic-ai/claude-code)
• Figma MCP server configured in ~/.claude/claude_code_config.json:

json

{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "@anthropic-ai/figma-mcp-server"], "env": { "FIGMA_ACCESS_TOKEN": "<your-figma-personal-access-token>" } } } }

• Tokens Studio plugin installed in Figma
• Variable Binder for AI Outputs plugin installed: Figma Community
• A target website to extract from
• A Figma file to build into

---

Phase 1 — Extract Design Tokens from Live Website

Skill: design-token-extractorRequires: Claude in Chrome active in browser

What it does

Crawls a live website using JavaScript injection via Claude in Chrome. Extracts every computed style value — colors, typography, spacing, shadows, borders, motion, z-index — across multiple pages. Produces a raw audit JSON and a visual HTML report.

How to trigger

In Claude chat, say:

"Extract design tokens from [URL]"

What happens

1. Claude navigates to the URL in Chrome
2. Runs a stack detection script (identifies Angular, React, Shadow DOM, etc.)
3. Selects 4–5 high-value pages to crawl (listings, not detail pages)
4. Runs a mega-extraction script on each page — pulls all computed styles
5. Aggregates results across pages
6. Delivers raw-tokens.json + an HTML visual report

Output

• raw-tokens.json — every observed value with context (element role, tag, page source)
• HTML report — color swatches, type scale, spacing distribution, WCAG contrast issues

Key things to know

• The extraction runs against computed styles, not source CSS — so it catches everything the browser actually renders
• Shadow DOM is pierced automatically (important for Angular/LWC sites)
• CSS custom properties are captured but filtered to skip non-design noise (URLs, long values, etc.)
• SPA navigation wipes window.* state — the skill handles this by running self-contained scripts per page

Save the output

Download raw-tokens.json — it's the input for Phase 2.

---

Phase 2 — Synthesise into Structured Tokens

Skill: design-system-synthesisRequires: raw-tokens.json from Phase 1

What it does

Transforms raw extracted values into a clean 3-tier design system: global (primitives) → semantic (roles) → component (specific). Produces a human-readable Foundation Spec and a machine-readable structured-tokens.json in W3C DTCG format.

How to trigger

Attach raw-tokens.json to Claude chat and say:

"Synthesise this audit into a design system"

What Claude asks

Before proceeding, Claude collects:

1. Project/brand name — used for token namespacing
2. Tech stack — determines output format alignment (e.g. shadcn/ui, Tailwind, Material)
3. Dark mode? — whether the audit contains dark mode values
4. Component scope — which components to stub (Button, Card, Input, etc.)

Output

• Artifact A — Foundation Spec (.md): Token tables, naming conventions, color palettes, type scale, spacing scale, accessibility notes, governance rules
• Artifact B — structured-tokens.json: W3C DTCG format with $value, $type, $description keys. Three tiers: global, semantic, component

Key decisions made here

• Raw hex values get named (e.g. #008446 → rocket-60 → color.primary)
• Duplicate/near-duplicate values get consolidated
• Semantic roles get assigned (which green is "primary" vs "accent" vs "success")
• Component tokens get stubbed with alias chains pointing to semantic tier

Save the output

Download structured-tokens.json — it's the input for Phase 3.

---

Phase 3 — Transform for Tokens Studio

Skill: tokens-studio-readyRequires: structured-tokens.json from Phase 2

What it does

Converts W3C DTCG format into Tokens Studio's expected format. Critical transformation: flattens everything into a single set so alias resolution works on Tokens Studio's free tier.

How to trigger

Attach structured-tokens.json to Claude chat and say:

"Convert this to Tokens Studio format"

Output

• [brand]-tokens-studio.json — single-set token file ready for import

Why this step exists

Tokens Studio creates one Figma Variable collection per set. On free tier, cross-collection alias resolution is broken — if you split core/semantic/component into separate sets, every semantic token resolves to white. The single-set format is the workaround.

Key transformations

• $value → value, $type → type (Tokens Studio key format)
• global → core, semantic → sem (collision-safe renaming)
• Component groups flatten to root level (e.g. component.button → button)
• All alias chains use {tier.group.token} syntax

Save the output

Download [brand]-tokens-studio.json — you'll import this into Figma next.

---

Phase 4 — Import into Figma via Tokens Studio

Tool: Tokens Studio plugin in Figma Requires: [brand]-tokens-studio.json from Phase 3

Steps

1. Open your target Figma file
2. Open Tokens Studio plugin (Plugins → Tokens Studio)
3. Click the Settings icon (gear) → Import → select your JSON file
4. Tokens Studio reads the file and shows token groups in the left panel
5. Click Styles & Variables → Export to Figma → select "Variables"
6. Choose Create new collection → name it (e.g. "design-system")
7. Click Export

Verify

• Open Figma's Local Variables panel (right sidebar → Variables icon)
• You should see your collection with all tokens organized by group
• Spot-check: click a color token — does the hex match your Foundation Spec?

Common issues

• Aliases show white: Token file has multiple sets. Re-run Phase 3 to ensure single-set output.
• Missing tokens: Check the Tokens Studio console for import errors. Usually a malformed alias path.
• Wrong collection name: You can rename in Figma's Variables panel after import.

---

Phase 5 — Generate Component Frames via MCP

Skill: figma-component-generatorRequires: [brand]-tokens-studio.json + Figma file URL + Claude Code with Figma MCP

What it does

Parses the token file, resolves all alias chains to raw values, and produces self-contained Claude Code prompt files — one per component. Each prompt contains every hex/px value baked in so Claude Code can build exact frames via generate_figma_design.

How to trigger

Attach [brand]-tokens-studio.json to Claude chat and provide your Figma file URL:

"Run the Figma component generator — here's my token file and Figma URL: [URL]"

What Claude asks

1. Which components to build (or all, if component groups exist in the JSON)
2. Sizing specs if tokens don't define them (heights, padding per size)

Output

• One .md prompt file per component (e.g. 01-button-claude-code-prompt.md)
• Each is fully self-contained — all values resolved, no dependencies on conversation context

Running the prompts in Claude Code

1. Open terminal → run claude
2. Paste the contents of 01-button-claude-code-prompt.md
3. Claude Code calls get_variable_defs (reads your Tokens Studio variables) then generate_figma_design (builds the frames)
4. Watch components appear in your Figma file in real time
5. Wait for completion → paste the next prompt
6. Repeat for all components

What you get

• Frames on separate pages per component (Button, Card, Input, Badge, Modal)
• Correct colors, typography, spacing, radii matching your token values
• Variant × size × state grids with labels
• Auto-layout on all frames
• Semantic layer names

What you DON'T get

• These are frames, not Figma Components — no purple diamond, no variants panel, no instances
• Variables are not bound yet (MCP can't do this)

Troubleshooting

• MCP auth fails: Remove and re-add the server in ~/.claude/claude_code_config.json. Don't just run /login.
• "Tool not found": Save config file and restart Claude Code
• Partial build: Re-run just the failed component's prompt — each is independent

---

Phase 6 — Bind Variables with Plugin

Tool: Variable Binder for AI Outputs Plugin link: figma.com/community/plugin/1607581803993871257Requires: Component frames from Phase 5 + Variables from Phase 4

What it does

Scans all frames in the file, matches raw hex/px values to your imported Figma Variables, and binds them. This means your frames now reference variables instead of hard-coded values — so when you change a token in Tokens Studio, the frames update.

Steps

1. Open your Figma file with the built component frames
2. Run the plugin: Plugins → Development → Variable Binder for AI Outputs
3. The plugin scans and binds automatically
4. Check the console output (toggle with Show/Hide console) for binding count

How matching works

The plugin uses smart matching based on property context:

• Frame fills → matches background/fill tokens
• Text color → matches foreground/text tokens
• Strokes → matches border/stroke tokens
• Radius, spacing → matches by px value

Verify

• Select a frame → check the Fill field in the right panel → should show a variable name (not just a hex value)
• Select text → check Text color → should show a variable reference
• Change a variable value in the Variables panel → frames should update

---

Phase 7 — Convert Frames to Figma Components

Tool: Figma (manual) Requires: Bound frames from Phase 6

This is the one manual step. generate_figma_design can't create Figma Components — only frames. You need to convert them.

Per component (e.g. Button):

1. Select a variant frame (e.g. "Button/Primary/Default/md")
2. ⌘⌥K (Mac) / Ctrl+Alt+K (Win) → converts to Component
3. Repeat for every variant/size/state combination you want as a variant
4. Select all related components (all Button variants)
5. Right-click → Combine as Variants (or use the design panel)
6. Rename variant properties in the right panel:
   • Property 1 → Style (values: Primary, Accent, Secondary, Destructive)
   • Property 2 → Size (values: sm, md, lg)
   • Property 3 → State (values: Default, Hover, Focus, Disabled)
7. Name the component set → "Button"
8. Repeat for each component type

Time estimate

~5–7 minutes per component, ~30 minutes total for 5 components.

After conversion

• Components appear in the Assets panel
• You can drag instances onto any frame
• Instances inherit variable bindings from the main component
• Changing a token value in Tokens Studio → export → updates all instances

---

End-to-End Checklist

• Phase 1: raw-tokens.json extracted from live site
• Phase 2: Foundation Spec + structured-tokens.json produced
• Phase 3: [brand]-tokens-studio.json converted for Tokens Studio
• Phase 4: Tokens imported → Figma Variables created
• Phase 5: Component frames built via Claude Code + MCP
• Phase 6: Variable Binder run → frames bound to tokens
• Phase 7: Frames converted to Figma Components with variants
• Spot-check: change a token value → verify components update

---

Tools Reference

Tool	Purpose	Where
Claude in Chrome	Browser automation, JS injection for token extraction	Chrome extension
Claude Code	Terminal CLI, runs MCP tools including generate_figma_design	npm install -g @anthropic-ai/claude-code
Tokens Studio	Token management, Figma Variable import/export	Figma plugin
Variable Binder for AI Outputs	Binds raw values to Figma Variables post-MCP	Figma Community
Figma MCP Server	Connects Claude Code to Figma API	@anthropic-ai/figma-mcp-server

---

Known Constraints

• generate_figma_design creates frames, not components. Manual conversion is required (Phase 7).
• MCP can't bind Figma Variables. That's what the Variable Binder plugin solves.
• Tokens Studio free tier breaks cross-collection aliases. The single-set format from Phase 3 is the workaround.
• Figma MCP auth expires. Fix: remove and re-add the server in config, don't just re-login.
• SPA navigation wipes window state. The extraction skill handles this with self-contained per-page scripts.
• Shadow tokens can't be Figma Variables. They export as Effect Styles only — documented in the Foundation Spec but not bindable.
• Enterprise Figma seats may restrict plugin installation. Use a personal Figma account for plugins if needed.