Creativity · MCP — server

MCP Figma Server

The MCP Figma Server plugs the Figma Dev Mode API into the Model Context Protocol. When a designer highlights a frame in Figma, an MCP client like Cursor or Claude Desktop can read the selected node — layout, styles, variables, and linked components — and generate matching front-end code or redline a design against an existing component library.

MCP facts

Kind: server
Ecosystem: anthropic-mcp
Language: TypeScript / Node.js
Transports: sse, http

Capabilities

Tools: get_selection, get_code, get_variable_defs, get_image for the current Figma selection
Resources: figma://node/<id> with hierarchy, layout constraints, and linked components
Outputs structured Dev Mode context instead of lossy screenshots
Runs as a local server inside the Figma desktop app when Dev MCP is enabled

Install

Enable in Figma Desktop: Preferences → Enable Dev Mode MCP Server

Configuration

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

Frequently asked questions

Do I need a Figma paid plan for the MCP server?

Dev Mode MCP requires a seat with Dev Mode access (part of the Organization / Enterprise / Dev Mode add-ons). Hobby accounts can still see designs but not run the MCP server.

Where does it run?

Inside the Figma desktop app. Turn it on via Preferences → Enable Dev Mode MCP Server and the app listens on http://127.0.0.1:3845/sse. Clients like Cursor and Claude Desktop connect to that URL.

What is the agent workflow?

Select a frame in Figma. In Cursor prompt 'implement this selection with our Button component'. The client calls get_code + get_variable_defs to pull layout, tokens, and components, then generates typed UI code aligned with your design system.

Sources

Figma Dev Mode MCP — accessed 2026-04-20
Figma for developers — MCP — accessed 2026-04-20