Last Verified: September 2026 — commands checked against figma/mcp-server-guide and the official Claude Code MCP docs
Paste a screenshot of a Figma frame into Claude Code and you get something that looks close: hard-coded hex colors, guessed spacing, a brand-new button component when your repo already has three. The model is reading pixels, so it can’t see your variables, your components, or how the layout is supposed to stretch.
Figma MCP is Figma’s official server. Paste a link to a frame instead, and Claude Code pulls the structured design: layout, variables, components, and a screenshot for reference. It’s hosted, signs in with OAuth, and takes about two minutes.
Pair it with our Chrome DevTools MCP guide and Claude can build the UI from Figma, then open it in a real browser to check it against the design.
Quick Start
One command, then sign in:
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcpStart Claude Code, run /mcp, pick figma, and approve access in the browser. Total time: about 2 minutes. No token to create or paste.
⚡ Copy This Prompt: Let Claude Code Install and Verify It For You
Skip the manual steps below and hand the whole job to the agent instead:
You have shell access and the `claude mcp` CLI on this machine. Connect the Figma MCP server to Claude Code and report back. Do not tell me it's done unless step 4 actually confirms it:
1. Run `claude mcp list`. If a figma entry already exists, show me its URL and stop instead of adding a second one.
2. Add Figma's hosted server for all projects:
`claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp`
3. Tell me to run `/mcp` in Claude Code, pick figma, and finish the Figma sign-in in my browser. Wait until I say it's done, then run `claude mcp list` and confirm figma shows Connected.
4. Ask me for a link to one small Figma frame. Call `get_screenshot` and `get_design_context` on it and summarize the layout, colors, and components you found. Don't write any code yet.
Never ask me to paste a Figma token into this chat. If any step fails, give me the exact error and the command that produced it. Do not skip ahead.The last step reads a real frame without writing code, so you can check what Claude sees before it touches your repo.
What You’ll Need
| Requirement | Why You Need It | Time |
|---|---|---|
| Claude Code installed | The client that calls the Figma tools | 0 min |
| A Figma account | The server signs in as you and only sees files you can open | 0 min |
| A Dev or Full seat on a paid plan (recommended) | Starter plans and View / Collab seats get up to 6 tool calls per month | — |
Step-by-Step Setup
Prefer to do it by hand instead of delegating to the agent? Here’s the manual version.
Step 1 — Add the hosted server
~30 sec
--scope user makes Figma available in every project:
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcpFigma’s own recommendation is the plugin from the official Claude marketplace. It sets up the same server and adds Figma’s Agent Skills for implementing designs and Code Connect:
claude plugin install figma@claude-plugins-officialUse one or the other, not both.
Step 2 — Sign in with OAuth
~1 min
Inside Claude Code, run /mcp, select figma, and choose Authenticate. Your browser opens Figma’s consent screen; approve it and come back. Claude Code stores the token, so you do this once.
Step 3 — Add project rules (optional, big quality win)
~2 min
Figma recommends giving the agent a fixed flow. Drop this into your project’s CLAUDE.md and adjust the paths:
## Figma MCP rules
1. Run get_design_context first for the exact node in the link.
2. If the response is too large, run get_metadata, then re-fetch only the nodes you need.
3. Run get_screenshot for a visual reference before writing code.
4. Treat the React + Tailwind output as a description of the design, not final code:
reuse our components in src/components/ui and our design tokens.
5. Compare the result against the screenshot before saying it's done.What Each Piece Does
| Tool | What Claude Can Do With It |
|---|---|
get_design_context | Get a structured React + Tailwind representation of the linked frame, the starting point for code in any framework |
get_variable_defs | List the variables and styles used (color, spacing, typography) so Claude uses your tokens instead of raw values |
get_metadata | Get a lightweight map of a large selection, then fetch only the parts it needs |
get_screenshot | Grab an image of the frame as a visual reference to compare against |
| Write to canvas (beta) | Create and edit frames, components, and variables in Figma from Claude Code. Remote server only, free during the beta |
Verify It’s Actually Working
claude mcp list! figma Needs authentication → run
/mcp and sign in (Step 2)✘ figma Failed to connect → check the URL ends in
/mcp and the transport is http
In Figma, right-click a frame, choose Copy link to selection, and paste it in:
Implement this frame as a React component in src/components/marketing/PricingCard.tsx. Reuse our existing Button and use our design tokens: <paste Figma link>If Claude calls get_design_context and get_screenshot before writing code, it’s working. Claude can’t open the link itself; it reads the node ID from it and asks the server.
Common Mistakes to Avoid
- Linking the whole page. A link to a full page or a huge frame makes responses slow or truncated. Link one frame or component at a time.
- Burning a Starter plan’s calls on setup. Starter plans and View / Collab seats get up to 6 tool calls a month. Save them for real work, or use a Dev or Full seat.
- Shipping the Tailwind output as-is.
get_design_contextreturns React + Tailwind as a description of the design. Tell Claude your framework and components, or you get a parallel UI kit. - Messy layer names.
Group 5becomes a meaningless div. Semantic names, components, variables, and auto layout in Figma all turn into better code. - Installing the plugin and adding the server. Claude ends up with two copies of every Figma tool. Pick one.
Q&A
Is it free?
The server is free to connect. Tool calls are rate-limited by your Figma plan and seat: up to 6 per month on Starter or View / Collab seats, per-minute limits on Dev or Full seats on paid plans. Writing to the canvas is free during the beta and will become a usage-based paid feature.
Do I need the Figma desktop app?
No. This guide uses Figma’s hosted server at mcp.figma.com, which signs in with OAuth and works without the desktop app open.
Does it work with Vue, SwiftUI, or plain CSS?
Yes. The React + Tailwind output is a starting point; say “Generate SwiftUI code from this frame” or name your stack and Claude translates it.
What’s Code Connect?
A Figma feature that maps Figma components to the real components in your repo. With it, Claude reuses <Button> instead of inventing one. It’s the biggest single quality upgrade.
How do I remove it?
claude mcp remove figma --scope user, or claude plugin uninstall figma if you used the plugin.
Official Resources
- figma/mcp-server-guide on GitHub — setup per client, rate limits, best practices
- Figma MCP server docs — full tool list and prompts
- Code Connect — map Figma components to your code
- Claude Code MCP docs —
claude mcp addand OAuth with/mcp
If this guide got Claude Code building from your real design system instead of a screenshot, follow us on X for more setup guides and prompt tips.
Leave a Reply