Figma and Design System MCP

Your designer just updated the pricing page in Figma. You open the design, squint at the spacing, guess that the gap is 24px (it is 20px), hardcode a color that looks like the primary blue (it is actually #2563EB, not #3B82F6), and ship it. The design review comes back with twelve comments about spacing, color, and font weight mismatches. You spend the next two hours toggling between Figma and your editor, fixing values one pixel at a time. This is the design-to-code loop without MCP.

The Figma MCP server eliminates this loop. Your AI reads design data directly from Figma — exact spacing, real color tokens, actual font weights — and generates code that matches the design on the first pass.

What You’ll Walk Away With

• Setup for Figma’s Dev Mode MCP server across all three tools
• Prompts for component generation, design token extraction, and design system alignment
• Understanding of selection-based versus link-based workflows
• Strategies for combining Figma MCP with other servers

Prerequisites

Figma’s MCP server runs inside the Figma desktop app. You need:

• Figma desktop app (not the browser version)
• Dev Mode access — requires a Professional, Organization, or Enterprise plan with a Dev Mode seat
• MCP enabled in Figma preferences — open Figma, go to Preferences, and enable “Dev Mode MCP Server”

When enabled, Figma runs a local MCP server at http://127.0.0.1:3845/sse. The server is only active while Figma desktop is running.

Caution

The Figma MCP server stops when you close Figma desktop. If the AI reports “connection refused,” check that Figma is open and the MCP server toggle is still enabled in Preferences.

Setup

Cursor

The fastest path in Cursor is through the built-in MCP marketplace:

1. Open Settings > Tools & Integrations > MCP
2. Find Figma in the server list
3. Click “Add to Cursor”

Or configure manually in .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

A green indicator in the MCP panel confirms the connection.

Claude Code

claude mcp add figma-dev --transport sse http://127.0.0.1:3845/sse

Verify with claude mcp list. You should see figma-dev with a connected status. For team sharing, scope it to the project:

claude mcp add -s project figma-dev --transport sse http://127.0.0.1:3845/sse

Codex

[mcp.figma]
transport = "sse"
url = "http://127.0.0.1:3845/sse"

Available Tools

The Figma MCP server exposes four tools:

Tool	What It Does
get_code	Generates code from the currently selected Figma frame or a Figma link
get_variable_defs	Extracts design tokens and variables (colors, spacing, typography)
get_code_connect_map	Shows how Figma components map to code components via Code Connect
get_image	Captures a screenshot of a design element for visual reference

Tip

Copy-paste prompt for component generation:

“Look at my current Figma selection. Generate a React component using Tailwind CSS that matches the design exactly. Extract the spacing, colors, and typography from the design data — do not guess values. Name the component based on the frame name in Figma.”

Two Workflows: Selection-Based and Link-Based

Selection-based works when you have Figma open alongside your editor. Select an element in Figma, then prompt the AI. The MCP server reads the context of whatever is selected. This is the fastest workflow for active iteration.

Link-based works when you are implementing from a ticket or spec. Copy a Figma link (Cmd+L in Dev Mode), paste it into your prompt, and the AI extracts the node ID to fetch the design data. This approach works even if someone else created the design and you are working from their link.

Tip

Copy-paste prompt for link-based generation:

“Generate a responsive card component from this Figma design: [paste Figma link]. Use CSS Grid for the layout. Extract all design tokens into CSS custom properties. The component should support both light and dark themes based on the Figma variables.”

Design Token Extraction

One of the highest-value uses of Figma MCP is extracting design tokens into your codebase. Instead of manually copying hex codes and spacing values, the AI reads them directly from Figma’s variable definitions.

Tip

Copy-paste prompt for design token sync:

“Use Figma MCP to extract all design variables from the current file. Generate a TypeScript theme configuration file at src/lib/theme.ts with colors, spacing, typography, and border radius values. Group tokens by their Figma collection names. Include JSDoc comments noting the original Figma variable names.”

Combining Figma MCP with Other Servers

The real power emerges when you combine Figma MCP with other MCP servers in the same conversation:

Figma + GitHub MCP: “Implement this Figma design as a React component, create a feature branch called ui/pricing-card, commit the component, and open a PR with the Figma link in the description.”

Figma + Playwright MCP: “Generate the component from this Figma selection, then open it in the browser at localhost:3000/storybook and take a screenshot. Compare the screenshot to the Figma design and flag any visual differences.”

Figma + Context7: “Look at this Figma design for a data table. Use Context7 to fetch the current TanStack Table documentation, then implement the table component using the recommended patterns from the docs with the exact styling from Figma.”

When This Breaks

“Connection refused” error. Figma desktop is not running or the MCP server is disabled. Open Figma, go to Preferences, and confirm the Dev Mode MCP Server toggle is on.

“No tools available” in the MCP panel. Restart both Figma and your editor. The SSE connection can drop if Figma updates or if your machine sleeps.

AI generates wrong spacing or colors. The AI may be mixing Figma data with its training data. Be explicit: “Use only the values from the Figma design data. Do not use default Tailwind colors.”

Design tokens are missing. Variables must be defined in Figma’s variable system, not just applied as styles. If the designer used raw hex values instead of variables, get_variable_defs will return nothing. Ask the designer to convert styles to variables.

Figma MCP not available on Linux. The Figma desktop app is required, and it only runs on macOS and Windows. Linux users can use the Figma REST API MCP server as a workaround, though it requires a personal access token and lacks the selection-based workflow.

What’s Next

shadcn/ui MCP Install and customize UI components with AI assistance.

Browser Automation MCP Verify your implementation matches the design in a real browser.