Turn a Figma design into working code with Claude

You’ll finish this guide with a Figma frame (a screen, a card, a pricing table) rebuilt as real code in your project, using the colors, spacing and components from the design rather than a rough guess from a screenshot. The bridge is Figma’s MCP server, an official plug-in from Figma that hands Claude the design’s actual data: layers, sizes, variables (Figma’s saved colors, spacing and type values) and components.

The setup is Claude Code first, because writing code into a project is what Claude Code is for. Claude Desktop and claude.ai notes are at the end.

What you’ll have at the end

• Figma connected to Claude Code and signed in.
• One frame turned into code inside your project, previewed in your browser.
• A prompt template that tells Claude where to put files and which of your components to reuse.

What you need

• Claude Code installed and signed in.
• A Figma account. Figma’s Claude Code article lists Starter, Professional, Education, Organization, Government or Enterprise plans. How much you can use it depends on your seat (see the limits table below).
• A code project to put the result in. If you don’t have one, ask Claude Code to “create a minimal React + Vite project in this folder” first.
• Edit or view access to the Figma file you want to build.

Check your limits first

Figma counts each tool call against a limit tied to your seat type. From Figma’s rate limit page:

Seat	Plan	Calls per day	Calls per minute
View or Collab	Any plan	20 per month	n/a
Dev or Full	Starter	Not available	Not available
Dev or Full	Professional / Education	200	10
Dev or Full	Organization	200	15
Dev or Full	Enterprise	600	20

Figma notes it “may change rate limits at any time”. On a View or Collab seat, 20 calls a month goes quickly, so make each prompt count: one frame, a clear instruction, and a request for a plan before code.

Step-by-step

1. Install Figma for Claude Code

Figma recommends its plugin, which installs the MCP server plus Figma’s skills (instruction packs that teach Claude Figma’s preferred workflow). In your terminal:

claude plugin install figma@claude-plugins-official

If that fails, your organization may block plugin installs. Use the manual command instead (it adds the server but not Figma’s skills):

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

--scope user makes it available in all your projects. Leave it out to limit Figma to the current folder.

2. Sign in to Figma

If you used the plugin:

1. Restart Claude Code if it was running.
2. Type /plugin and press Enter.
3. Press the right arrow to open the Installed tab.
4. Select the figma server and press Enter, then Enter again to start signing in.
5. In the browser page that opens, click Allow access.
6. Type /plugin again; figma should show as connected.

If you used the manual command:

1. Start a new Claude Code session.
2. Type /mcp, select figma, then Authenticate.
3. Click Allow access in the browser.
4. Claude Code should show “Authentication successful. Connected to figma”.

3. Copy a link to the frame

With Figma’s remote server, you point Claude at a design by including a link to a frame or layer in your prompt. In Figma, select the frame, then use Figma’s copy-link option for that selection. The link contains a node-id, which tells the server exactly which layer you mean.

Pick a single frame, not a whole page. Smaller selections give better code and use fewer calls.

4. Ask for a plan, then the code

Figma’s own advice: write your prompt “like you’re briefing a teammate”. Say which framework, where the file goes, and which existing components to reuse. Use prompt 1 below. Ask Claude to describe its plan first, check it, then let it write.

5. Preview and compare

Ask Claude to start your dev server, open the page, and compare it to the frame. If something is off, say exactly what: “the card corners should be 12px, and the button uses our Primary color variable”.

Figma’s main tools

You don’t call these by name, but they explain what Claude can see. From Figma’s tools page:

• get_design_context: generates code for a layer or selection (React and Tailwind by default).
• get_variable_defs: lists the variables and styles used in the selection.
• get_metadata: a lightweight outline of layer names, types, positions and sizes. Useful for big frames.
• get_screenshot: an image of the selection. Claude’s connector listing notes that in Claude and Claude Code this currently returns only a description of the screenshot.
• download_assets: exports images and icons, up to 20 nodes per call.
• get_code_connect_map: returns Code Connect mappings, Figma’s feature for linking design components to your real code components.

Make it useful: prompts to try

Here's a Figma frame: <paste link>. Build it as a React component in src/components/marketing/PricingCard.tsx. Reuse the Button and Card components from src/components/ui instead of creating new ones. Use the Figma variables for colors and spacing, and map them to our existing CSS variables in src/styles/tokens.css where they match. First, tell me your plan and list any Figma variables that have no match in our tokens file. Wait for my OK before writing code.

Get the variables used in this Figma frame: <paste link>. Compare them with src/styles/tokens.css and give me a table: Figma name, Figma value, our matching token (or "missing"). Don't change any files.

Export the icons in this Figma frame as SVGs into public/icons, using kebab-case file names: <paste link>. Then update src/components/Header.tsx to use them.

The second prompt is a cheap first call. It shows you how well your code’s design tokens match Figma before you generate any layout.

Claude Desktop and claude.ai

Figma is in Claude’s connector directory, made by Figma and marked “Anthropic verified”. Figma’s help center describes connecting from claude.ai: open Settings > Connectors (newer apps show Customize > Connectors), browse the directory, select Figma, and complete sign-in. Figma’s developer docs list Claude Desktop as supporting the remote server through this connector.

In a chat you can paste a frame link and ask for HTML and CSS, a component spec, or a FigJam diagram. Without a project folder, Claude can’t reuse your components or write into your files, so for real design-to-code work, use Claude Code.

Troubleshooting

• claude plugin install fails. Your organization may block plugins. Use the claude mcp add command in step 1 and ask your Claude admin if you need the plugin.
• “Rate limit” or calls stop working. Check your seat in Figma. View and Collab seats get 20 calls per month. Ask Claude to use get_metadata on large frames first and then fetch only the parts it needs.
• Claude says it can’t find the design. Make sure the link includes node-id= and that your Figma account can open the file. Re-authenticate via /plugin or /mcp.
• Code ignores your components. Name the exact folder and component names in the prompt, as in prompt 1. Figma’s docs list “Generate my Figma selection using components from src/components/ui” as an example prompt.
• Output is huge or cut off. The frame is too big. Select a smaller frame, or one section at a time.

Watch out for

• Figma’s server can also write to the canvas (create or change Figma content). Writing outside your drafts needs a Full seat. If you only want code, say “don’t change the Figma file” in your prompt.
• Generated code is a starting point. Review it like a colleague’s pull request, and check accessibility (labels, contrast) yourself.

Next steps

• Have Claude click through and test the page you just built.
• Put it online with Netlify.