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.
How to get good results
Checked 2026-06-14 — live · by Ilya GindinTested prompts and honest limits — deeper than the README.
The Figma connector lets your AI read your design files, so it matches your real colors, type, and components instead of inventing a look. Point it at a specific file or frame and ask it to extract, rebuild, or compare.
Pull your real design tokens
Prompt that works
“Read this Figma file and list every color style and text style with its exact values.”
Why: Getting the real tokens means any UI you build matches your brand instead of guessing hex codes and font sizes.
Rebuild a component accurately
Prompt that works
“Look at the Button component in this frame and rebuild it in React with the same padding, radius, and colors.”
Why: Reading the actual component keeps spacing and styling pixel-accurate — far closer than describing it from a screenshot.
Audit a screen against the system
Prompt that works
“Inspect this frame and flag anything off our type scale or color palette.”
Why: It compares a frame against your styles, so inconsistencies surface before they ship.
What it can’t do
- ×Cloud connector: sign in and give it access to the file.
- ×It's read and inspect oriented — great for pulling specs, not for redrawing your file for you.
- ×Large files are token-heavy; point it at a specific frame or component.
- ×What it can extract depends on how the file is structured — named styles and components help a lot.
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”
What it can access
Official remote connector with read access to the Figma files you grant — it inspects designs and extracts tokens; it does not edit your files.
Source: www.figma.com · checked 2026-07-13
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
Turn a single idea or note into a 5–10 slide branded carousel in under 30 minutes — without leaving the chat with Claude.
Pull your real colors and type from Figma, feed them to Stitch as hard constraints, refine the result in Pencil — AI screens that match your brand instead of inventing one.
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.
How do I pull your real design tokens with Figma? +
Try this prompt: "Read this Figma file and list every color style and text style with its exact values." — Getting the real tokens means any UI you build matches your brand instead of guessing hex codes and font sizes.
How do I rebuild a component accurately with Figma? +
Try this prompt: "Look at the Button component in this frame and rebuild it in React with the same padding, radius, and colors." — Reading the actual component keeps spacing and styling pixel-accurate — far closer than describing it from a screenshot.
How do I audit a screen against the system with Figma? +
Try this prompt: "Inspect this frame and flag anything off our type scale or color palette." — It compares a frame against your styles, so inconsistencies surface before they ship.
