Set Up Figma MCP
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 (Recommended)
The desktop server runs locally on your computer and lets you select frames directly in the Figma app. This is the best option for most designers.
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
If you don't have the desktop app or prefer a cloud connection, you can use the remote server instead. This works with any Figma plan.
claude mcp add figma-remote --transport http https://mcp.figma.com/mcpThe desktop server lets you select frames directly in the app — a faster workflow. The remote server requires you to paste Figma URLs. Use desktop if you can.
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
- Enabled the desktop MCP server in Figma's Dev Mode
- Added the figma-desktop transport to Claude Code
- 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.