PlugWiki
Figma MCP Server logo

Add Figma to Claude Code

Install Figma's plugin in Claude Code, sign in with your Figma account, and Claude Code can read your designs and write matching code.

Install Figma's plugin with the command above, restart Claude Code and sign in with your Figma account from the /plugin menu. Then paste a link to a Figma frame into your prompt, and Claude Code reads that design and writes code to match. Large frames can go over Claude Code's limit on tool replies, so link a smaller part of the design. If you only want Claude Code to read, use the desktop server option instead.

Good for

  • Front-end developers who turn Figma frames into components from the terminal
  • Design engineers who keep code in step with Figma variables and components
  • Teams that want Claude Code to create or edit content in their Figma files
  • Anyone who only needs to read designs, through the read-only desktop server

Add Figma to Claude Code

Claude Code

  1. 1

    Copy this prompt.

    Add the Figma MCP server to Claude Code. Run this command:

claude plugin install figma@claude-plugins-official

Then check that it loaded and tell me if I need to sign in or restart.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Figma account.

Read-only mode: Use the desktop server option: Figma says it cannot write to the canvas. On the hosted server, Claude Code asks before each Figma tool call unless you add an allow rule, so keep the write tool off your allow list.

After installing the plugin, restart Claude Code, open /plugin, go to the Installed tab, select figma and press Enter to start sign-in, then click Allow access in the browser. The plugin adds Figma's skills, which Figma says give more reliable results when writing to the canvas. For the hosted-only option, start a new session, open /mcp, select figma and choose Authenticate; add --scope user to use it in every project, not just the current one. If your organization blocks plugins, use the hosted-only option. The desktop server works only while the Figma desktop app is open with its MCP server turned on in Dev Mode.

From the vendor's docs. Source.

Common errors and fixes

  • 'MCP tool get_design_context response exceeds maximum allowed tokens (25000)'

    Cause: Claude Code caps MCP tool output at 25,000 tokens, and large frames return far more.

    Fix: Link a smaller frame or layer, or run export MAX_MCP_OUTPUT_TOKENS=50000 before starting Claude Code.

    claude-code Source

  • Asks you to sign in to Figma again in every new session

    Cause: In reports closed without a fix, the saved sign-in was not loaded on restart, so /mcp showed Needs authentication.

    Fix: Run /mcp, select figma and choose Authenticate, and update Claude Code. The reports were closed with no confirmed fix.

    claude-code Source

  • 'Got new credentials, but reconnecting to figma failed. Restart Claude Code to retry.'

    Cause: In one report, closed without a fix, reconnecting after sign-in hung.

    Fix: Restart Claude Code; the sign-in is kept.

    claude-code Source

  • Sign-in times out at once with no browser window ('SDK auth failed: The operation timed out')

    Cause: Figma's sign-in service did not answer on the user's network.

    Fix: Try another network, such as a phone hotspot, with VPN or proxy off.

    claude-code Source

  • Plugin sign-in on Windows ends with 'No OAuth flow is in progress'

    Cause: One Windows report: the login step was not kept between turns.

    Fix: No fix was given before the report closed for inactivity.

    claude-code Source

  • Large replies fail with 'Failed to parse SSE message' in the desktop app's Code tab

    Cause: One open report: replies over about 20 KB got cut off there.

    Fix: Use the regular chat for those frames, or ask for a screenshot instead; the report is open.

    claude-code Source

  • Figma's tools load twice in the desktop app's Code tab

    Cause: The Code tab does not merge a claude.ai Figma connector with a server you added.

    Fix: Remove one of the two; in the terminal, Claude Code hides the connector for you.

    claude-code Source

Permissions

Medium risk

Through the hosted server Claude Code can create and change content in any Figma file you can edit. Keep Claude Code asking before Figma's write tool, or use the read-only desktop server if you only need to read designs.

What it can do

Watch out for

  • It can change your Figma files

    Through the hosted server Claude Code can create and edit content in files you can edit. Claude Code asks before each call unless an allow rule covers the write tool, so leave it out. code.claude.com

  • Keep Figma tokens out of the chat

    One user saw Claude Code print a community Figma server's access token into the conversation while debugging. The official server uses a sign-in instead of a token. github.com

  • Plugin tools need their own permission rules

    Tools from the Figma plugin have longer names than a server you add yourself, so a rule written for a server called figma does not cover them. code.claude.com

  • You can remove the sign-in from /mcp

    Use Clear authentication in the /mcp menu to take back Claude Code's access to your Figma account. code.claude.com

Security advisories

No published security advisories as of Nov 1, 2026.

Technical details
Turning on read-onlyAdd the desktop server instead (the read-only option in the install box); Figma says it cannot write to the canvas. On the hosted server, keep Claude Code asking before the write tool by leaving it out of your allow rules (plugin tools are named mcp__plugin_figma_figma__<tool>).
Talks tomcp.figma.com (HTTPS). 127.0.0.1:3845 (desktop server, local only)
Sign-in and keysClaude Code stores the Figma sign-in and refreshes it on its own; Clear authentication in /mcp removes it.
Scopes

  • Figma files your account can open; edits only in files you can edit

Works in

Tap an app to see how to set it up and any known problems.

Questions

Why does Figma not show up in Claude Code?

After installing the plugin you must restart Claude Code before it loads. A server added with claude mcp add only loads in the project where you added it unless you used the user scope. Your organization may also block plugins; then use the hosted-only option.

How do I sign in to Figma from Claude Code?

With the plugin, open /plugin, go to the Installed tab, select figma and press Enter, then click Allow access in the browser. With the hosted-only option, open /mcp, select figma and choose Authenticate.

Should I use the Figma plugin or the hosted-only option?

Use the plugin. Figma recommends it because it adds Figma's skills, which help most when Claude Code writes to the canvas; the hosted-only option is the plain connection.

Claude Code says the Figma response exceeds maximum allowed tokens. What do I do?

Claude Code caps a tool's reply at 25,000 tokens, and a big frame can be far larger. Link a smaller frame or layer, or start Claude Code with MAX_MCP_OUTPUT_TOKENS=50000.

Why does Claude Code ask me to sign in to Figma every session?

Several users reported the saved Figma login not loading after a restart, and those reports were closed without a confirmed fix. Sign in again from /mcp and keep Claude Code updated.

Why does Figma sign-in time out with no browser window?

In one report Figma's sign-in service did not answer on the user's network. Figma staff suggested trying another network, such as a phone hotspot, with VPN or proxy off.

Can I use the Figma desktop server with Claude Code?

Yes. Turn on the desktop server in the Figma app's Dev Mode, then use the desktop server option in the install box and restart Claude Code. It is read only and needs a Dev or Full seat on a paid plan.

How do I stop Claude Code asking before every Figma call?

Add an allow rule for Figma's read tools. Plugin tools are named mcp__plugin_figma_figma__<tool>, so rules for a server called figma do not cover them; leave the write tool out if you want to approve edits.

Why does Figma show up twice in Claude Code?

In the terminal, a server you added wins over a claude.ai Figma connector at the same address, and /mcp marks the connector hidden. The Claude desktop app's Code tab does not merge them yet, so the tools load twice there.

Why do big Figma replies fail in the Claude desktop app's Code tab?

One user reports large replies cut off with a parse error there, and the report is open. They say the same frames work from the regular chat, and screenshots still work.

Information

updated Nov 1, 2026

WebsiteDocsGitHubOfficial MCP RegistryPricingLink

More on this

Sources

Docs, issue trackers and discussions this page is built from.

Show all 12
  1. developers.figma.com · developers.figma.com
  2. developers.figma.com · developers.figma.com
  3. code.claude.com · code.claude.com
  4. developers.figma.com · developers.figma.com
  5. github.com · github.com
  6. github.com · github.com
  7. forum.figma.com · forum.figma.com
  8. github.com · github.com
  9. github.com · github.com
  10. github.com · github.com
  11. code.claude.com · code.claude.com
  12. github.com · github.com

Updated Nov 1, 2026.