Get Figma design (simplified)
get_figma_designFetch a Figma file or specific node and get a compact tree with layout, styles, semantic roles, and Tailwind class suggestions to prepare for React code generation.
Instructions
Fetch a Figma file or a specific node (from a URL or file key) and return a compact, LLM-friendly tree with layout, style, semantic role hints, and suggested Tailwind classes. Use this FIRST before generating any React code.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | Limit tree depth fetched from Figma to save tokens (e.g. 3-6). | |
| format | No | 'outline' (default) is a compact indented text tree — ~half the tokens of JSON. 'json' returns minified JSON when you need to parse it programmatically. | outline |
| figmaUrl | Yes | Figma URL (with ?node-id=... to target a frame) or a bare file key. | |
| pruneWrappers | No | Hoist away pass-through wrapper frames that add no styling or layout. | |
| collapseRepeats | No | Collapse runs of look-alike siblings (table rows, list items) into one node with a repeat count. Big token saver. | |
| includeTailwind | No | Include suggested Tailwind classes per node. |