Turn a Figma Frame into a Production Component with the Dev Mode MCP

Tier: Core · Workflow area: Design-to-code & design systems · Tools: Figma Dev Mode MCP, Claude Code, Cursor, VS Code Copilot

Pasting a screenshot into a chat window produces plausible-looking markup with invented spacing and colors sampled off pixels. The Dev Mode MCP changes the input class entirely: the agent sees that this padding is spacing/300, that fill is color/surface-raised, that this frame uses auto-layout with 12px gap. What it does with that truth still depends on you.

When to use

• A designed, approved frame exists and needs to become a real component or screen in the codebase.
• Your Figma uses variables and auto-layoutthe MCP's structured payload is only as good as the file's hygiene.
• Instruction files and (ideally) Code Connect are in placepb-02 conditions the output; pb-10 makes it reference your components.
• Repeat translation worka team shipping designed screens weekly amortizes the setup in days.

When NOT to use

• Exploratory design conversationsiterate in Figma or with prompt-to-UI tools (pb-01) first; MCP translation of a churning design wastes cycles.
• The frame is a flat image or messy freeform canvasno auto-layout, detached styles, absolute positions: fix the file or accept screenshot-grade output.
• Client NDA restricts toolingservices contexts may require client-tenant tools only and redacted screenshots; check the engagement terms before connecting an external agent to a client file.

The recipe

1. 1.

   Enable the server and connect your agent. In the Figma desktop app: Preferences → Enable Dev Mode MCP Server (runs at http://127.0.0.1:3845/mcp). Then register it:

   Copy

   claude mcp add --transport http figma-dev-mode http://127.0.0.1:3845/mcp
   

   For Cursor/VS Code, add the same HTTP server in MCP settings. Verify from the agent: select a frame in Figma, then ask What frame is currently selected? Summarize its layer tree. — a correct answer proves the pipe.

2. 2.

   Prepare the frame like an engineer, not a tourist. Two minutes in Figma that determine output quality: confirm auto-layout on the frame and its children, styles attached to variables (not detached hex fills), layers named semantically (card/header, not Frame 427), and component instances used where the design system has them. If the frame fails this inspection, tell the designer what specifically blocks translation — that conversation is part of the pipeline.

3. 3.

   Generate with scope, target, and system constraints explicit. Select the frame in Figma, then:

   Copy

   Using the Figma Dev Mode MCP, get the code and variable definitions
   for my current selection (the SubscriptionCard frame) plus its
   screenshot. Implement it as src/features/billing/SubscriptionCard.tsx:
   - @acme/ui primitives only (Card, Stack, Text, Badge, Button)
   - Figma variables map to our tokens: spacing/* -> our 4px scale,
     color/* -> our semantic Tailwind classes. NO raw hex, no pixel
     literals where a token exists.
   - Auto-layout becomes flex via Stack props, not hand-written flexbox.
   - Props: plan, price, renewalDate, status ('active'|'past_due'|
     'canceled'), onManage. The three status variants in the Figma
     component map to the status prop.
   - Add Storybook stories for all three variants (pb-06 conventions).
   

   Good output: token classes everywhere, Stack gap values from your scale, the status variants driven by one prop — and an explicit note where the design had something your system lacks ("Figma uses a 6px radius; nearest token is radius-sm (4px) — confirm").

4. 4.

   Run the structured fidelity review — not an eyeball pass. Render the component (Storybook story), screenshot it, and make the agent compare against the Figma screenshot systematically:

   Copy

   npx playwright screenshot \
     "http://localhost:6006/iframe.html?id=subscriptioncard--active&viewMode=story" \
     shots/impl-active.png
   

   Copy

   Compare shots/impl-active.png against the Figma screenshot of the
   selected frame. Produce a discrepancy table with columns: element,
   property (spacing/type/color/radius/alignment), Figma value, impl
   value, severity (must-fix / token-mismatch / intentional). Check
   ALL text styles against our type scale, every gap and padding, and
   the Badge color for each status variant.
   

   Fix must-fixes, re-screenshot, re-compare. Two iterations usually reaches token-exact. (pb-11 covers this diffing loop in depth.)

5. 5.

   Review the semantics the MCP cannot give you. Design truth ≠ component quality. Before the PR: interactive elements are real buttons/links with accessible names; heading levels fit the page the component lands in; the responsive behavior below the frame's designed width is defined (the frame shows one width — you decide what happens at 320px); loading/empty/error states exist even if the frame omitted them (it usually does — pb-04's enumeration applies).

6. 6.

   Close the loop with the designer. Post the rendered stories back into the Figma file as a comment (or link the Storybook build in the PR and tag the designer). Deviation decisions — "radius-sm instead of 6px" — get resolved now, in one message, not archaeologically during design QA.

Make it yours

• React + Tailwind (as written)the richest path today; pair with Code Connect (pb-10) so instances in the frame emit your imports instead of regenerated primitives.
• Vue / Angularthe MCP payload is framework-neutral; state the target explicitly ("implement as a Vue 3 SFC with <script setup lang="ts">" / "Angular standalone component") and map Figma variables to your token pipeline (CSS custom properties, SCSS maps); expect to lean harder on step 4 since less community exemplar code exists.
• React Native / Fluttertranslate auto-layout to Yoga flex props or Flutter layout widgets; add mobile-specific review items: safe areas, touch-target ≥ 44pt, dynamic type behavior, and density-independent units instead of raw px.
• Free tier / no MCP accessexport the frame's dev-mode CSS and a screenshot into a context bundle by hand; same prompts, lower fidelity — the review loop in step 4 becomes even more important.

Quality check

• Structured discrepancy table exists in the PRwith every must-fix resolved and every intentional deviation justified.
• Zero raw values where tokens existgrep the diff for hex colors and off-scale pixel literals.
• States beyond the frame are implementedloading, empty, error, and sub-designed-width behavior all demonstrable in stories.
• A11y semantics verified by handroles, names, heading level, keyboard path.
• Designer saw the rendered resultsign-off or open questions threaded, before merge, not after.