Connect Your Figma Designs to Claude and Cursor

Official Figma guide: Dev Mode MCP Server

MCP is an open protocol that lets AI tools connect to software in a consistent way. With Figma MCP, your assistant can access design structure, tokens, and component context instead of only screenshots.

Watch the walkthrough

Figma file

Frames, components, variables, and selected layers

Dev Mode MCP

Local bridge that exposes design context safely

Cursor / Claude Code

Reads the context and edits your project files

Codebase

Components, tokens, docs, and tests

Designer

Selects intent, reviews output, and decides what ships

Why MCP matters for designers

• Higher-fidelity code from design context
• Faster handoff between design and engineering
• Better collaboration with AI across design and code

Availability

The Figma Dev Mode MCP Server is in open beta and requires:

• Figma desktop app
• Dev or Full seat on Professional, Organization, or Enterprise plans
• A client/editor that supports MCP or SSE

Setup

1) Enable MCP server in Figma

1. Open Figma desktop app and update it.
2. Open any design file.
3. Go to Preferences -> Enable Dev Mode MCP Server.
4. Confirm server is running on http://127.0.0.1:3845/sse.

2) Connect from your editor

Cursor

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

VS Code (example)

"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true

Claude Code / Claude Desktop

Claude connects to the same local server by URL, no access token required:

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

In Claude Desktop, add the same SSE server under Settings → Developer → Edit Config, then restart the app. The Figma server should appear in the tools list with a connected status.

3) Prompt with context

• Selection-based: select a frame/layer, then prompt your assistant.
• Link-based: pass a Figma URL to the assistant and ask it to implement.

Best practices

• Use components and variables
• Name layers semantically
• Use Auto Layout for intent
• Add annotations for behaviors not visible in static designs
• Use precise prompts (tech stack, file paths, constraints)

Troubleshooting

• Editor does not list the server. Make sure the Figma desktop app is updated and the Dev Mode MCP Server toggle is on, then restart your editor so it re-reads the config. The server only runs while the desktop app is open.
• “Connection refused” on 127.0.0.1:3845. The server is not running. Re-open Figma desktop and re-enable the toggle. A browser visit to the SSE URL should return a stream, not an error.
• Figma warns you need a Dev or Full seat. The Dev Mode MCP Server is gated to Dev and Full seats on Professional, Organization, or Enterprise plans. View-only seats cannot start it.
• The AI hallucinates the design instead of reading it. It is not actually connected. Verify the server shows as connected in your editor before prompting, and select a frame (or pass a Figma link) so it has something concrete to read.

Exercise

Turn on Figma MCP and pull real design context into your editor

20 min

1. Enable the MCP server in Figma desktop

   Open the Figma desktop app and make sure it is on the latest version. Open any design file. Go to Preferences -> Enable Dev Mode MCP Server. Confirm the status message shows the server running on http://127.0.0.1:3845/sse.

   • The toggle is enabled and Figma shows the local SSE URL
   • Visiting http://127.0.0.1:3845/sse in a browser returns a stream response, not a connection error
   • Figma does not warn that you need a Dev or Full seat

2. Add the server to your editor and ask for component context

   Paste the MCP config from this guide into .cursor/mcp.json (or the VS Code equivalent). Restart the editor. Open a Figma file, select a frame, then ask your AI: “Using the selected Figma frame, list the components used, their variants, and any variables bound to properties.”

   • The AI returns real component names, variants, and variable bindings from your file
   • No fallback to “I cannot see the file, please paste a screenshot”
   • You can follow up with “Generate React code for this frame using our design tokens” and get code that references your variables