How Do You Use Claude Code With Figma?

How Do You Use Claude Code With Figma?

You connect Claude Code to Figma's MCP server, and from then on you can point it at a frame and ask it to build that frame instead of describing the design in prose and hoping.

The connection is officially supported. Figma publishes a help article specifically for Claude Code, and Claude Code appears by name in Figma's list of supported clients alongside VS Code and Cursor. This is not a community workaround.

What trips people up is that there are now two Figma MCP servers, two ways to install either of them, and the choice between them changes what you can actually do. The documentation lays out the options without quite telling you how to choose, so that is where this starts.

How do you use Claude Code with Figma? The direct answer

Install Figma's official Claude Code plugin, authenticate, then paste a link to a frame and ask for what you want.

The command Figma documents is claude plugin install figma@claude-plugins-official. Restart Claude Code afterwards, then run /plugin to authenticate.

That is the route Figma calls recommended, and it is recommended for a reason worth knowing: the plugin also installs Figma's own skills, and the manual setup does not. If you wire the server up by hand you get the tools without the guidance Figma wrote for using them.

To give it something to work on, right-click a frame or layer in Figma and choose Copy link to selection. Claude Code pulls the node ID the server needs out of that link.

Design-to-code is only worth automating if the pages it produces actually rank. Get a free SEO audit and find out what your front end is costing you in search.

The naming has moved, and the old name is what everyone searches

If you have read about this before, you probably met it as the Dev Mode MCP server. That is what Figma called it when it launched.

Figma's current help pages do not use that name. Both of them call it the Figma MCP server, with no "formerly known as" note anywhere to connect the two. Nothing has been deprecated and nothing has been replaced. The product simply has a shorter name now and the documentation was updated without an announcement attached.

The old name has not vanished entirely, though, and this is where it gets genuinely confusing. The desktop version of the server is still switched on from inside Dev Mode. Figma's instruction is to find the MCP server section in the right sidebar and click Enable desktop MCP server. So the feature is no longer named after Dev Mode while still living inside it.

Two servers, and the trade-off is real

Figma's own wording is that it "offers two versions of the MCP server: Remote server (recommended)... Desktop server." They are not two routes to the same thing.

The remote server

The endpoint is https://mcp.figma.com/mcp. Figma's documentation is clear about the appeal: "You don't need the Figma desktop app. You sign in with your Figma account the first time you connect."

The desktop server

The endpoint is http://127.0.0.1:3845/mcp, and the server runs on your own machine inside the Figma desktop app.

It has one documented advantage that the remote server does not: you can select a frame or layer in the desktop app and then prompt against that current selection, rather than copying a link every time. If you are iterating quickly across a lot of frames, that difference adds up.

It also has one documented limitation, stated plainly by Figma: "It doesn't support writing to the canvas or sending UI to Figma." So the desktop server is read-only with respect to your Figma files.

How to choose

Start with the remote server. It is what Figma recommends, it needs no local app, and it does not foreclose writing back to Figma.

Switch to the desktop server if you are doing high-volume work against a live selection and you only need to read designs. Be aware you are trading away the write direction to get there.

Setting it up, step by step

The plugin route is first because it is the one Figma recommends and the one that brings the skills with it.

1. Install Claude Code if you have not already. Figma's instructions assume it is present.
2. Run claude plugin install figma@claude-plugins-official.
3. Restart Claude Code.
4. Run /plugin and complete authentication.
5. In Figma, right-click a frame and choose Copy link to selection.
6. Paste that link into Claude Code with your request.

Figma includes a specific warning on step two: "If the command fails, your organization may have blocked plugin installation." If that is your situation, the manual route is the fallback rather than a dead end.

Manual setup for the remote server

Add it with claude mcp add --transport http figma https://mcp.figma.com/mcp.

Figma notes that this adds the server at the current project's scope. To make it available everywhere, use claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp instead.

Then run /mcp, select figma, and choose Authenticate. You are looking for the message Authentication successful. Connected to figma.

Remember that this route, in Figma's own words, "doesn't install Figma's skills."

Manual setup for the desktop server

Enable it in the Figma desktop app first, from the MCP server section of the Dev Mode sidebar.

Then add it with claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.

Useful commands for checking your work afterwards: claude mcp list to see what is registered, claude mcp get figma-desktop for the detail of one server, and claude mcp remove figma-desktop to take it out again.

A pretty component tree is no use if nobody finds the page. Request your free audit and see where the gap is.

