Figma MCP — Claude Code MCP server: frames to PNG and JSON
A Figma REST API server with two tools: list a file's top-level frames, or pull one frame down as PNG plus node JSON. Useful when the agent needs the actual design file.
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> --transport stdio figma-mcp -- npx -y @scalably-io/figma-mcpWhat Figma MCP does
The server exposes list_frames and fetch_frame. The first walks the top-level FRAME nodes of a Figma file and returns page, name, node-id, dimensions and file metadata. The second grabs a single frame and writes three files into a subdirectory of FIGMA_OUTPUT_ROOT (default ./figma-output, created on first use): frame.png, node.json, and fills.json holding a normalized map of image fills.
Only fetch_frame touches the disk, which is why it carries no read-only marking. Start the server without FIGMA_TOKEN and it still launches and lists its tools, yet every call answers FIGMA_NOT_CONFIGURED.
You need a personal access token from your Figma account settings, scoped to file_content:read. The file key is the segment after /design/ or /file/ in a Figma URL. Frames get rendered through Figma's image API, so a very large frame or a high scale value can hit the byte caps for JSON and PNG. Lower the scale or split the frame. URLs inside fills.json do not last.
What it helps with
- list every frame in a Figma file with exact node ids
- export one frame to PNG without opening the editor
- hand the agent node JSON and the image-fill map
- pull the file key out of a Figma link
- cap Figma API response sizes via environment variables
Example prompts for the agent
- List the top-level frames in file
AbC123xyzusinglist_frames - Fetch frame
12:34from fileAbC123xyzwithfetch_frameinto./figma-output - Show me which image fills are in the
fills.jsonfor that frame
How to install Figma MCP
Platform CLI
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> --transport stdio figma-mcp -- npx -y @scalably-io/figma-mcpReplace <…> with your own values. 2 more environment variables are in the server README
Platform CLI
codex mcp add figma-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> -- npx -y @scalably-io/figma-mcpReplace <…> with your own values. 2 more environment variables are in the server README
Config file
{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": [
"-y",
"@scalably-io/figma-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_API_BASE_URL": "<FIGMA_API_BASE_URL>",
"FIGMA_REQUEST_TIMEOUT_MS": "<FIGMA_REQUEST_TIMEOUT_MS>",
"FIGMA_MAX_JSON_BYTES": "<FIGMA_MAX_JSON_BYTES>",
"FIGMA_MAX_FRAME_BYTES": "<FIGMA_MAX_FRAME_BYTES>"
}
}
}
}Replace <…> with your own values. 2 more environment variables are in the server README
Config file
{
"servers": {
"figma-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@scalably-io/figma-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_API_BASE_URL": "<FIGMA_API_BASE_URL>",
"FIGMA_REQUEST_TIMEOUT_MS": "<FIGMA_REQUEST_TIMEOUT_MS>",
"FIGMA_MAX_JSON_BYTES": "<FIGMA_MAX_JSON_BYTES>",
"FIGMA_MAX_FRAME_BYTES": "<FIGMA_MAX_FRAME_BYTES>"
}
}
}
}Replace <…> with your own values. 2 more environment variables are in the server README
Platform CLI
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> -e FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> -e FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> -e FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> figma-mcp npx -y @scalably-io/figma-mcpReplace <…> with your own values. 2 more environment variables are in the server README
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Figma MCP
How do I install Figma MCP in Claude Code?
Run claude mcp add figma-mcp -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y @scalably-io/figma-mcp, substituting a token with the file_content:read scope.
What does Figma MCP do?
It lists the top-level FRAME nodes in a Figma file and downloads one frame as PNG alongside its node JSON and image-fill map.
What happens if the Figma token is missing?
The server still starts and exposes its tools. Every call fails with FIGMA_NOT_CONFIGURED until FIGMA_TOKEN is set.
