# Figma MCP: an MCP server by Scalably

Canonical: https://scalably.io/mcp/figma-mcp
Source: https://github.com/scalably-io/figma-mcp
Registry: https://registry.modelcontextprotocol.io/v0.1/servers/io.scalably%2Ffigma-mcp/versions/1.0.1
Provenance: derived from `container/tools/figma-mcp` at `ef174fc3` (2026-08-31) in the private ScalablyAI repository
Integrity: sha256 of the raw README served at https://scalably.io/mcp/figma-mcp.md is c0a7c381ec8cf7612a4da753f93f1e432e7be9503c6b20e5e66f7451330b0fc6. Verify: curl -s https://scalably.io/mcp/figma-mcp.md | shasum -a 256
This is the machine-readable representation of the page at the canonical URL. Same facts, denser format.

## Direct answer
Figma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools.

Frame lists and frame exports for design-to-content workflows.

## Install
- Claude Code: `claude mcp add figma -e FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp`
- Codex: `codex mcp add figma --env FIGMA_TOKEN=your-token -- npx -y @scalably-io/figma-mcp`
- Claude Desktop: download `figma-mcp.mcpb` from the latest GitHub release and open it.

## Environment
| Variable | Required | Secret | Purpose |
|---|---|---|---|
| `FIGMA_TOKEN` | yes | yes | Figma personal access token with file_content:read |
| `FIGMA_API_BASE_URL` | no | no | Figma REST API base URL, default https://api.figma.com/v1 |
| `FIGMA_REQUEST_TIMEOUT_MS` | no | no | Per-request timeout in milliseconds, default 60000 |
| `FIGMA_MAX_JSON_BYTES` | no | no | Upper bound on a Figma JSON response in bytes, default 104857600 |
| `FIGMA_MAX_FRAME_BYTES` | no | no | Upper bound on a downloaded frame PNG in bytes, default 104857600 |
| `FIGMA_OUTPUT_ROOT` | no | no | Directory that all fetch_frame output directories must stay below, default ./figma-output |
| `FIGMA_ALLOW_HTTP_FOR_TESTS` | no | no | Test suite only: set to 1 to allow a plain-HTTP loopback API base. Never set it in normal use |

## Tools
| Tool | Description |
|---|---|
| `list_frames` | List and optionally filter all top-level FRAME nodes in a Figma file. |
| `fetch_frame` | Fetch one Figma frame and write its PNG, node JSON, and image-fill map into the output directory. |

## Setup
1. Create a personal access token at figma.com under account settings, with `file_content:read` scope.
2. Find the file key in any Figma file URL: it is the segment after `/design/` or `/file/`, for example `https://www.figma.com/design/AbC123xyz/My-file` gives `AbC123xyz`. Both tools take it as `file_key`.
3. If `FIGMA_TOKEN` is not set the server still starts and lists its tools; every call then fails with `FIGMA_NOT_CONFIGURED` until the token is provided.
4. `fetch_frame` is the only tool that writes files (so it is not marked read-only); it writes `frame.png`, `node.json`, and `fills.json` into a directory below the configured output root (default `./figma-output`). The other tool is fully read-only.

## Limits
`fetch_frame` renders through Figma's image API, so very large frames or extreme scale values can exceed the configured JSON or frame byte limits; lower `scale` or split the frame if that happens. `fills.json` URLs are temporary and expire within 14 days.

## Reply shape
Every tool returns plain JSON with `status` (`succeeded`, `partial`, `no_op`), `summary`, `target`, `result`, `proof`, `warnings`, `recovery`. Failures throw a plain error string: `<code>: <message> <hint>`.

## Reliability
- CI: https://github.com/scalably-io/figma-mcp/actions/workflows/validate.yml
- Release 1.0.1
- Verified 2026-08-31
- Each of ours started as an internal ScalablyAI MCP server. We stripped the internal envelope, the auth wrapper and client dispatch that only make sense inside our own platform, and kept the tool surface. Every release runs through a clean-install CI job, publishes under the io.scalably namespace with trusted publishing so no long-lived token ever leaves our CI, and registers on the official MCP registry.

## Related
- Also in design: [Penpot MCP Server](https://scalably.io/mcp/penpot-mcp-server)
- Read more: [How to build an MCP server in TypeScript (the right way)](https://scalably.io/blog/mcp-server-typescript), [Claude Code MCP: how to add an MCP server](https://scalably.io/blog/claude-code-mcp)