4.1 KiB
| title | aliases | tags | sources | created | updated | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Figma MCP Server — Tool Reference |
|
|
|
2026-05-13 | 2026-05-13 |
Figma MCP Server — Tool Reference
Complete list of the 18 tools exposed by the Figma MCP server. The primary 3 are bolded — they cover 90% of design-to-code work.
Core Design-to-Code Tools
get_design_context ← use first
Returns structured React + Tailwind code, a screenshot, and component context for the selected node. This is the primary tool for implementing Figma designs. If Code Connect mappings exist for components in the selection, it returns real component snippets instead of generated code.
Output is a reference, not final code — always adapt to project conventions.
get_design_context(fileKey=":fileKey", nodeId="1-2")
get_screenshot ← use second (visual validation)
Returns a screenshot of the selected node. Use immediately after get_design_context — this is the source of truth for pixel-perfect validation. Keep it open throughout implementation.
get_screenshot(fileKey=":fileKey", nodeId="1-2")
get_metadata ← use when response is too large
Returns a sparse XML tree with layer IDs, names, types, positions, and sizes. Does NOT return code or full design data. Use this when get_design_context truncates — identify child node IDs from the tree, then call get_design_context on each child individually.
get_metadata(fileKey=":fileKey", nodeId="1-2")
get_variable_defs
Returns all variables (design tokens) and styles used in the selection: colors, spacing, typography. Useful for mapping Figma tokens to project tokens.
Canvas Write Tools (remote only)
use_figma
General-purpose write-to-canvas. Creates, edits, or inspects any object in a Figma Design file. Powers the figma-use skill. Requires edit access to the file.
generate_diagram
Creates a FigJam diagram from Mermaid syntax or natural language. Supports flowchart, Gantt, sequence, ERD, state, architecture diagrams.
generate_figma_design
Captures live web UI (localhost, staging, prod) as editable design layers in Figma. Select-client only (Claude Code, Cursor, VS Code, Augment, Copilot CLI).
create_new_file
Creates a blank Figma Design or FigJam file in the user's drafts. Requires planKey from whoami. Needed before use_figma when no file exists.
upload_assets
Uploads PNG, JPG, GIF, WebP to a Figma file. For SVG — use use_figma directly.
get_libraries
Returns subscribed team/org libraries and available community UI kits for the current file.
FigJam / Make
get_figjam
Converts a FigJam board to XML. Use for reading architecture diagrams, flowcharts, and brainstorm boards into code context.
Code Connect Tools
These 5 tools power the figma-code-connect-components skill. Usually invoked automatically by the skill, not manually.
| Tool | Purpose |
|---|---|
add_code_connect_map |
Save a Figma node → code component mapping |
get_code_connect_map |
Retrieve existing mappings for selected nodes |
get_code_connect_suggestions |
AI-suggested component matches (Figma-triggered) |
get_context_for_code_connect |
Get component metadata for generating .figma.tsx files (Figma-triggered) |
send_code_connect_mappings |
Confirm + publish suggested mappings (requires Org/Enterprise plan) |
See figma-code-connect-plan-requirements for the MCP vs CLI plan requirements.
Auth / Identity
whoami (remote only)
Returns the authenticated user's identity and plan keys. Use it to get planKey for create_new_file.
URL Parsing
Extract fileKey and nodeId from a Figma URL:
https://figma.com/design/:fileKey/:fileName?node-id=1-2
→ fileKey = segment after /design/
→ nodeId = node-id query param (convert "-" to ":" if needed for desktop MCP)
The desktop MCP (figma-desktop) does not require fileKey — it reads from the currently open file in the desktop app.