Figma × Claude Code Integration Guide — Bridging Design and Code with MCP

I Added the Desktop Server by an Old Recipe and Lost Half an Hour

The plan sounded simple: hand Claude Code a design link, get code back. So one evening I registered the desktop Figma MCP server the way an older write-up described it — --transport sse, a /sse URL. The name showed up in /mcp, but not a single tool loaded. I retyped the config three times before I read the current official steps and saw that the recipe, not my typing, was the problem.

I've rewritten this guide for anyone stuck at that same spot, using the official instructions as they stand now. There are two ways to connect, and they don't do the same things. Decide what you want each one to handle before you pick one — that single habit removes most of the trouble.

What I'd say first: start with the remote server. Figma recommends it too, and pushing UI back onto the canvas isn't available through the desktop server.

The Short Answer First

Here are the usual snags in one table; the sections below explain each.

Prerequisites

Check three things before you start.

• Claude Code is installed (if not, the setup guide is a good place to begin)
• You have a Figma account and access to the file you want to use
• For the desktop server: an up-to-date Figma desktop app and a Dev or Full seat

The MCP server can only read files you can already open. The link must point to a Figma Design, FigJam, or Figma Make file, and the account you sign in with has to belong to the plan that owns that file.

Call limits depend on your seat

This is where I'd guessed wrong: I assumed everyone on a free plan got the same allowance. Figma's "Rate limits & access" page (checked in October 2026) says:

The limits apply to tools that read data from Figma. Tools that write to files are exempt, and actions that spend Figma AI credits don't count toward MCP calls. These numbers can change, so I'd confirm them on the official page before relying on them.

Setup

Option 1: Remote Server (Recommended)

This connects to the server Figma hosts in the cloud. No desktop app is needed.

Installing through the plugin also brings in Figma's skills:

# Install via plugin (MCP config + skills)
claude plugin install figma@claude-plugins-official

Restart Claude Code, open the Installed tab in /plugin, select figma, and sign in. Click Allow access in the browser and you're done.

If plugins are blocked where you work, add it manually. You won't get the skills this way.

# This project only
claude mcp add --transport http figma https://mcp.figma.com/mcp
 
# All projects
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

In a new session, open /mcp, select figma, and choose Authenticate. Click Allow access in the browser; "Authentication successful" means you're connected.

Option 2: Desktop Server

This is the local server run by your Figma desktop app. Figma itself points people to the remote server instead.

Step 1: Enable it in Figma.

1. Open a design file in the Figma desktop app (or create one)
2. With nothing selected, switch to Dev Mode (toolbar toggle, or Shift + D)
3. In the MCP server section of the right sidebar, click Enable desktop MCP server

A confirmation message appears at the bottom of the screen. The server listens at http://127.0.0.1:3845/mcp.

Step 2: Register it with Claude Code.

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Restart Claude Code, then open /mcp. If figma-desktop is listed, you're set.

The desktop server can't write to the canvas or send UI to Figma. That's worth knowing at the moment you choose between the two.

Design to Code

The basic flow

Select a frame or layer in Figma, copy the link to your selection, and pass it to Claude Code.

1. Select the frame or component in Figma
2. Right-click and choose Copy link to selection (or Ctrl/Cmd + L)
3. Give Claude Code the link and your constraints together

Implement this Figma design as a React component.
Use Tailwind CSS and make it responsive.

https://www.figma.com/design/xxxxx/MyProject?node-id=123-456

Claude Code reads layer structure, colors, fonts, spacing, and Auto Layout settings through MCP. When I check the output, I start with font weights and spacing values.

Design systems and Code Connect

Naming the design system's component gives you output that fits your existing code more often.

Check every variant of the Button in this design system
(Primary / Secondary / Ghost) and create a React component
that matches our existing codebase.

With Code Connect mapping design components to code components, the output reuses what you already have instead of inventing new parts. Setting up that mapping is a separate job; I'd follow the official docs when you reach it.

Work one section at a time

When I asked for a whole page at once, I noticed the dropped details too late. These days I go header first, then hero, one piece at a time.

Implement the header of this Figma page (node-id=10-20) first.
Dummy links are fine for the navigation.

https://www.figma.com/design/xxxxx/MyProject?node-id=10-20

Code to Canvas

This brings a running UI into Figma as editable layers rather than a screenshot. It works with the remote server.

Bring the current UI into Figma.
The file is https://www.figma.com/design/xxxxx/MyProject

Designers can edit the imported shapes, text, and images right in Figma. A designer tidies, a developer fixes the code, and the difference is brought back in — that loop is what this integration feels like at its best.

One caution: the imported result won't always line up one-to-one with the layer names and structure of your original file. I check by eye, each round, that names haven't drifted.

Building Diagrams in FigJam

Give it requirements text or source material and it can generate a diagram in FigJam.

From the requirements below, create a system diagram in FigJam.

[requirements text]

It suits user-flow sketches and organizing a brainstorm. I treat the result as a first draft and reread every label and arrow direction myself.

About Community MCP Servers

Community-built Figma MCP servers exist, but I don't recommend them here, for two reasons: they tend to lag behind Figma's changes, and I can't fully verify what access you'd be handing them.

Troubleshooting

Can't connect over MCP

# Registered servers and their status
claude mcp list
claude mcp get figma
 
# Start over
claude mcp remove figma
claude mcp add --transport http figma https://mcp.figma.com/mcp

If figma is missing from another project, re-add it with --scope user. And restart Claude Code after adding a server.

The desktop server doesn't respond

1. The Figma desktop app is up to date and running
2. Enable desktop MCP server is switched on in Dev Mode
3. The registered URL is http://127.0.0.1:3845/mcp (not the old /sse)

The local server only runs while it's enabled. If it goes quiet after you close the file or leave Dev Mode, that's expected.

Code generation accuracy is low

• Check whether layers are still named Frame 123 and whether Auto Layout is in use
• Ask per frame or component rather than per page
• State the target framework — React, Vue, Svelte — explicitly

Looking Back

Since the night I registered it by an old recipe and rewrote the config three times with an empty tool list, I decide what I want to do before I choose the connection method. Read-only work can go either way; writing back goes through the remote server. I'd rather keep that line, whatever the steps turn into next.

If you want to go further into automating the design side, this article on Figma MCP and design automation may help.

Next Action

Register the remote server once with --scope user and finish authenticating in /mcp. Then let Claude Code read just one frame from a design you already have — that's the place I'd start.