Figma to Gutenberg

Rebuilds a Figma frame as a real, editable block-editor page — no page builder required. Reads the Figma node tree (layers, auto-layout, text, colors, images), maps each node to core Gutenberg blocks, registers the frame's palette in the site's Global Styles so the design system carries over, and writes to a draft so nothing live is touched. Works on any WordPress 6.6+ site, including block themes.

What This Skill Does

Handles:

• Frames and auto-layout → core/group with flex/stack layout (preferred over core/columns for row layouts — groups survive later editing and re-reading more faithfully)
• Text nodes → core/heading (level inferred from font size) or core/paragraph
• Rectangles/ellipses with image fills → core/image; lines → core/separator; buttons → core/buttons + core/button
• Repeated patterns by layer name + structure: FAQ stacks → core/details, image rows → core/gallery, quote-shaped blocks → core/quote
• Typography (size, weight, line-height, letter-spacing, alignment) via block supports; families noted for the theme
• Colors: solid fills and gradients on blocks; the frame's distinct palette registered as named design tokens in Global Styles (respira_create_design_token) so the page references tokens the whole site can reuse
• Spacing from Figma padding/item spacing via block gap and padding supports; per-corner radius and shadows where block supports allow
• Image fills downloaded from Figma and sideloaded into the media library

Preserves: text content, links and media; layout structure and nesting; the page stays fully hand-editable in the block editor and Site Editor afterwards.

What This Skill Does NOT Do