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) so later edits stay on-brand
• ACSS awareness: when Automatic.css is installed (respira_bricks_detect_acss), map spacing/typography onto ACSS utility classes instead of raw values
• Image fills downloaded from Figma and sideloaded into the media library

Preserves: text content, links and media; layout structure and nesting; visual styling as closely as Bricks' rendering allows — with the styling held in classes and tokens.