Design-to-Code: Figma and Design Systems
You asked the AI to build a card from a Figma frame and it shipped clean-looking code — with a brand-new #4F86F7 button, a one-off rounded-[10px], and a hand-rolled avatar that ignores the <Avatar /> you already maintain. Multiply that across a sprint and your “design system” quietly forks into forty slightly-different blues. Generating a component from a screenshot is the easy 80%. The hard 20% — the part that actually keeps a codebase maintainable — is making the AI reuse your tokens and your components every single time.
This is the deep-dive on that 20%. If you just need the Figma MCP server installed and a first component on the screen, start with Figma and Design System MCP and come back here.
What You’ll Walk Away With
Section titled “What You’ll Walk Away With”- A repeatable flow for syncing Figma variables into a typed token file your code imports
- Prompts that force generated UI to consume existing tokens and Code Connect components, not invent new ones
- A token pipeline (Figma variables to Style Dictionary to CSS/TS) that survives more than one component
- A “design parity” check so a reviewer can tell, in seconds, whether the code actually matches the design
- The failure modes that quietly degrade fidelity, and how to recover
Step 1: Sync design tokens before you generate anything
Section titled “Step 1: Sync design tokens before you generate anything”The single highest-leverage move is to extract Figma’s variables once, into a file your code imports, before you ask for any components. Then every later generation can be told “use the tokens” instead of guessing hex values.
get_variable_defs returns the design’s variable collections — colors, spacing, radii, typography — with their semantic names. Capture them into a typed source of truth.
This is the difference between a demo and a workflow: the tokens file is reused by every subsequent prompt, so the AI never has to eyeball a color again.
Step 2: Turn tokens into a real pipeline with Style Dictionary
Section titled “Step 2: Turn tokens into a real pipeline with Style Dictionary”A single tokens.ts is fine for a small app. For anything shared across platforms (web, native, email) you want a transform step so one token source emits CSS custom properties, a JS/TS object, and whatever else you need. Style Dictionary is the standard tool for this, and the AI can wire it up from your exported tokens.
-
Export tokens in the Style Dictionary format. Ask the AI to convert the Figma variables into a
tokens.jsonusing the W3C design-tokens shape ({ "$value": ..., "$type": ... }) rather than an ad-hoc object. -
Generate the config and build. Have the AI scaffold
config.jsonwithcss/variablesandjavascript/es6platforms, then run the build to emit:rootcustom properties and an importable module. -
Point components at the generated CSS variables. From here on, generated components reference
var(--color-primary)— which traces back to a Figma variable — so a design token change propagates with one rebuild.
Step 3: Wire Code Connect so the AI reuses your components
Section titled “Step 3: Wire Code Connect so the AI reuses your components”Tokens stop one-off colors. Code Connect stops one-off components. It maps a Figma component to the real component in your codebase, so when the AI sees that component in a design, get_code_connect_map tells it to import yours instead of generating a fresh one.
The payoff: prompts can say “use our components where Code Connect maps exist,” and the generated tree is composed from your battle-tested <Button /> and <Avatar /> rather than divs styled to look like them.
Keep Figma open with the frame selected, open the file you want the component in, and use Agent mode so it can read the Code Connect map and edit multiple files:
“Implement the selected Figma frame as a React component in src/components/ProfileCard.tsx. First call get_code_connect_map; for any node with a mapping, import and use that existing component instead of generating new markup. For everything else, use the CSS variables from src/styles/tokens.css. Do not introduce raw hex values or one-off pixel radii.”
Run from the repo root so it has filesystem context for both the tokens file and the component directory:
“Implement the selected Figma frame as src/components/ProfileCard.tsx. Call get_code_connect_map first and reuse any mapped components via their real import paths. Pull every color, spacing, and radius from src/styles/tokens.css — no literal hex or px values. After writing the file, run the type-check and fix any import errors you introduced.”
Codex can run this as a delegated task once the Figma MCP server is in ~/.codex/config.toml:
“Implement the selected Figma frame as src/components/ProfileCard.tsx. Use get_code_connect_map to find existing components and import those rather than re-creating them; use the CSS variables in src/styles/tokens.css for all design values. Open a PR with a screenshot of the rendered component alongside the Figma node link in the description.”
Step 4: Verify design parity, don’t eyeball it
Section titled “Step 4: Verify design parity, don’t eyeball it”The whole point of token and component reuse is that a reviewer should be able to confirm fidelity fast. Pair the Figma MCP server with a browser MCP server (such as @playwright/mcp) to render the result and diff it against the design.
Reviewing the diff with token names attached is far faster than scrubbing pixels, and it tells you whether the mismatch is a code bug or a missing Figma variable.
When This Breaks
Section titled “When This Breaks”get_design_context returns sprawling, unstyled markup. The selection is too large or too deep. Call get_metadata first to see the layer tree, then point the AI at a specific child frame instead of the whole page.
The AI still emits raw hex despite the tokens file. It is blending Figma data with its training defaults (especially Tailwind’s palette). Be explicit: “Use only var(--*) tokens from tokens.css. Any literal hex or px value is a bug — flag it instead of writing it.”
get_variable_defs returns almost nothing. The designer applied raw styles, not variables. Tokens only export when they are real Figma variables. Ask the designer to convert styles to variables, or fall back to get_screenshot plus manual values for that one component.
get_code_connect_map is empty. No Code Connect mappings are published yet. Generation proceeds without component reuse; set up Code Connect for your highest-traffic components first (buttons, inputs, cards) for the biggest fidelity win.
Figma MCP is unavailable on Linux. The desktop server requires the Figma app, which runs only on macOS and Windows. Use the remote server at https://mcp.figma.com/mcp with an OAuth token instead — it is link-based, so it works anywhere.
Connection refused. For the local server, confirm Figma desktop is open and the Dev Mode MCP Server toggle is still on. See the setup guide for the full install across each tool.