figma_read
Extract node trees, styles, tokens, and screenshots from Figma to understand layouts before generating code.
Instructions
READ design data from Figma — extract node trees, colors, typography, spacing, and screenshots. Use to understand an existing design before generating code, or to inspect what's on the canvas.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| depth | No | Tree depth for get_design/get_selection. Number (default 10) or 'full' for unlimited. Higher = more detail but larger output. | |
| scale | No | Export scale for screenshot (default 1). | |
| detail | No | Detail level for get_design/get_selection: 'minimal' (~5% tokens), 'compact' (~30%), 'full' (default, 100%). Use minimal for large files. | |
| format | No | Image format for export_image: 'png' (default) or 'jpg'. | |
| nodeId | No | Target node ID (optional — omit to use current selection). | |
| nodeName | No | Target node name (alternative to nodeId). | |
| operation | Yes | ── Design-to-code (use these for code generation) ── get_design_context: AI-optimized payload for a node — flex layout, token-resolved colors, typography with style names, component instances with variant properties. Best single call for design→React/Vue/Swift code. get_css: ready-to-use CSS string for a single node — background, flex, border, radius, shadow, typography, opacity, transform. get_component_map: list every component instance in a frame with componentSetName, variantLabel, properties, and suggestedImport path. Use to scaffold import statements. get_unmapped_components: find component instances that have no description in Figma (likely no code mapping yet). Prompts AI to ask user for correct import paths. ── Inspect ── get_node_detail: structured properties for a single node — fills, bound variables (resolved to name+value), style refs (resolved to name+hex), instance overrides (full field list), componentSetName/variantLabel. get_selection: full design tree of selected node(s) + design tokens summary. get_design: full node tree for a frame/page (depth param: number or 'full'). get_page_nodes: top-level frames on the current page. ── Styles & tokens ── get_styles: all local paint, text, effect, grid styles. get_variables: all local Design Token variables — collections, modes, resolved values. get_local_components: component listing with descriptions + variant property definitions. ── Export ── screenshot: PNG of a node — displays inline in Claude Code. export_svg: SVG markup string. export_image: base64 PNG/JPG for saving to disk (scale param for resolution). ── Search ── search_nodes: filter by type, namePattern (wildcard *), fill color, fontFamily, fontSize, hasImage, hasIcon. scan_design: structured summary of large frames — all text, colors, fonts, images, icons, sections. ── Viewport ── get_viewport: current viewport center, zoom, bounds. | |
| sessionId | No | Target a specific Figma file/tab when multiple are connected. Omit to auto-select. | |
| includeHidden | No | Include invisible nodes (visible:false) in results. Default false — hidden layers are skipped to reduce noise. |