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.

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

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)

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