Figma to Code with Claude & MCP: A Step-by-Step Guide

TL;DR — 4 quick steps

Enable Figma Dev Mode MCP, install Claude Code, add an MCP server, then select frames and ask Claude to generate code. See full steps below with commands and troubleshooting links.

Why this helps

You can turn a Figma mockup into usable front-end code fast. The Figma Dev Mode MCP Server gives Claude context about your designs so Claude Code can produce cleaner, more accurate code. This cuts the handoff time from hours to minutes and keeps spacing, colors, and components consistent.

What you need (prerequisites)

• Figma Desktop app with Dev Mode enabled (MCP works in desktop only) — see the official Figma guide.
• Claude Code (Claude Desktop or Claude Code CLI) installed. Many tutorials show setup, for example Builder.io and community videos.
• Optional: a local MCP server (like Composio) or use Figma's native MCP URL.
• Basic front-end skills (React, Tailwind, HTML) so you can review and integrate generated code.

Step-by-step setup

1) Enable Figma Dev Mode MCP

Open Figma Desktop → Preferences → Enable Dev Mode MCP server. Figma will show a local URL like http://127.0.0.1:3845/mcp. Keep that tab open. See Figma's docs for details: Guide to the Dev Mode MCP Server.

2) Install and open Claude Code

Install Claude Code or open Claude Desktop. If you prefer a CLI, follow install steps from the community tutorials such as the DesignCourse video or the Builder.io walkthrough.

3) Add your MCP server to Claude

In your terminal (or Claude Code interface), add the Figma MCP server. Example command many guides use:

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

After adding, verify with claude mcp list. Builder.io documents this flow at Builder.io.

4) Authenticate if needed

Some MCP servers (Composio or custom) will direct you to an auth URL. Follow the link Claude provides. See a Composio example here: Composio guide.

5) Start converting designs

Work two ways:

• Selection-based: In Figma select a frame or component. Then in Claude prompt: "Generate React + Tailwind for my current selection. Give full component code and styles."
• File-based: Share the Figma file link and ask Claude to convert frames or to extract design tokens.

Builder.io and community posts show sample prompts and nuances: Builder.io, Composio, and community plugins like Code to Figma.

Practical walkthrough — convert a card component

Follow these quick steps to turn a simple portfolio card into a React component.

1. Select the card frame in Figma (Dev Mode on).
2. In Claude: "Export this selection as React + Tailwind. Include props for title, image, and button text. Provide full component file and CSS classes."
3. Copy the output into your codebase. Tweak small bits if needed (image paths, state).

// Example prompt you can paste to Claude
"Convert my selected Figma frame to a React functional component using Tailwind. Export a single file with imports, default props, and accessible button markup. Keep spacing and colors from the design and give design tokens as a JSON object."

Tip: Ask Claude "Always give full code" to avoid snippets. Videos and tutorials demonstrate this pattern; see DesignCode and DesignCourse.

Troubleshooting — common problems and fixes

• Claude can’t see Figma: Check Figma Dev Mode is on and the MCP URL matches. Restart Claude Code and Figma.
• Auth loop: If using Composio or a custom MCP, follow the URL Claude gives and complete authorization. See Composio.
• Partial code or missing styles: Re-prompt with "Always provide full file output" and include the selection context. Use the Figma plugin Figma to AI Code if you want alternate export formats.
• Performance or token limits: Convert large flows frame-by-frame, then ask Claude to stitch them together.

FAQ

Will this give production-ready code?

Often it gives solid starting code. You should review accessibility, tests, and build integration. Many users report near pixel-perfect output with models like Claude 3.7 when the MCP context is correct — see reports on html.to.design and community write-ups.

Can Claude modify Figma elements?

Yes — MCP is bidirectional in many implementations. Projects like claude-talk-to-figma-mcp show how AI can create or edit elements in real time.

What about design tokens?

Ask Claude to extract tokens (colors, sizes, fonts) as JSON. Then reuse them in your theme or design system. This is a major advantage of the MCP flow.

Quick checklist before you convert

• Figma Dev Mode enabled
• Claude Code installed and updated
• MCP server added via claude mcp add
• Selected frame/component is clean and named
• Prompt includes desired framework and exact output format

Final note and one quick check

You can think of MCP as a translator that lets Claude read your Figma like a developer would. Small edits after generation are normal. Quick check: can you run the generated component locally? If yes, you completed the loop.

Checkpoint question: Can you select a small component and get a full React file back in one prompt? Try it now.

Resources: Figma Dev Mode MCP guide, Builder.io MCP + Claude, Composio walkthrough, GitHub repo, html.to.design.