Figma MCP server: setup for Claude, Cursor & Windsurf (2026)

A Figma MCP server feeds design context — frames, components, layout, variables — straight into your AI client so it can generate accurate front-end code. There are two routes in 2026: Figma's official Dev Mode MCP server, and the popular Framelink community server. Here is how to set up both.

Option A — Figma Dev Mode MCP server (official)

Built into the Figma desktop app. Requires a Dev or Full seat on a paid plan.

Open the Figma desktop app (not the browser).
Go to the Figma menu → Preferences → Enable Dev Mode MCP Server.
The server starts locally at http://127.0.0.1:3845/sse.

Add it to a client that supports SSE/HTTP MCP:

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

Then select a frame in Figma and ask your AI to implement it. Because it reads the current selection, keep the desktop app open.

Option B — Framelink server (API token, any client)

Works without the desktop app, using a Figma API token. Good for Claude Desktop and Windsurf.

Create a personal access token at Figma → Settings → Account → Personal access tokens.
Configure:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_TOKEN", "--stdio"]
    }
  }
}

Then paste a Figma file or frame link in your prompt and ask the agent to build it.

Verify

Ask: "Implement the selected Figma frame as a responsive React component." (Option A) or paste a frame URL (Option B). You should get markup that matches spacing, colours and component names.

Common problems

Dev Mode server missing — you are in the browser app, or on a plan without Dev Mode. Use the desktop app on a paid seat, or switch to Option B.
Connection refused on :3845 — the server is not enabled, or the desktop app is closed.
Generic / wrong output — select the specific frame first; whole-page selections dilute context.
No tools in client — see MCP config file location and Cursor MCP not working.

Going further

Figma pairs with filesystem and GitHub servers for a design-to-PR workflow. Browse curated loadouts or the design category. Built a design server? Submit it.