Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop.
Connect Runs on your machine
claude mcp add figma-codekit-mcp -e FIGMA_TOKEN=<FIGMA_TOKEN> -e FIGMA_MCP_CACHE_DIR=<FIGMA_MCP_CACHE_DIR> -- npx -y [email protected]{
"mcpServers": {
"figma-codekit-mcp": {
"command": "npx",
"args": [
"-y",
"[email protected]"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_MCP_CACHE_DIR": "<FIGMA_MCP_CACHE_DIR>"
}
}
}
}{
"mcpServers": {
"figma-codekit-mcp": {
"command": "npx",
"args": [
"-y",
"[email protected]"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_MCP_CACHE_DIR": "<FIGMA_MCP_CACHE_DIR>"
}
}
}
}{
"servers": {
"figma-codekit-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"[email protected]"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_MCP_CACHE_DIR": "<FIGMA_MCP_CACHE_DIR>"
}
}
}
}Replace the values in angle brackets with your own. Keys stay on your machine; we never see them.
Tools
This server runs locally, so its tools are listed by your MCP client once it starts.
Environment variables
| Name | Description |
|---|---|
FIGMA_TOKENRequired, secret | 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_DIROptional | Where converted frames are cached. Defaults to .figma-cache/ in the directory the server starts from. |
Details
| Package | [email protected] (NPM, stdio) |
| First published | 5 Nov 2026 |
| Last updated | 5 Nov 2026 |
| Registry name | io.github.Mehmoodqureshi/figma-codekit-mcp |
More developer tools servers See all
Listing data from the official MCP registry. Status and tools from NestDaddy's daily check. Browse all MCP servers.