Figma to Divi

Rebuilds a Figma frame as a real, editable Divi page. Reads the Figma node tree (layers, auto-layout, text, colors, images), maps each node to its closest Divi module inside a proper section > row > column structure, and writes native Divi content to a draft so nothing live is touched. Works on Divi 5 (block storage) and Divi 4 (shortcode storage); Respira detects the generation and emits the right format.

What This Skill Does

Figma stores a tree of nodes with auto-layout and design tokens; Divi stores sections containing rows of columns containing modules. This skill bridges the two: every Figma node is read, understood, and recreated as the right Divi element with matching styling.

Handles:

• Top-level frames → Divi sections; horizontal auto-layout → rows with matching column counts; vertical auto-layout → stacked modules in a column
• Text nodes → Heading module (level inferred from font size) or Text module
• Rectangles/ellipses with image fills → Image modules; plain shapes → styled columns/sections; lines → Divider
• Repeated patterns by layer name + structure: FAQ stacks → Accordion, image rows → Gallery, number+label pairs → Number Counter, icon+title+body cards → Blurb, platform icon rows → Social Media Follow
• Typography (family, size, weight, line-height, letter-spacing, alignment) via Divi's heading/body type controls
• Colors (solid fills with opacity, linear/radial gradients), borders, per-corner radius, box shadows
• Section/row spacing from Figma padding and item spacing
• Image fills downloaded from Figma and sideloaded into the WordPress media library
• Inset rounded "panel" sections (a signature of modern SaaS designs) via section max-width, radius and background