How to add Figma Context MCP (figma-developer-mcp) to Claude Desktop

Popular community server that feeds Figma layout data to coding agents via a Figma API token. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 15, 2026 · 15k★ · stdio · apikey

Claude Desktop config for Figma Context MCP (figma-developer-mcp)

npx -y figma-developer-mcp --stdio

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

Setup steps

1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
2Paste the Figma Context MCP (figma-developer-mcp) config below under the top-level "mcpServers" key.
3Fill in any placeholder secrets (API keys, paths) in the snippet.
4Save the file, then fully quit and reopen Claude Desktop.
5Open a chat and confirm Figma Context MCP (figma-developer-mcp)'s tools appear under the 🔌 tools menu.

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.

What Figma Context MCP (figma-developer-mcp) can do in Claude Desktop

get_figma_data

Fetch a Figma file (or a specific node) and return simplified layout, hierarchy, and style data for the agent.

download_figma_images

Download image and SVG assets (image fills, exportable nodes) from a Figma file to local paths.

Security

Requires a Figma personal access token that can read any file your account can access; scope the token narrowly and never commit it. The server sends file data to wherever your MCP client routes it.

Figma Context MCP (figma-developer-mcp) + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the Figma Context MCP (figma-developer-mcp) config there under the "mcpServers" key and restart the client.

Is Figma Context MCP (figma-developer-mcp) safe to use with Claude Desktop?

Requires a Figma personal access token that can read any file your account can access; scope the token narrowly and never commit it. The server sends file data to wherever your MCP client routes it.

What tools does this server expose?

Two: get_figma_data (fetch simplified layout/style data for a file or node) and download_figma_images (download image and SVG assets).

How do I get the Figma API key?

Generate a personal access token in Figma under Settings → Security → Personal access tokens, then pass it via --figma-api-key or the FIGMA_API_KEY env var.

Is this the official Figma MCP server?

No. It's a community project by GLips/Framelink (MIT licensed). Figma's own official server is separate and uses OAuth, not a personal access token.

View repo Full Figma Context MCP (figma-developer-mcp) page