---
title: "Figma MCP Server — Tools Reference"
aliases: [figma-mcp-tools, figma-tools-api]
tags: [figma, mcp, tools, code-connect, design-to-code]
sources: [raw/Tools and prompts  Developer Docs 1.md, raw/Tools and prompts  Developer Docs.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP Server — Tools Reference

Complete reference for all 18 tools exposed by the Figma MCP server. Some tools are **remote only** (require the remote Figma MCP server, not the desktop Dev Mode server).

## Tool Summary Table

| Tool | Remote Only | Supported Files | Purpose |
|------|-------------|-----------------|---------|
| `add_code_connect_map` | No | Figma Design | Map Figma node → code component |
| `create_new_file` | Yes | None required | Create blank Design or FigJam file |
| `generate_diagram` | Yes | None required | FigJam diagram from Mermaid/natural language |
| `generate_figma_design` | Yes (select clients) | Figma Design | Push live browser UI as design layers |
| `get_code_connect_map` | No | Figma Design | Retrieve node-to-code mappings |
| `get_code_connect_suggestions` | No | Figma Design | Auto-suggest Code Connect mappings |
| `get_context_for_code_connect` | Yes | Figma Design | Fetch component metadata for template generation |
| `get_design_context` | No | Design, Make | Design context → code (React+Tailwind by default) |
| `get_figjam` | No | FigJam | Convert FigJam diagrams to XML |
| `get_libraries` | Yes | Figma Design | List subscribed + available design libraries |
| `get_metadata` | No | Figma Design | Sparse XML: layer IDs, names, types, positions |
| `get_screenshot` | No | Design, FigJam | Screenshot selection (preserve layout fidelity) |
| `get_variable_defs` | No | Figma Design | Colors, spacing, typography tokens |
| `search_design_system` | Yes | Figma Design | Search components/variables/styles by text |
| `send_code_connect_mappings` | No | Figma Design | Confirm suggested Code Connect mappings |
| `upload_assets` | Yes | Figma Design | Upload PNG/JPG/GIF/WebP (max 10MB each) |
| `use_figma` | Yes | Design, FigJam | General-purpose write to Figma (create/edit/delete) |
| `whoami` | Yes | None required | Return authenticated user identity + plans |

## Read Tools (Design → Code)

### `get_design_context`
Primary tool for design-to-code. Returns full styling info for selected layers. Default output: **React + Tailwind**.

- Override framework via prompt: `generate in Vue`, `generate in plain HTML + CSS`, `generate in iOS`
- Use with Code Connect to map to your actual components: `using components from src/components/ui`
- Desktop server: works on selection. Remote server: requires frame/layer link.

### `get_metadata`
Lightweight alternative to `get_design_context`. Returns only layer IDs, names, types, positions, sizes as sparse XML.

- Use for large designs where full `get_design_context` exceeds token limits
- Agent can then call `get_design_context` on just the sub-sections it needs

### `get_screenshot`
Takes a screenshot of your Figma selection. Preserves layout fidelity in generated code.

- Keep enabled unless concerned about token limits

### `get_variable_defs`
Returns design tokens (colors, spacing, typography) from your selection. Use to extract variable names and values before implementing.

### `get_figjam`
Converts FigJam diagrams to XML (includes screenshots). Similar to `get_metadata` but for FigJam boards.

## Code Connect Tools

### `get_code_connect_map`
Returns mapping of selected Figma instance node IDs → code components.

Each entry contains:
- `componentName` — component name in codebase
- `source` — file path or URL
- `snippet`, `snippetImports`, `snippetNestedFunctions` — code snippet data
- `version` — mapping source (UI vs CLI)
- `label` — framework label (e.g. `React`)

Multiple instances of the same component → separate entries. Nested components included.

### `get_code_connect_suggestions`
Figma-prompted auto-detection: suggests Figma component → codebase component mappings.

### `send_code_connect_mappings`
Confirms suggestions from `get_code_connect_suggestions`. Called after reviewing suggestions.

### `add_code_connect_map`
Manually add a mapping: Figma node ID → code component. Improves design-to-code output quality.

### `get_context_for_code_connect` (remote only)
Fetches structured metadata for a component: properties, variants, descendant tree, text nodes. Used internally by the `figma-code-connect` skill — not for direct user invocation.

## Write Tools (Code → Canvas)

### `use_figma` (remote only, beta — free during beta)
General-purpose write tool. Creates, edits, deletes, or inspects objects in Design files and FigJam boards.

**Figma Design:** pages, frames, components, variants, variables, styles, text, images.
**FigJam:** stickies, sections, connectors, shapes, tables, code blocks.

Best used with a skill:
- [[wiki/claude-code/figma-mcp-skills|figma-use skill]] — for Figma Design workflows
- [[wiki/claude-code/figma-mcp-skills|figma-use-figjam skill]] — for FigJam workflows

### `generate_figma_design` (remote only, select clients)
Captures live browser UI as editable Figma design layers.

- Sends to: new file, existing file, or clipboard
- Respects seat type (edit permission required for existing files)
- See [[wiki/claude-code/figma-mcp-code-to-canvas|Code to Canvas]] for full workflow

### `upload_assets` (remote only)
Upload images (PNG, JPG, GIF, WebP) into a Figma Design file.

- Max 10MB per asset
- Provide node URL → image becomes fill for that node
- No URL → new frames created with images as fills

## Utility Tools

### `create_new_file` (remote only)
Creates blank Design or FigJam file in authenticated user's drafts. Multi-plan users are asked which team/org.

See [[wiki/claude-code/figma-skill-create-new-file|figma-create-new-file skill]] for the full workflow (includes `whoami` to resolve `planKey`).

### `generate_diagram` (remote only, beta — free during beta)
Generates interactive FigJam diagrams from Mermaid syntax or natural language.

**Supported types:** Flowchart, Gantt, State, Sequence, Architecture, ERD

- No Mermaid knowledge needed — describe in natural language, agent generates syntax
- Can create in new or existing FigJam file
- Include `"Use the Figma MCP generate_diagram tool"` in prompt to ensure tool is invoked

### `get_libraries` (remote only)
Returns two lists for a Figma file:
1. **Subscribed** — libraries currently added to the file
2. **Available** — community UI kits + org libraries

Used alongside `search_design_system`.

### `search_design_system` (remote only)
Full-text search across all connected design libraries. Finds components, variables, and styles. Returns matching assets so agent reuses existing elements instead of creating from scratch.

### `whoami` (remote only)
Returns: email address, all plans the user belongs to, seat type per plan. Used to resolve `planKey` before `create_new_file`.

## Key Takeaways

- **18 tools total** — 9 read-only, 3 write (use_figma, generate_figma_design, upload_assets), 3 utility (create_new_file, generate_diagram, whoami), 3 Code Connect
- **Remote-only tools** require the Figma plugin (not the desktop Dev Mode server): use_figma, generate_figma_design, generate_diagram, create_new_file, get_libraries, search_design_system, get_context_for_code_connect, upload_assets, whoami
- **Design-to-code flow:** `get_metadata` (outline) → `get_design_context` (styling) → `get_screenshot` (layout fidelity) → implement
- **Code Connect** is the key to high-quality output — maps Figma nodes to actual codebase components; set up with `add_code_connect_map` or auto-suggest with `get_code_connect_suggestions`
- **`use_figma` and `generate_diagram`** are currently free in beta but will become paid features
- **Desktop server** exposes 5 tools only; **remote server** unlocks all 18
- For large frames, use `get_metadata` first to avoid token overload, then selectively call `get_design_context` on sub-sections

## Related Articles

- [[wiki/claude-code/figma-mcp-guide|Figma MCP Guide]] — server overview, remote vs desktop, client support matrix
- [[wiki/claude-code/figma-mcp-setup|Figma MCP Setup]] — install remote plugin or enable desktop Dev Mode server
- [[wiki/claude-code/figma-mcp-skills|Figma MCP Skills]] — all 8 skills that wrap these tools
- [[wiki/claude-code/figma-mcp-code-connect|Code Connect Integration]] — full Code Connect setup guide
- [[wiki/claude-code/figma-mcp-code-to-canvas|Code to Canvas]] — `generate_figma_design` workflow
- [[wiki/claude-code/figma-skill-create-new-file|figma-create-new-file Skill]] — `create_new_file` + `whoami` flow
- [[wiki/claude-code/figma-mcp-avoid-large-frames|Avoid Large Frames]] — when to use `get_metadata` vs `get_design_context`

## Sources

- `raw/Tools and prompts  Developer Docs 1.md` (captured from developers.figma.com/docs/figma-mcp-server/tools-and-prompts/)
- `raw/Tools and prompts  Developer Docs.md` (duplicate capture, same URL)
