Figma CodeKit MCP Server

by mehmoodqureshiio.github.Mehmoodqureshi/figma-codekit-mcpv0.2.4

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

1Node.jsstdioofficial registry

context tax

pending

security

pending

cold start

pending

freshness

pending

Our reading of Figma CodeKit, from the data

Figma CodeKit is a cloud platforms MCP server from mehmoodqureshi, listed in the official MCP Registry.

We haven't measured its tool list yet, so its token cost is unknown.

With 1 GitHub stars it ranks #248 of 713 cloud platforms servers we index.

It runs locally on your machine over stdio and needs one secret (FIGMA_TOKEN); use a scoped, least-privilege key.

Install Figma CodeKit MCP server

claude mcp add figma-codekit -e FIGMA_TOKEN='<figma-token>' -- npx -y figma-codekit-mcp

{
  "mcpServers": {
    "figma-codekit": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp"
      ],
      "env": {
        "FIGMA_TOKEN": "<figma-token>"
      }
    }
  }
}

Add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project).

{
  "mcpServers": {
    "figma-codekit": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp"
      ],
      "env": {
        "FIGMA_TOKEN": "<figma-token>"
      }
    }
  }
}

Settings → Developer → Edit Config (claude_desktop_config.json), then restart.

{
  "servers": {
    "figma-codekit": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp"
      ],
      "env": {
        "FIGMA_TOKEN": "<figma-token>"
      }
    }
  }
}

Add to .vscode/mcp.json in your workspace.

{
  "mcpServers": {
    "figma-codekit": {
      "command": "npx",
      "args": [
        "-y",
        "figma-codekit-mcp"
      ],
      "env": {
        "FIGMA_TOKEN": "<figma-token>"
      }
    }
  }
}

Add to ~/.codeium/windsurf/mcp_config.json.

Configuration

Variable	Required	Secret	Description
FIGMA_TOKEN	yes	yes	Figma personal access token (Settings -> Security -> Personal access tokens, scope "File content: read"). May instead be placed in a .figma-token file in the project directory. FIGMA_API_KEY is accepted as an alias.
FIGMA_MCP_CACHE_DIR	—	—	Where converted frames are cached. Defaults to .figma-cache/ in the directory the server starts from.

Freshness

Not enough public signals yet to judge maintenance.

Last commit (default branch)
2026-10-15 · 3d ago · GitHub
Latest release
2026-10-15 · 3d ago · GitHub · v0.2.4
Package published
no data · npm/PyPI
Registry entry updated
2026-10-15 · 3d ago · official registry · v0.2.4

How it compares in Cloud Platforms

Against the most-starred cloud platforms servers we index. Token cost is per model turn, measured from each server's live tool list.

Server	Stars	Tools	Tokens / turn	Freshness	Runs
Figma CodeKit (this)	1	—	not measured	—	local
Scrapling	88,517	—	not measured	Active	local
Corsairdev	15,309	—	not measured	Active	local
Plg Handler	14,805	—	not measured	Active	—
Bedrock KB Retrieval	9,793	—	not measured	Active	local
Cloudflare	4,391	—	not measured	Active	hosted

All cloud platforms MCP servers

FAQ

›How do I install the Figma CodeKit MCP server in Claude Code?

Run: claude mcp add figma-codekit -e FIGMA_TOKEN='<figma-token>' -- npx -y figma-codekit-mcp. For Cursor, VS Code, Claude Desktop and Windsurf, use the install tabs above.

›Does Figma CodeKit require an API key?

Yes. It expects FIGMA_TOKEN, of which 1 is a secret.

›Can I use Figma CodeKit as a remote (hosted) MCP server?

No hosted endpoint is published; it runs locally over stdio.

›Is Figma CodeKit in the official MCP registry?

Yes, as io.github.Mehmoodqureshi/figma-codekit-mcp.

Sources and method

Official MCP Registry entry: updated 2026-10-15
GitHub repository: fetched 2026-10-19
Package registry (npm / PyPI): listed
Last checked against all sources: 2026-10-19

The description, packages and links come from the maintainer's own published metadata. Token cost, security signals, freshness and the reading above are MCPSkillHub's own measurements; see the methodology. Spot an error? Request a correction or claim the listing.