Figma-Context-MCP server in Claude Code designs to code in one shot.

One claude mcp add command connects Claude Code to your Figma files, so it can read layout, components, and styles directly instead of guessing from screenshots.

Figma-Context-MCP (github.com/glips/figma-context-mcp, 15.1k stars) gives a coding agent direct access to your Figma data — frame structure, component hierarchy, fills, spacing, and exportable assets — translated into a compact format models handle well. Paste a Figma link into Claude Code and it can implement the design in your framework in one shot, instead of reverse-engineering pixels.

Claude Code is CLI-first, so setup is genuinely a one-liner. The server ships on npm as figma-developer-mcp; the only prerequisite is a Figma personal access token (Figma settings > Security > Personal access tokens) with read access to the files you'll reference.

The one-line install

Claude Code manages MCP servers through the claude mcp subcommand rather than hand-edited config. From any terminal:

Terminal

claude mcp add figma-context \
  --env FIGMA_API_KEY=YOUR_FIGMA_TOKEN \
  -- npx -y figma-developer-mcp --stdio

Or commit it to the repo with .mcp.json

If your team implements designs regularly, a project-scoped .mcp.json in the repo root means everyone who clones gets the server (each developer supplies their own token). The JSON equivalent of the command above:

.mcp.json (project root)

{
  "mcpServers": {
    "figma-context": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_TOKEN"
      }
    }
  }
}

Verify and use it

Start a session and run /mcp — figma-context should be listed as connected, with its tools for fetching file data and downloading image assets. Then try the real workflow: copy a link to a specific Figma frame (right-click the frame > Copy link to selection) and ask Claude Code to implement it. The frame node ID embedded in the URL is what lets the server fetch just that subtree instead of the whole file.

Selection links matter for another reason: large Figma files can overflow the context window if you ask for everything at once. Scope requests to a frame or component and the translated payload stays small.

Troubleshooting in Claude Code

If /mcp shows the server as failed, run claude mcp list to confirm it registered, and check scope confusion first: servers added with claude mcp add default to local scope (this project, you only), so the server won't appear in other directories unless you added it with --scope user.

A server that connects but errors on every call is almost always the token — either expired, mistyped, or lacking access to the file you linked (drafts and files outside your team need explicit access). And since the server spawns via npx, Claude Code needs Node on its PATH; if you installed Node via a version manager, start Claude Code from a shell where node -v works.

The listing

Figma-Context-MCP's live listing — including its probed tool list — is on the Loomal marketplace at https://loomal.ai/marketplace/figma-context-mcp. It's the most-starred server in the design tools category, and pairs naturally with a browser-automation server if you want Claude Code to visually check its own output against the design.

FAQ

How do I install Figma-Context-MCP in Claude Code?

Run claude mcp add figma-context --env FIGMA_API_KEY=your-token -- npx -y figma-developer-mcp --stdio, or commit an equivalent mcpServers entry in a .mcp.json at your project root. The npm package is figma-developer-mcp; npx fetches it on first launch.

Where does Claude Code store MCP configuration?

Servers added via claude mcp add are stored per-scope (local, project, or user) in Claude Code's own config; project-scoped servers live in a .mcp.json file in the repo root that you can commit. Run claude mcp list to see everything registered and at which scope.

Claude Code says the server is connected but Figma calls fail — why?

That pattern points at the FIGMA_API_KEY: expired tokens, missing read scope, or a file your account can't access all fail at call time, not connect time. Generate a fresh personal access token in Figma settings and confirm you can open the target file in the browser with the same account.

Why is my Figma file blowing the context window?

You're probably fetching the whole document. Right-click a frame in Figma and use Copy link to selection — the node ID in that URL lets the server return just the frame you're implementing, which keeps the payload small and the generated code focused.

Figma-Context-MCP server in Cursor Figma-Context-MCP server in Claude Desktop Figma-Context-MCP server in Windsurf Design tools MCP servers Debugging MCP servers with MCP Inspector

Browse more MCP servers for Claude Code.

Design, browser, and search servers with live tool lists.

Open the marketplace