Skip to content

Available Tools Reference

When to Use

Look up a specific tool when you need to understand what it returns, when to trigger it explicitly, or what prompt phrasing activates it. Agents call most tools automatically — explicit triggers are for precision.

Items

get_design_context

Description: Retrieves structured design representation from a frame or selection. The primary tool for code generation. Default output targets React + Tailwind but is customizable via prompts.

Parameters: | Parameter | Type | Notes | |-----------|------|-------| | nodeId / link | string | Frame link or node ID; omit when using desktop selection | | clientFrameworks | string | Optional; matches Code Connect setup labels (e.g., React, Vue) |

Returns: Structured representation of layout, components, spacing, typography, and nested component data. Includes <CodeConnectSnippet> wrappers for Code Connect-linked components.

Example prompts: 

"Implement my current Figma selection"
"Generate this frame in Vue: [figma link]"
"Generate using components from src/components/ui: [figma link]"
Gotchas: - Large frames may exceed context window — use get_metadata first to identify which sub-nodes to target - Default output is React + Tailwind regardless of your project stack; always specify your framework

get_variable_defs

Description: Returns all design tokens (variables and styles) used in the current selection: colors, spacing, typography, border radius. Use this to extract token names for use in generated code.

Parameters: | Parameter | Type | Notes | |-----------|------|-------| | nodeId / link | string | Target frame or selection | | type | string | Optional; filter by COLOR, FLOAT, STRING, BOOLEAN |

Returns: Token names and their values, scoped to what's used in the selection.

Example prompts: 

"List color and spacing variables used in this frame: [link]"
"Get variable names and values for my current selection"
Gotchas: - Only returns variables defined in Figma's Variables panel — unlinked color fills are not returned - Use token names in generated code, not raw values, to maintain design system alignment

get_code_connect_map

Description: Retrieves mappings between Figma node IDs and corresponding code components. Returns an object where each key is a Figma node ID with codeConnectSrc (file path or URL) and codeConnectName (component name).

Returns: 

{
  "nodeId:123": {
    "codeConnectSrc": "src/components/Button.tsx",
    "codeConnectName": "Button"
  }
}

Example prompts: 

"Generate my Figma selection using components from my codebase"
"What codebase components are mapped to this design?"
Gotchas: - Returns empty if Code Connect is not configured — set up Code Connect before expecting component reuse - Requires Code Connect enabled in the desktop server inspect panel settings

add_code_connect_map

Description: Creates new mappings between Figma node IDs and code components. Used by agents to record component connections after get_code_connect_suggestions proposes them.

Example prompts: 

"Connect this Button component to src/components/Button.tsx"
Gotchas: - Typically called automatically after get_code_connect_suggestions — rarely invoke manually - Requires write access to the Figma file

get_code_connect_suggestions

Description: Analyzes Figma components and your codebase to detect and suggest component mappings. Prompted automatically by Figma's system during Code Connect workflows.

Gotchas: - Works best when component names in Figma match component names in code - Pair with send_code_connect_mappings to confirm suggestions

send_code_connect_mappings

Description: Confirms Code Connect mapping suggestions generated by get_code_connect_suggestions. Finalizes the mappings into Code Connect.

Gotchas: - Always review suggested mappings before confirming — auto-detection can mis-match similarly named components

get_screenshot

Description: Captures a visual screenshot of selected Figma nodes. Provides layout fidelity reference alongside structured design context for improved code generation accuracy.

Supported formats: Figma Design, FigJam

Example prompts: 

"Get a screenshot of my selection for reference"
"Capture the card component visually"
Gotchas: - Does not replace get_design_context — use together for highest accuracy - Large frames generate large images; pair with targeted get_design_context calls on sub-sections

create_design_system_rules

Description: Generates a rule file that aligns agent behavior with your design system and technology stack. Produces persistent instructions covering component preferences, token usage, naming conventions, and layout primitives. Save output to rules/ or instructions/ directory.

Returns: Markdown or plain text rule file content.

Example prompts: 

"Create design system rules for this project and save to rules/figma-rules.md"
"Generate agent rules for our React + Tailwind design system"
Gotchas: - Run this once per project, not per session — rules persist as a file your agent reads on startup - Review generated rules before committing — customize for project-specific patterns the agent cannot infer

get_metadata

Description: Returns sparse XML of a selection with layer IDs, names, types, positions, and sizes. Use when get_design_context exceeds token limits — identify target node IDs here, then call get_design_context on specific nodes.

Supported formats: Figma Design

Returns: XML structure with node hierarchy and bounding box data.

Example prompts: 

"Get metadata for this frame to understand its structure: [link]"
"What are the layer IDs in this design?"
Gotchas: - Does not include visual styling, colors, or component details — use get_design_context for full data - Multiple selections and pages are supported in a single call

get_figjam

Description: Extracts FigJam diagram content as XML metadata plus node screenshots. Use for architecture diagrams, flowcharts, and planning artifacts embedded in FigJam files.

Supported formats: FigJam

Example prompts: 

"Extract the user flow diagram from this FigJam: [link]"
"Get the architecture diagram content for reference"
Gotchas: - Only works on FigJam files — not Figma Design files - Large diagrams may produce verbose XML; ask the agent to summarize rather than implement directly

generate_figma_design

Description: Sends UI code or browser-rendered UI to Figma as design layers. Allows capture of live browser UI into Figma files. Claude Code + remote server only.

Supported formats: Figma Design (creates or edits files)

Example prompts: 

"Start a local server and capture the current UI to a new Figma file"
"Capture the login page to [figma file URL]"
Gotchas: - Available only in Claude Code with the remote server — not available in VS Code, Cursor, or desktop server - Respects your seat type permissions on the target file

generate_diagram

Description: Creates FigJam diagrams from Mermaid syntax or natural language descriptions. Supports flowcharts, Gantt charts, state diagrams, and sequence diagrams.

Supported diagram types: Flowchart, Gantt, State, Sequence

Example prompts: 

"Create a flowchart for our user authentication flow"
"Generate a sequence diagram for the API request lifecycle"
"Build a Gantt chart for this project timeline"
Gotchas: - Outputs to FigJam, not Figma Design — requires a FigJam file target - Complex Mermaid syntax may not fully translate — verify output in FigJam

whoami

Description: Returns authenticated user details: email address, plan memberships, and seat types. Use to verify which account is connected and confirm access tier before complex workflows.

Availability: Remote server only

Example prompts: 

"Who am I in Figma?"
"What plan and seat type do I have?"
Gotchas: - Not available on the desktop server — remote server only - If this returns unexpected account details, re-authenticate via /mcp → Authenticate

Common Mistakes

  • Invoking get_design_context on enormous frames — check token usage; use get_metadata first to scope down
  • Skipping get_screenshot — visual reference alongside structured context produces more accurate layout code
  • Treating get_variable_defs as optional — skipping it causes agents to hardcode values instead of using tokens

See Also