obsidian/wiki/claude-code/figma-mcp-tools-reference.md

title	aliases	tags	sources	created	updated
Figma MCP Server — Tools Reference	figma-mcp-tools figma-tools-api	figma mcp tools code-connect design-to-code	raw/Tools and prompts Developer Docs 1.md raw/Tools and prompts Developer Docs.md	2026-05-15	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 — for Figma Design workflows
• wiki/claude-code/figma-mcp-skills — 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 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 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 — server overview, remote vs desktop, client support matrix
• wiki/claude-code/figma-mcp-setup — install remote plugin or enable desktop Dev Mode server
• wiki/claude-code/figma-mcp-skills — all 8 skills that wrap these tools
• wiki/claude-code/figma-mcp-code-connect — full Code Connect setup guide
• wiki/claude-code/figma-mcp-code-to-canvas — generate_figma_design workflow
• wiki/claude-code/figma-skill-create-new-file — create_new_file + whoami flow
• wiki/claude-code/figma-mcp-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)