How to Set Up the Figma MCP Server in Claude Code

Steps

1. 01

   Pick a server: remote (recommended) or desktop

   Figma offers two MCP servers. The remote server is the one most users need — Figma documents it as having the broadest set of features — and it is set up through a Claude Code plugin. The desktop server runs locally via the Figma desktop app's Dev Mode and is intended for specific organization/enterprise cases. Start with remote unless you have a reason to run local.

   # Remote (recommended): set up via the Claude Code plugin (next step)
   # Desktop (local):      enable in the Figma desktop app, then claude mcp add

2. 02

   Set up the remote Figma MCP server (recommended)

   Install the official Figma plugin for Claude Code, then authorize it. After installing, restart Claude Code, open the plugin marketplace with /plugin, go to the Installed tab, select figma and press Enter to start authorization, click Allow access in the browser that opens, then run /plugin again — the figma server should show as connected.

   # 1) Install the official Figma plugin
   claude plugin install figma@claude-plugins-official
   
   # 2) Restart Claude Code, then open the plugin marketplace
   /plugin
   #   → Installed tab → select 'figma' → Enter to authorize
   #   → click 'Allow access' in the browser → run /plugin again to confirm 'connected'

3. 03

   Or set up the desktop Figma MCP server (local)

   If you need the local server: open the Figma desktop app and a design file, switch to Dev Mode using the toolbar toggle, enable the MCP server in the right sidebar, and copy the server address it shows. Then register that local endpoint with Claude Code over HTTP transport. The desktop server only responds while the Figma desktop app is open with the server enabled.

   # After enabling the server in Figma desktop (Dev Mode → right sidebar):
   claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

4. 04

   Verify the connection

   Restart Claude Code, then list connected MCP servers and their tools with /mcp. The figma (remote) or figma-desktop (local) server should appear. As a real check, select a frame in Figma and ask Claude Code to read or implement it.

   # Inside Claude Code:
   /mcp

5. 05

   (Optional) Use the same server from Cursor or another MCP client

   Any MCP client can connect to the desktop server's endpoint. In Cursor, open the command palette, search Cursor settings, open the MCP tab, choose Add Custom MCP, and add the config below. Other clients point at the same http://127.0.0.1:3845/mcp endpoint — confirm exact steps in each client's docs.

   {
     "mcpServers": {
       "figma-desktop": { "url": "http://127.0.0.1:3845/mcp" }
     }
   }

Troubleshooting

The figma server never shows as 'connected' after claude plugin install

Restart Claude Code so it picks up the plugin, then run /plugin, open the Installed tab, select figma, and complete the authorization — you must click 'Allow access' in the browser that opens. Make sure you are signed into the correct Figma account. Run /plugin once more to confirm the status flips to connected.

Desktop server: connection refused on 127.0.0.1:3845

The local endpoint only exists while the Figma desktop app is open with the Dev Mode MCP server enabled in the right sidebar. Open the desktop app, switch a file to Dev Mode, toggle the MCP server on, then retry. The browser version of Figma does not expose the local server.

/mcp shows no Figma tools in Claude Code

Confirm the server registered: run claude mcp list (and claude mcp get figma-desktop for the local server) to check it is present and its transport is correct. Restart Claude Code. For the desktop server, ensure the Figma app is still open with the server enabled; for the remote server, re-run the /plugin authorization.

401 / authorization errors on the remote server

Your Figma authorization may have expired or not completed. Re-run /plugin, select figma, and redo the Allow access step in the browser. Confirm you authorized the same Figma account that has access to the files you want to read.

Dev Mode or the MCP server is not available in Figma

The Figma MCP server is part of Dev Mode, which depends on your Figma plan and seat. If you do not see the Dev Mode toggle or the MCP server option, confirm your current plan and seat entitlements at figma.com.