Set it up
-
Turn on Figma in your AI
Connect the Figma MCP from figma.com/mcp-catalog in your AI tool, then paste a Figma link and ask it to read the design.
-
Add it to your app once
Copy the short config below into your app. It just tells your AI where to find Figma.
-
Just ask
Tell it what you want in plain words — no special commands.
For example, say
“Read the homepage frame from this Figma file: <paste-figma-url>. Tell me the primary color, body font, and headline font so I can match them.”
Need the exact config? Show it +
Add to your client
claude mcp add --transport http figma https://mcp.figma.com/mcp
# Then run `/mcp` and authenticate via the browser when prompted.
# For user-wide install: add `--scope user` before `--transport`.Paste into your client's MCP configuration file.
Ready-to-run prompts
If you ask, Figma does it. Copy one, paste it into Claude, Codex or ChatGPT, done. No setup.
Figma Turn a frame into code
If you ask
“Read the pricing section frame from this Figma file and build it as a React + Tailwind component”
Then
Turn a selected Figma frame into production code that matches the design exactly.
Figma Extract a brand kit
If you ask
“From this Figma file, list the brand colors as hex, the heading and body fonts, and export the logo”
Then
Pull colors, fonts, and logos out of a Figma file to reuse elsewhere.
Figma Check design-code drift
If you ask
“Read the design tokens from this Figma file and tell me which ones my CSS variables no longer match”
Then
Compare what's in code against the current design tokens and flag drift.
In the wild
“I started using the Figma MCP with Claude to import my live app into Figma Make, get it to edit things where it actually understands layout and margins and what looks good, and then pull it back into the app with MCP”
“I use Claude Code with Figma MCP and Chrome Dev tools MCP. So that it can take screenshots and compare to expected design as part of the acceptance criteria”
“I've recently started using Codex and installed Figma MCP. The outputs were really good. I achieved a 90% success rate”
“I use Figma MCP and Cursor and it can implement the design near perfectly on first try”
“we have been using the Figma MCP server to generate code from Figma designs. Spent about a day writing rules to keep the AI on guardrails but it's been very smooth sailing”
Good to know
- · Auth is OAuth via the Figma site, not a personal access token — the workflow's `FIGMA_TOKEN` env var pattern does not apply to the official server
- · The remote endpoint requires the client to be on Figma's MCP catalog — not every MCP client can connect
- · There is no `npx -y @figma/mcp` package; do not paste that command from older guides — it does not exist
- · Dev Mode features (full frame inspection, code suggestions) require a Dev Mode seat on the Figma file
When to use
- ✓ Your design source of truth already lives in Figma and you want code that matches it
- ✓ You need Claude to read real colors, fonts, spacing, and tokens instead of guessing
- ✓ You're doing design-to-code and want components grounded in the actual frame
- ✓ You want to pull a brand kit out of Figma into another tool or a website build
When not to use
- × You don't use Figma — there's nothing for the server to read
- × You want Claude to create or edit designs; this is read-only access to existing files
- × Your client can't connect to Figma's hosted MCP catalog endpoint
- × You need files to never leave your machine and don't have the Dev Mode desktop option set up
About
If you already use Figma for design, this lets Claude read your Figma files directly. Ask things like 'make my landing page look like the homepage frame in this Figma file' and Claude can actually see what's there — colors, fonts, spacing — instead of guessing. It connects through Figma's hosted server, so there's nothing to install on your machine.
Figma's official MCP server is hosted at `https://mcp.figma.com/mcp` and connects via HTTP transport with OAuth authentication — no npm package, no local install. Once connected, Claude can read frames, components, variables, and design tokens from any Figma file you have access to.
Use it for design-to-code generation, pulling brand assets (colors, fonts, logos) into other tools, and grounding AI code generation in real design specs instead of guesses.
There is also a desktop server option (built into the Figma desktop app's Dev Mode) for organizations that need files to stay local.
Workflows That Use Figma MCP
Works With
Also Consider
FAQ
What does Figma MCP do? +
If you already use Figma for design, this lets Claude read your Figma files directly. Ask things like 'make my landing page look like the homepage frame in this Figma file' and Claude can actually see what's there — colors, fonts, spacing — instead of guessing. It connects through Figma's hosted server, so there's nothing to install on your machine.
Do I need to know how to code? +
No. Turn it on in your AI's settings and ask in plain English — no terminal, no coding.
When should I use Figma MCP? +
Reach for it when you need to: Your design source of truth already lives in Figma and you want code that matches it; You need Claude to read real colors, fonts, spacing, and tokens instead of guessing; You're doing design-to-code and want components grounded in the actual frame; You want to pull a brand kit out of Figma into another tool or a website build.
When should I avoid Figma MCP? +
Skip it when: You don't use Figma — there's nothing for the server to read; You want Claude to create or edit designs; this is read-only access to existing files; Your client can't connect to Figma's hosted MCP catalog endpoint; You need files to never leave your machine and don't have the Dev Mode desktop option set up.
Is Figma MCP free? +
Figma MCP has a free tier.
How do I install Figma MCP? +
In Claude Code, run: claude mcp add --transport http figma https://mcp.figma.com/mcp # Then run `/mcp` and authenticate via the browser when prompted. # For user-wide install: add `--scope user` before `--transport`.. Copy-paste configs for Claude Desktop, Cursor, and Windsurf are at the top of this page.
