figma-to-divi

# 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 spac...