167 lines
8.9 KiB
Markdown
167 lines
8.9 KiB
Markdown
---
|
|
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)
|