Figma Context MCP (figma-developer-mcp)

Add to your client

Copy the config for your MCP client and paste it into its config file.

{
  "mcpServers": {
    "figma-context-mcp-figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-token>"
      }
    }
  }
}

Before you start

• Node.js (run via `npx`, no global install required).
• A Figma personal access token — create one in Figma under Settings → Security → Personal access tokens (read access to file content and dev resources is sufficient).
• An MCP-compatible client such as Cursor, Windsurf, VS Code, or Claude Desktop.

About Figma Context MCP (figma-developer-mcp)

Tools & capabilities (2)

When to use it

• Use it when you want Cursor or another agent to convert a Figma frame into code in one shot using real layout data.
• Use it when pasting a Figma screenshot isn't accurate enough and you need the underlying structure and styles.
• Use it when you need to pull image/SVG assets out of a design into your project.
• Use it when you want a free, local, token-based alternative to Figma's official server.
• Use it when you're building a design-to-code workflow and want trimmed Figma data that fits the model's context window.

Quick setup

1. 1Create a Figma personal access token in your Figma account settings.
2. 2Add the server to your client config: `npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio` (use `cmd /c` wrapper on Windows).
3. 3Alternatively set the `FIGMA_API_KEY` env var (and `PORT` if you want HTTP/SSE mode).
4. 4Restart your MCP client so it picks up the server.
5. 5Copy a Figma file or frame URL and ask the agent to implement it; it will call get_figma_data.
6. 6Verify by confirming the agent retrieves layout data and downloads assets.

Figma Context MCP (figma-developer-mcp) FAQ