Figma CodeKit — Pixel-Verified Figma to Code
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| FIGMA_TOKEN | No | Figma personal access token (required unless using FIGMA_API_KEY or .figma-token file), scope File content: read | |
| FIGMA_API_KEY | No | Alias for FIGMA_TOKEN | |
| GEMINI_API_KEY | No | Optional, headless refine loop only. The MCP server never calls an LLM. | |
| ANTHROPIC_API_KEY | No | Optional, headless refine loop only. The MCP server never calls an LLM. | |
| FIGMA_MCP_CACHE_DIR | No | Directory where converted frames are cached. Defaults to .figma-cache/ in the directory the server is started from. | |
| FIGMA_MCP_SKIP_BROWSER_DOWNLOAD | No | Set to '1' to skip Chromium download on install. figma_convert and figma_inspect still work; figma_verify will not. |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| figma_convertA | Fetch a Figma frame and deterministically convert it to self-contained HTML (no LLM). Writes generated.html, reference.png, ir.json and assets.json to a cache dir and returns the paths plus a summary. Pass react=true for a component file, or next=true for a runnable Next.js App Router project you can npm install && npm run dev. Figma responses are cached, so re-running is offline and free unless refresh=true. Follow with figma_verify to see how close the render is. |
| figma_verifyA | Render an HTML file in Chromium, pixel-diff it against the Figma reference, and check each element position with bounding-box IoU, paint order (z-index) and clipping. Returns the diff ratio plus specific instructions on what to fix (MISSING / MISPLACED / WRONG STACKING / OVER-CLIPPED elements, worst regions). Writes render.png and diff.png. Edit the HTML based on the correction and call this again to iterate toward pixel-exact. Read the returned diff.png to see the mismatches highlighted. |
| figma_inspectA | Print the IR tree as an indented outline (role, name, box, layout, text, tokens) so you can understand the design structure and find a specific element without reading raw Figma JSON or the whole ir.json. Use after figma_convert. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 3 tools
Each tool targets a clearly distinct stage of a linear pipeline: convert (Figma→HTML), verify (pixel-diff render against reference), and inspect (read the IR tree). The descriptions explicitly state ordering ('use after figma_convert', 'follow with figma_verify'), so an agent cannot reasonably confuse them.
All three tools follow the same figma_<verb> pattern (figma_convert, figma_verify, figma_inspect) with short, single-word verbs. Fully predictable and consistent.
Three tools is exactly the minimal surface for a convert → inspect → verify iteration loop, and each one has a non-overlapping job. There is no filler or redundant tool in the set.
The core lifecycle (convert, inspect structure, verify/fix loop, output artifacts) is covered with no dead ends. The main gap is discovery: there is no tool to list files/frames or resolve a Figma URL to a node ID, so the agent must already know the target node before calling figma_convert.