Skip to main content
Glama
southleft

figma-console-mcp

by southleft

figma_get_component_for_development

Retrieve deep component data—including design tokens, interaction states, and a 2x image—to implement high-fidelity, token-aware UI code from Figma.

Instructions

Get component data optimized for high-fidelity UI implementation. Returns a deep component tree (depth 4) with design tokens (boundVariables), interaction states (reactions), sizing constraints (min/max/layoutSizing), text behavior (autoResize, truncation), Figma slots (named freeform-content regions on a component, with the components each accepts and any min/max limit violations), and design annotations. Automatically includes 2x rendered image. Use when user asks to: 'build this component', 'implement this in React/Vue', 'generate code for', or needs both visual reference and technical specs for production-quality, accessible, token-aware code. For just metadata/descriptions, use figma_get_component. For just image, use figma_get_component_image. For full annotation details, use figma_get_annotations. To resolve variable IDs to names/values, use figma_get_variables.

Input Schema

NameRequiredDescriptionDefault
nodeIdYesComponent node ID to get data for (e.g., '695:313')
fileUrlNoFigma file URL (e.g., https://figma.com/design/abc123). REQUIRED unless figma_navigate was already called.
codebasePathNoPath to target codebase components directory (e.g., '/Users/me/project/src/components'). When provided, scans for existing components and includes a registry in the response to prevent recreating components that already exist. Strongly recommended for design-to-code workflows.
includeImageNoInclude rendered image for visual reference (default: true)

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.46.0

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are supplied, so the description carries the full burden and does real work: it discloses a fixed tree depth of 4, that a 2x rendered image is included automatically, and that slot output surfaces min/max limit violations rather than failing. It does not state permission requirements or how large the response can get for big components, which is the one gap for an annotation-free tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with purpose, then payload, then triggers, then routing — a clean information hierarchy. The long parenthetical enumerating slot contents is heavy, but every clause adds discriminating detail. Slightly compressed for its length, though nothing is truly wasted.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema and no annotations, the description compensates fully: it enumerates the return payload category by category, notes the embedded image, and explains how codebasePath alters the response with a component registry. An agent knows what comes back and when to prefer another tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all four parameters are already documented inline, including the fileUrl/figma_navigate prerequisite and codebasePath's component-registry scan. The description adds no meaning beyond that — 'Automatically includes 2x rendered image' merely restates includeImage's default:true, and codebasePath is never mentioned in the prose. Baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Get component data') and immediately qualifies the scope with 'optimized for high-fidelity UI implementation.' It then enumerates the exact payload (boundVariables, reactions, sizing constraints, slots, annotations), which lets an agent distinguish it from figma_get_component and figma_get_component_details without opening a schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit trigger phrases ('build this component', 'implement this in React/Vue', 'generate code for') plus four named alternatives each with the condition that selects them (figma_get_component for metadata, figma_get_component_image for image-only, figma_get_annotations for full annotation detail, figma_get_variables for ID resolution). This is the full when/when-not/alternative triad.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools