Figma MCP Server — Setup in Claude Code

Gives Claude Code structured access to Figma: read components/variables/layout, generate code from frames, use Code Connect, and write native content back to the canvas.

Two Versions

Version	When to use
Remote (recommended)	Most users — broadest feature set
Desktop	Specific org/enterprise use cases only

Remote Setup (Preferred)

Install the Figma plugin (includes MCP server + Agent Skills):

claude plugin install figma@claude-plugins-official

Then:

Restart Claude Code
Run /plugin → navigate to Installed tab
Select figma → press Enter → authenticate via browser
Click Allow access
Run /plugin again — figma should show as connected

Desktop Setup

Only if remote is unavailable (org/enterprise).

In Figma desktop app:

Open a Design file → switch to Dev Mode (toolbar toggle)
Enable MCP server in right sidebar → copy the URL

In Claude Code terminal:

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

Restart Claude Code, then verify with /mcp.

What the MCP Server Provides

Read: components, variables, layout data, FigJam content, Make resources
Generate code from selected frames
Code Connect — keeps generated code aligned with real components
Write to canvas — create/update native Figma content
Send live web interfaces to Figma as editable layers

Key Takeaways

Use the remote version unless you have an explicit org/enterprise reason for desktop
Install via claude plugin install figma@claude-plugins-official — this is the recommended path
After install, authenticate once via browser OAuth; stays connected across sessions
Desktop version requires Figma desktop app + Dev Mode + manually copying the local URL
After setup, test with /mcp (desktop) or /plugin (remote) to confirm connection

Sources

raw/Claude Code and Figma Set up the MCP server.md
Official: https://help.figma.com/hc/en-us/articles/39888612464151

2.6 KiB Raw Permalink Blame History