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
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | Component node ID to get data for (e.g., '695:313') | |
| fileUrl | No | Figma file URL (e.g., https://figma.com/design/abc123). REQUIRED unless figma_navigate was already called. | |
| codebasePath | No | Path 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. | |
| includeImage | No | Include rendered image for visual reference (default: true) |