View on Substack
The Figma Dev Mode MCP server exposes 7 tools to Claude Code. Most teams call them in the wrong order, then blame the model. The table below maps each tool to when to call it, what it returns, and the failure mode that breaks the run. Two tools have hard plan or surface limits in May 2026, flagged below.
| Tool | When to call | Returns + failure mode |
|---|---|---|
| get_metadata | First call First call on any large or unfamiliar Figma file. Returns a sparse XML outline so you can identify exact node IDs without pulling full design data. | XML layer tree with node IDs, names, and structural hierarchy. No styles, tokens, or images. Failure mode: the desktop MCP server returns instructional text instead of XML in January 2026. Use the remote server. |
| get_design_context | After node IDs After you know the target node IDs. Call on the exact nodes you want to implement, never on the parent frame or the whole page. | Structured layout, variables, component references, and Code Connect mappings for the selected nodes. Default output is React with Tailwind. Failure mode: a naive call on a multi-screen frame burns the 25,000-token MCP context limit. |
| get_image | Sanity check After get_design_context. Pixel-level sanity check before Claude writes any code. | A rendered screenshot of the selection. Confirms Claude read the layout the way it looks in Figma. Failure mode: skipped step. Claude generates code that matches the structured context but misreads spacing or hierarchy with no visual ground truth. |
| get_variable_defs | Audit only When the goal is auditing which design tokens a selection uses, not building the component. | Color, spacing, and typography tokens used in the selected nodes. Failure mode: used too early. Variables alone are not enough context to generate a faithful component. |
| get_code_connect_map | If configured Whenever Code Connect is configured. Run alongside get_design_context so Claude knows which real repo components map to design components. | Mapping of Figma component instances to real component imports in your repo. Failure mode: Code Connect is Org and Enterprise only with a Full or Dev seat. Returns empty on smaller plans. |
| generate_diagram | Write to FigJam When you want Claude Code to write back into FigJam from a natural-language flow or a Mermaid spec. | An editable FigJam diagram link. This is the one Figma MCP write tool that works in Claude Code today. Failure mode: confused with generate_figma_design. The two are different tools. |
| generate_figma_design | Not in CLI Not from Claude Code in May 2026. Use the Claude.ai browser app, Code tab, on Opus 4.7 or Sonnet 4.6. | An editable Figma Design frame from captured UI. The Code-to-Canvas write path. Failure mode: calling it from Claude Code fails. GitHub issue 28718 confirms it is not exposed in the CLI and was closed as Not Planned. |
Source: Product with Attitude. Tested May 2026 on Opus 4.7 and Sonnet 4.6.
Originally published on Substack: Figma MCP with Claude Code in May 2026.