Skip to content
⌘K
Tutorial ~30 min Hands-on · Figma → Code

Tutorial

Use figma-console MCP to read a Figma component spec directly — design tokens included — then Storybook MCP to match Atelier UI components, and let Claude Code write token-exact code. The next section explains what an MCP is.

Just want the recipe? Try the 15-min kata instead.

What you'll learn

  • Read a Figma component's boundVariables via MCP
  • Match the right Atelier UI component through the Storybook MCP
  • Generate token-exact code in Angular, React or Vue
  • Verify design parity automatically

Before you start

  • Completed the Workshop setup
  • figma-console MCP configured — see Figma Setup
  • Read access to the Atelier UI Figma file (linked below)
  • One framework picked — Angular, React or Vue
Without MCP ~12 min
  1. Open Figma · click the frame
  2. Read the inspect panel by hand
  3. Note color tokens · copy by hand
  4. Note spacing & radius tokens
  5. Switch to the Storybook tab
  6. Find the right component
  7. Read prop docs & variants
  8. Type the code · risk drift
  9. Manually verify against the design

Drift risk at every step.

With MCP ~90 sec
  1. Copy the node-id from the Figma URL
  2. Send one prompt to Claude Code
"build component for node-id 695-313 using figma-console + storybook-react MCP."
  1. Token-exact code lands
  2. Optional: figma_check_design_parity

Single source of truth · no drift.

What's an MCP, in 30 seconds?

Claude Code can call functions exposed by an external MCP server. The server fetches structured data from a source (Figma, Storybook, Nx) and hands it back — no screenshots, no copy-paste, no prompt-stuffing. Each call is one of four hops:

MCP request and response flow Four boxes left to right: User, Claude Code, MCP Server, Source. Solid arrows show the forward request flow (prompt, tool call, fetch). Dashed arrows show the return response flow (data, response, answer). Claude Code is highlighted as the active agent making the tool decision. User "build this card" Claude Code decides which tool to call MCP Server figma-console · storybook-* Source Figma · Storybook prompt tool call fetch answer response data No screenshots · no copy-paste · structured data only
Each MCP call is a four-hop round trip. The dashed return arrows carry the data Claude needs — boundVariables for figma-console, prop tables for storybook-*.

This tutorial uses two MCP servers: figma-console (reads Figma component frames) and one of the storybook-* servers (returns Atelier UI component prop documentation). The next section walks the figma-console tools you'll use.

What figma-console MCP provides

The key tool is figma_get_component_for_development. Given a node-id it returns:

boundVariables
Each CSS property mapped to its Figma variable name — identical to the CSS custom property name in Atelier UI. No conversion needed.
2× rendered image
A screenshot of the component, included automatically. AI gets visual and structural context in a single call.
Component tree
Full layout structure: padding, gap, constraints, text behaviour, and interaction states (reactions).
figma_get_component_for_development — response shape
// What figma_get_component_for_development returns for a card frame:
{
  "name": "Settings / Card",
  "boundVariables": {
    "fills":         [{ "variable": "color/surface-raised" }],  // → --ui-color-surface-raised
    "paddingTop":    { "variable": "spacing/6" },               // → --ui-spacing-6
    "paddingLeft":   { "variable": "spacing/6" },               // → --ui-spacing-6
    "itemSpacing":   { "variable": "spacing/4" },               // → --ui-spacing-4
    "cornerRadius":  { "variable": "radius/lg" }                // → --ui-radius-lg
  },
  "image": "<2x rendered PNG — included automatically>"
}

The workflow

Figma-to-code sequence diagram Five steps from selecting a frame in Figma to verifying design parity. Data flows from left to right: node-id, boundVariables, prop spec, generated code, parity score. A dashed loop returns discrepancies to the first step. node-id boundVariables prop spec code parity discrepancies · iterate A Select Figma frame B Read spec figma_get_component C Match props storybook-* MCP D Generate Claude writes code E Verify check_design_parity ✓ shipped component
Each step passes concrete data to the next. The dashed arrow closes the loop when parity checks surface discrepancies.
A

