FIGMAMCP Server

The Figma MCP Server is Figma's official integration for AI coding agents. It connects your IDE directly to your Figma files — select a frame, ask your agent to build it, and get code that actually matches the design. No more eyeballing spacing or copying hex values.

Two connection methods:

• Remote server — connects to Figma's hosted endpoint at mcp.figma.com, no desktop app required. Uses OAuth authentication.
• Desktop server — runs locally through the Figma desktop app at 127.0.0.1:3845. Supports selection-based prompting (select a frame in Figma, then ask your agent).

What you can do:

• Generate code from frames — select a Figma frame and turn it into production code
• Extract design context — pull variables, components, and layout data into your IDE
• Code Connect — leverage your actual design system components so generated code stays consistent with your codebase
• Retrieve Make resources — access code resources from Make files as context during development

Setup — Remote server

The remote server is the simplest path. No Figma desktop app needed.

Claude Code:

1. Run claude mcp add --transport http figma https://mcp.figma.com/mcp
2. Start a new Claude Code instance
3. Use /mcp → select figma → Authenticate through browser

Cursor:

1. Click the Figma MCP server deep link from the docs
2. Click Install → Connect → Open
3. Allow access through browser

VS Code:

1. Open command palette (Cmd+Shift+P) → "MCP: Open User Configuration"
2. Add the Figma server config pointing to https://mcp.figma.com/mcp
3. Click Start and authorize access

Setup — Desktop server

Requires the Figma desktop app. Gives you selection-based prompting — select a frame in Figma, then ask your agent about it.

1. Open a Design file in Figma desktop → switch to Dev Mode (Shift+D)
2. In the Inspect panel, click "Enable desktop MCP server"
3. The server runs at http://127.0.0.1:3845/mcp
4. Add it to your editor — e.g. claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Example prompts

"Select this frame and generate a React component with Tailwind classes that matches the design."

"Extract all color tokens, font sizes, and spacing values as CSS custom properties."

"Use my Code Connect components to build out this new feature flow from the Figma designs."

"Compare the button styles in our Figma file against our current button component and list every discrepancy."

Tips for better output

Structure your Figma files for cleaner results — use auto-layout, name your layers clearly, and avoid massive heavy frames. Writing specific prompts helps too: tell the agent which framework, styling approach, and component patterns to follow.