---
title: "Figma MCP Server — Tool Reference"
aliases: [figma-mcp-tools, figma-mcp-api]
tags: [figma, mcp, tools, reference]
sources:
  - "raw/Tools and prompts  Developer Docs.md"
  - "raw/Guide to the Figma MCP server.md"
created: 2026-05-13
updated: 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.
