The Figma MCP server connects your Figma designs directly to Claude Code. Instead of describing your designs in words, Claude Code can read your actual Figma files (components, colors, spacing, layout) and generate accurate code from them.
MCP (Model Context Protocol) is a standard that lets AI tools like Claude Code connect to external services. The Figma MCP server gives Claude Code direct access to your design files.
Option A: Desktop MCP Server (Dev or Full seat)
The desktop server runs locally and lets you select frames directly in the Figma app, the fastest workflow. It requires a Dev or Full seat on a paid Figma plan. If you're on Free or Pro, skip to Option B, which works on any plan.
Update the Figma Desktop App
Open the Figma desktop app and make sure it's updated to the latest version. The MCP server requires a recent update.
Open a Design File
Open any Design file in the Figma desktop app (not FigJam; you need a Design file for the MCP toggle).
Switch to Dev Mode
Press Shift + D or click the Dev Mode toggle in the toolbar. The MCP server option lives in Dev Mode.
Enable the MCP Server
In the Dev Mode panel, find the "MCP" section and click "Enable desktop MCP server." The server will start running locally.
Connect Claude Code to the Desktop Server
Add the Figma MCP server to your Claude Code configuration. Run this command in your terminal:
claude mcp add figma-desktop --transport http http://127.0.0.1:3845/mcpOption B: Remote MCP Server (works on any plan, recommended starting point)
The remote server is Figma's preferred method and works on every seat and plan, including Free and Pro. It's the simplest way to start: no desktop app required. You reference designs by pasting Figma URLs instead of selecting frames.
claude mcp add figma-remote --transport http https://mcp.figma.com/mcpStart with Remote: it works on any plan and needs no setup beyond the command above. Upgrade to Desktop if you have a Dev or Full seat and want to select frames directly in the app instead of pasting URLs, which is the faster workflow.
Verify the Connection
Start a new Claude Code session and ask it to check the Figma connection:
claude
> Can you see my Figma MCP server? List the available tools.Claude Code should respond listing Figma-related tools like reading files, getting design data, and extracting components.
Figma MCP connected
- Connected a Figma MCP server: remote (any plan) or desktop (Dev/Full seat)
- Added the server to Claude Code with claude mcp add
- Verified the connection by listing the available Figma tools
Claude Code can now read your actual Figma files. Next: turning a selected frame into working code.