Figma MCP is a connector that lets an AI assistant read your Figma files directly: frames, layers, components, spacing, colour styles and text, instead of guessing from a screenshot you pasted. It is built on MCP, the Model Context Protocol, an open standard Anthropic released so assistants can talk to outside tools through one common interface. Figma ships an official server, and the community has built several more. Setup means adding a small block of configuration to your AI client and authorising access to your Figma account, which takes somewhere between ten minutes and an afternoon depending on how comfortable you are editing config files. If that sentence already sounds like a bad afternoon, there is a simpler route further down this page.
What is Figma MCP, actually?
MCP is a standard, not a product. It defines how an AI assistant asks an outside system for information and how that system answers. Anything that speaks it is called an MCP server, and a server is really just an adapter: on one side it talks to Figma, on the other it talks to Claude in a format Claude already understands.
So "Figma MCP" is shorthand for a server that sits between your assistant and your design files. Once it is running, Claude stops working from a flat image and starts working from structure. It can see that the button is a component instance, that the padding is 16 and not 15, and that the text style is called body/regular rather than "the smaller grey one".
There is an official server from Figma aimed at design-to-code workflows, and there are community implementations that read files through Figma's public API. They differ in how you authenticate and how much of the file they expose, but from Claude's side they all look the same: a list of available tools it can call when your request needs them. If you want the wider background first, we wrote a plain-English explainer on what MCP is and why it exists.
What does Figma MCP let Claude actually do?
The interesting part is not "Claude can see your file". It is the set of jobs that stop being manual.
- Turn a selected frame into front-end code that matches the file. Not a rough approximation from an image, but spacing, hierarchy and component names taken from the design itself. You still review it. You stop retyping values.
- Pull design tokens out of a file. Colour styles, type scale, spacing steps, corner radii, exported as variables in whatever format your codebase uses.
- Audit a file against its own system. Which layers use a hardcoded hex instead of a style, which frames use spacing values that exist nowhere else, which components were detached and quietly edited.
- Write handoff notes and specs. States, edge cases, empty states, what happens on error, described from the actual frames rather than from memory.
- Review UX copy in context. Every string in a flow, read in order, so you can spot the three different words used for the same action.
- Answer questions about a large file. Where is this component used, what changed in this branch, which screens still reference the old logo.
The pattern under all of these: Figma MCP removes the copy-paste step between design and everything downstream. That is genuinely useful, and it is also the entire benefit. It does not make design decisions.
How do you set up a Figma MCP server?
The specifics differ by server and by client, and both change often enough that a copied command from a blog post is a good way to waste twenty minutes. The shape of the process is stable, so learn the shape.
- Pick a server. Start with the official Figma one if your goal is design-to-code inside an editor. Look at community servers if you need read access to files through the API without the desktop app running. Both are listed in the public MCP server directories.
- Sort out access. Official tooling generally works off your logged-in Figma session, with a setting to enable inside the app. Community servers usually want a personal access token you generate in your Figma account settings. Treat that token like a password: it can read everything you can read.
- Add the server to your client's MCP configuration. Claude Desktop, Claude Code and most AI-aware editors all read a config file that lists the servers you want available, with the command to launch each one and any credentials it needs. You add one entry.
- Restart the client. Nearly every "it does not work" report is a client that was never restarted after the config changed.
- Verify the connection. Your client will show the connected servers and the tools each one offers. If the tool list is there, the wiring is done.
- Give it something to look at. Most workflows expect you to select a frame in Figma or paste a link to it, then ask your question. Claude only reads what you point it at.
Two things that trip people up on the first attempt. Servers that work through the Figma desktop app need the app open and the file loaded, so nothing will happen if you closed it. And most servers are read-focused: they are far better at telling you what is in a file than at changing one.
What are the honest limitations of Figma MCP?
Worth knowing before you spend the afternoon.
- You need a client that supports MCP. That means a desktop app, an editor or a terminal. A browser chat window on a free plan will not do it.
- Access is all or nothing in practice. A personal token typically reaches every file your account can reach. If your account sits in a shared organisation, think about that before you generate one.
- It breaks when things move. APIs change, servers get rewritten, a client update shifts the config format. Anything you build on top of this needs occasional maintenance.
- Big files eat context. A 400-layer screen produces a lot of structured data. Pointing at one frame works well. Pointing at an entire file often does not.
- Messy files produce messy output. If your layers are called Frame 217 and half the styles are detached, the generated code inherits that. The connector reads what is there, it does not tidy up.
- It gives access, not judgement. Claude can now see your design. Whether it evaluates that design like a senior designer is a completely separate question, and that is the one worth solving next.
What if MCP is more setup than you want?
Here is the distinction that saves a lot of time. MCP controls what Claude can reach. It says nothing about how well Claude works once it gets there. Those are two different problems, and most design teams have the second one, not the first.
If what you actually want is Claude giving you a proper design critique, a research plan, or a component API that a design systems architect would sign off on, you do not need a connector at all. You need Claude to work like that specialist. That is what a skill file does: a short Markdown document you upload once that gives Claude one role, one method and one output standard. Install takes about three minutes and it works on any plan, with or without MCP. Several of the design skills below are currently free, so you can test the idea before spending anything.
The designer, not the connector
Free
this skill
Flows, states, hierarchy and interaction logic, critiqued the way a product designer would run it: what the screen is for, what is missing, what the user does when it goes wrong. Paste in a screen or describe it, no connector needed.
View Denholm →The pairing that works best in practice: MCP for the reading, a skill for the thinking. Claude pulls the real values out of your file, then applies a method to them instead of improvising.
For the tokens and components half
$14.99
this skill
Token naming, component APIs, variant structure and the rules for when something earns a place in the system. Exactly the judgement layer that sits on top of the raw data a Figma connector hands you.
View Vashti →Before anything gets designed
Free
this skill
Research plans, non-leading interview scripts, and a method for turning transcripts into findings a team can act on. Also free right now, which makes it a cheap way to test whether skills change your output at all.
View Melisande →There are 32 free skills in total in the free collection, and the wider design set lives in creative, content and design skills. If you want the install walked through step by step, see how to install a Claude skill.
In summary:
Figma MCP connects Claude to your real design files so it works from structure instead of screenshots. It is worth the setup if you generate code or extract tokens regularly. It changes nothing about the quality of Claude's design judgement, which is what a skill file fixes: start with Denholm - UX/UI Product Designer, free right now, and add Vashti - Design Systems Architect at $14.99 when tokens and components become the problem.
Figma MCP: common questions
Is Figma MCP free?
The protocol is an open standard and the servers themselves are generally free to install. What you need is a Figma account with access to the files, and an AI client that supports MCP. Some AI clients require a paid plan for the features that make this worthwhile, so the cost sits on that side rather than on the connector.
Can Claude edit my Figma file through MCP?
Assume no unless the specific server you chose says otherwise. Most of these connectors are built for reading: extracting structure, values and content. Write access is rarer, more fragile, and something you should test on a duplicate file rather than on live work.
Does Figma MCP work with Claude Code?
Yes, in the sense that Claude Code supports MCP servers generally, which is exactly why it is a popular pairing for design-to-code work. The frame gets read on one side and the component gets written on the other, in the same session. The same applies to Claude Desktop and to most AI-aware editors.
Do I still need a design skill if I have Figma MCP set up?
They answer different questions. MCP decides what Claude can see. A skill decides how Claude works with what it sees, which is why the two stack rather than compete. We compared the two approaches directly in Claude Skills vs MCP.