How to connect Claude Code to Figma, and let it edit your designs
By Sabarish Sanjay, maker of Crossfade · Updated
There are two good ways to connect Claude Code to Figma. Figma's own MCP server needs no desktop app. A local plugin works in the file you have open, with no call limits. Here's how to set up each, and how to choose.
Which route to take
| Figma’s MCP server | Local plugin (Crossfade) | |
|---|---|---|
| Point at a layer | Paste a link | Select it in Figma |
| Reads | Limited by plan and seat | Not counted |
| Needs the desktop app | No | Yes, with the plugin open |
| Code Connect | Yes | No |
| Fonts on your computer | Not available | Available |
Route 1: Figma’s MCP server
Figma recommends installing its plugin for Claude Code, which also adds its skills:
claude plugin install figma@claude-plugins-official- Restart Claude Code if it's running.
- Type
/pluginand go to the Installed tab. - Select the figma server and press Enter to sign in.
- Click Allow access in the browser.
If your organisation blocks plugins, add the server yourself. This doesn't install Figma's skills:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcpThen start a new session, type /mcp, select figma and choose Authenticate.
To work on something, right-click the layer in Figma, choose Copy link to selection and paste the link into your prompt. The remote server uses links to find the file and layer.
Route 2: a local plugin
Crossfade, which I make, is built on Claude Code, and setup takes about five minutes. You need the Figma desktop app and Node 18 or later.
- Get Crossfade and unzip it.
- In Figma, go to Plugins, Development, Import plugin from manifest, and pick
manifest.json. - Run the plugin, choose Claude Code and copy the prompt.
- Paste the prompt into a Claude Code chat, not Terminal. Claude runs the commands and sets up the bridge by itself.
- Start a new session, because agents only load new tools when they start.
- Add your licence key in the plugin.
Now select a layer and tell Claude what you want. There's no link to copy, because it can see your selection. The setup guide walks through each step with the real plugin.
Your first prompts
- “Look at my selection and tell me what's inconsistent.”
- “Build a pricing card next to this frame, using the styles already in the file.”
- “Rename these layers so a developer could read them.”
For better results, read how to get good designs from an agent.
If it doesn't connect
- Tools aren't there: start a new session, then check
/mcp. - Write tools are missing with Figma's server: you may be on the desktop server, which can't write. Figma's docs confirm that it doesn't support writing to the canvas.
- Calls stop working: you've probably reached a rate limit.
Common questions
Can Claude Code edit Figma files?
Yes. Through Figma's remote MCP server it can run use_figma, and through a local plugin like Crossfade it runs Plugin API code in your open file. Both produce real, editable layers.
Do I need a paid Figma plan to use Claude Code with Figma?
With Figma's server, writing outside your drafts needs a Full seat, and reads are limited by plan. With a plugin you need edit access to the file and the Figma desktop app.
Why can't Claude Code see the Figma tools after I set it up?
Agents load tools when a session starts. Start a new session, then run /mcp to check the connection.