What it costs and who can use it

Figma's answer on access is short: "All plans. Requires Claude Code." The get-started page says the same thing from the other direction, "All plans. Requires an MCP client listed in the Figma MCP catalog."

Two capabilities sit behind higher tiers, and these are the ones to check before you promise anything to a team.

The desktop server requires the Figma desktop app plus "a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan." A Starter account cannot run it.

Writing to the canvas is documented as available on Professional, Education, Organization and Enterprise plans, and Figma adds that "writing to files outside your drafts requires a Full seat." So the write direction is gated twice, by plan and by seat.

On price, Figma says the feature "is free during the beta period and will eventually become a usage-based paid feature." No rate card has been published, so there is no number here worth memorising. Check the current state before you build a workflow that assumes it is free.

Shipping faster only helps if the pages earn traffic. Get your free audit and see what search is missing.

What the documentation does not tell you

This matters more than usual with a beta, so it is worth being explicit about the gaps rather than filling them in with guesswork.

The remote server's tool list is not published on either setup page. The only enumerated list is for Figma for Government's desktop server, which names get_screenshot, get_design_context, get_metadata, get_figjam, get_variable_defs, get_code_connect_map, add_code_connect_map and create_design_system_rules. The pages give names only, with no description of what any of them returns. Other tool names appear in passing, including use_figma for writing to the canvas and generate_figma_design for sending UI back. Run /mcp after connecting and read the actual tool list your server exposes rather than working from any list you read online, including this one.

There are no documented rate limits. Neither page states one. That does not mean none exists.

There is no guidance on context size, which is the practical constraint you are most likely to hit. A large frame produces a lot of structure, and nothing in the documentation tells you where the useful ceiling is.

Neither page shows a last-updated date. For a beta that has already been renamed once, that is a real inconvenience.

A contradiction in the Government documentation

If you are on Figma for Government, the two pages disagree and you should not rely on either until you have checked directly.

The setup page lists https://mcp.figma-gov.com/mcp as the remote endpoint for Government accounts. The get-started page says Figma for Government "supports the desktop server only" and that the remote MCP server is not available there.

Those cannot both be true, and nothing on either page resolves it. Figma also notes that MCP services for Figma for Government "aren't included in Figma's FedRAMP audit", and that Code to Canvas, Code Connect UI and Figma Motion tools are unavailable on that plan. If this applies to you, ask Figma rather than picking the answer you prefer.

When this is worth setting up

It pays off fastest when the design system is already real. If your Figma file uses variables and components consistently, the server can hand Claude Code the actual token names, and the output lands close to your codebase conventions. If the file is a pile of hand-placed rectangles, you will get code that faithfully reproduces a pile of hand-placed rectangles.

It is also strong for the unglamorous middle of a build: a settings page, a table view, a form with fourteen fields. Work that is tedious rather than difficult, where the design is settled and the job is transcription.

It is weakest where the design implies behaviour the design does not show. Animation, error states, loading sequences and anything conditional still need describing, because they are not in the frame to read.

Your build pipeline is only half the story. Book a free audit and fix the half that decides whether anyone arrives.

How it compares to the alternatives

Pasting a screenshot into Claude. Zero setup and genuinely decent for a one-off. It cannot see your variable names, your component structure or your spacing tokens, so everything is inferred from pixels and the output drifts from your system.

Figma's own code export. Produces markup from the frame directly, with no model in the loop. Predictable, and limited to what the frame contains. It will not restructure anything to fit the way your project is built.

Code Connect without MCP. Maps components to your real code, which is the single highest-value thing you can do here. It works alongside the MCP server rather than instead of it, and the server exposes get_code_connect_map to read that mapping.

Claude Code with the MCP server. The only one of these that sees the structured design and your codebase at the same time. That is the whole argument for it, and it is a good argument when the design system is in decent shape.

Final Thoughts

The setup is two commands and an authentication step, and the recommended path is the plugin because it brings Figma's skills along with the tools.

Pick the remote server unless you specifically need to prompt against a live selection, and remember that the desktop server cannot write back to Figma. Check your plan and seat before you count on canvas writing, because that is gated separately.

Treat the published details as provisional. It is a beta that has already been renamed once, has no documented rate limits, and has two pages that contradict each other about Government access. Run /mcp and read what your own connection actually exposes.

If you are new to wiring servers into Claude Code at all, our guide on how to add an MCP server to Claude Code covers the mechanics in general, and Figma is a good first one to try because the failure modes are visible immediately.