Select the component in Figma

Open the Atelier UI Figma file and click the frame you want to implement. The node-id appears in the URL after ?node-id= — copy that value, you’ll pass it to the MCP tool.

Figma URL with the node-id parameter highlighted Mockup of a browser URL bar showing a Figma design URL. The node-id=695-313 parameter at the end is highlighted in cyan with a caption arrow pointing to it. figma.com/design/QMnDD8uZQPldPrlCwZZ58T/Atelier-UI ?node-id=695-313 this is the node-id pass it to figma_get_component_for_development
The node-id is the value after ?node-id= in the Figma URL. Colons (:) appear URL-encoded as %3A or as a single dash.
B

AI reads the spec

Claude Code calls figma_get_component_for_development(nodeId). The response includes boundVariables listing every design token used in the frame, plus a rendered image for visual reference — no screenshots needed.

C

AI matches to Atelier UI components

Claude Code queries the Storybook MCP (list-all-documentation → get-documentation) for the matching component. It gets exact prop names and variants — no guessing.

D

AI generates token-exact code

With the Figma token names from boundVariables and the correct Atelier UI props from Storybook, the generated code uses the right component APIs and the exact CSS custom properties — no hardcoded values, no style overrides.

E

Verify design parity (optional)

figma_check_design_parity compares the generated code against the Figma spec and returns a parity score plus specific discrepancies. Pass the prompt below to close the loop.

parity check prompt
Run figma_check_design_parity on the settings card node
against the component I just generated. Fix any discrepancies.

Example prompt

A prompt that drives the full A–D workflow in one shot:

example prompt
I've selected the "Settings / Card" frame in Figma.


1. Use figma-console MCP (figma_get_component_for_development) to read
   the component spec — I need the boundVariables and the visual reference.
2. Use storybook-react MCP to look up LlmCard and LlmInput props.
3. Generate the React component using:
   - The Atelier UI components matched from Storybook
   - The exact token names from boundVariables (they map 1-to-1 to CSS
     custom properties — no conversion needed)

Generated output

What Claude Code produces — using LlmCard and LlmInput from Atelier UI with tokens drawn directly from Figma boundVariables: 

import { LlmCard, LlmInput, LlmButton } from '@atelier-ui/react';


export function SettingsCard() {
  return (
    <LlmCard
      variant="elevated"
      style={{ padding: 'var(--ui-spacing-6)', display: 'flex', flexDirection: 'column', gap: 'var(--ui-spacing-4)' }}
    >
      <h2 style={{ fontSize: 'var(--ui-font-size-lg)', fontWeight: 600, color: 'var(--ui-color-text)', margin: 0 }}>
        Account Settings
      </h2>
      <LlmInput label="Name" placeholder="Jane Smith" />
      <LlmInput label="Email" type="email" placeholder="jane@example.com" />
      <div>
        <LlmButton variant="primary">Save Changes</LlmButton>
      </div>
    </LlmCard>
  );
}

Run it

Save the generated component, start your dev server, and verify against the Figma frame. The framework tabs above stay in sync with this section.

  1. Save as apps/workshop-react/src/components/SettingsCard.tsx
  2. Start the dev server
    Terminal window
    npx nx serve workshop-react
  3. Open http://localhost:4201 A card with two text inputs (Name, Email) and a primary "Save Changes" button — surface-raised background, padding from the Figma spacing token.
  4. Verify parity Run the parity prompt above — Claude will list any discrepancies and propose fixes.

figma-console MCP — tools used

ToolWhen to use
figma_get_component_for_development Main tool — reads component tree, boundVariables, and renders a 2× image. Use for any "build this component" task.
figma_get_component_for_development_deep For complex, deeply nested components (depth > 4) — resolves all boundVariables to actual token names.
figma_get_variables Export all design tokens as CSS / Tailwind / TypeScript. Handles Light and Dark mode values.
figma_check_design_parity Compare generated code against the Figma spec. Returns a parity score and actionable fix list.
figma_generate_component_doc Generate structured component documentation (anatomy, tokens, variants) by merging Figma data with code-side info.