Figma to Code with MCP

Why this matters

The handoff between design and code has always been a lossy process. You design a component in Figma. Then you describe it in a ticket. Then an engineer interprets your description. By the time it ships, three people have translated the same intent and something got lost.

MCP skips all three translations. It connects Figma directly to your AI code editor, so the AI reads your actual design (tokens, spacing, structure) instead of your description of it.

This workflow assumes Figma MCP is already running. If it is not, set it up first using the linked guide below.

Step 1: Make sure Figma MCP is running

If you have not connected Figma to your AI editor yet, do that first. The setup is the same whether you use the remote or local server.

You should be able to type something like “list the components in this Figma file” in your AI editor and get back actual results from your file. If that works, MCP is connected. Continue.

Step 2: Pick a single component

Open Figma. Find the component you want to convert. Right-click the frame → Copy link to selection.

Important: pick one component the first time. Not a full screen. Not a flow. A button, a card, a form input. Small enough that you can read the generated code in 30 seconds.

If you skip this and try a whole page, the AI will give you a giant blob of code that you cannot debug. Start small. Scale up.

Step 3: Prompt the AI

In Cursor or Claude Desktop, paste this prompt and replace the placeholders:

I need a React component that matches this Figma design exactly.

Figma URL: [paste your Figma component URL]

Requirements:
- Use the design tokens from this codebase (do not hardcode colors or spacing)
- Match the responsive behavior shown in the Figma file
- Include keyboard navigation and ARIA labels for accessibility
- Follow the patterns in src/components/ for naming and structure

Output the component file, the storybook story, and a usage example.

The AI will fetch the Figma file via MCP, inspect the structure, and generate code. This usually takes 20 to 60 seconds.

Step 4: Review the output

Do not merge what the AI gives you on the first try. Check for these specific things:

• Token usage. Are colors and spacing referencing your tokens, or hardcoded? Hardcoded values are the most common mistake.
• Responsive behavior. Does the component match Figma’s auto-layout breakpoints?
• Accessibility. Are interactive elements keyboard-navigable? Do icons have labels?
• Naming. Does the component file match your existing naming convention?

If anything is off, tell the AI in plain English: “The padding here is hardcoded as 16px. Use the spacing.md token instead.” It will fix it and try again.

Step 5: Verify in Storybook

Add the generated story to Storybook and compare side-by-side with the Figma frame.

If you do not use Storybook, this is the moment to set it up. You will catch visual regressions before they ship.

What you get

After this workflow, you have:

• A working pipeline from Figma to production code
• A repeatable prompt template for new components
• A QA checklist for reviewing AI-generated code
• A clear understanding of what MCP can and cannot do

Common pitfalls

• Skipping Figma MCP setup. If MCP is not connected, the AI will hallucinate the design. Always verify the connection in step 1 before prompting.
• Trying to convert a whole screen. Start with a single component. Build trust with the workflow. Then scale up.
• Accepting hardcoded values. Every hardcoded color or spacing is technical debt. Push back on the AI in plain English until it uses tokens.
• Forgetting accessibility. AI generates valid HTML but often skips ARIA. Always check keyboard navigation and screen reader labels.

Exercise

Convert one real Figma component to code via MCP

30 min

1. Pick a single component and copy its Figma link

   Open a Figma file in your design system or product. Pick one small component: a button, a card, a form input. Right-click the frame and choose Copy link to selection. Not a full screen. Not a flow. One component.

   • The link points to a single component, not a page
   • You can read the entire generated code in about thirty seconds once it comes back
   • The component uses Auto Layout and bound variables, so MCP has structure to read

2. Prompt your AI editor and review for tokens, a11y, and naming

   Paste the prompt template from Step 3 into Cursor or Claude Desktop. Replace the placeholder with your Figma URL. After the AI generates code, check four things: token usage (no hardcoded hex or px), responsive behavior matches auto-layout, keyboard navigation and ARIA are present, file naming matches your existing convention.

   • Colors and spacing reference your token variables, not raw values
   • Interactive elements are keyboard-navigable and icons have labels
   • When something is off, a plain-English correction (“use spacing.md instead of 16px”) fixes it in one turn