figma-to-bricks

# Figma to Bricks Rebuilds a Figma frame as a real, editable Bricks page. Reads the Figma node tree (layers, auto-layout, text, colors, images), maps each node to its closest Bricks element, scaffolds BEM global classes so styling stays reusable instead of inline, imports the frame's palette into the Bricks color system, and writes to a draft so nothing live is touched. ## What This Skill Does Figma stores a tree of nodes with auto-layout; Bricks stores a flat element list with parent/child references, global classes, and a real design-token system. This skill maps between them and leans on what makes Bricks special: the styling lands in reusable global classes and the Bricks palette, not in per-element value copies. **Handles:** - Frames and auto-layout → `section` / `container` / `block` with flex direction, gap, padding and alignment carried across - Text nodes → `heading` (level inferred from font size) or `text-basic` / `rich text` - Rectangles/ellipses with image fills → `image`; plain shapes → styled containers; lines → `divider` - Repeated patterns by layer name + structure: FAQ stacks → `accordion`, image rows → `image-gallery` or `carousel`, number+label pairs → `counter`, platform icon rows → `icon` groups - Typography and colors as BEM global classes (`respira_bricks_scaffold_bem`) referencing tokens, not inline values - **The frame's palette imported into the Bricks color palette** (`respira_bricks_import_design_tokens` / `respira_update_bricks_color_palette`...