figma-to-elementor

# Figma to Elementor Rebuilds a Figma frame as a real, editable Elementor page on your WordPress site. Reads the Figma node tree (layers, auto-layout, text, colors, images), maps each node to its closest Elementor widget or container, generates a build plan for approval, and writes clean Elementor JSON to a draft duplicate so nothing live is touched. Use this skill whenever someone wants to turn a Figma design into an Elementor page, build a Figma mockup in Elementor, or hand a design off to WordPress without rebuilding it by hand. ## What This Skill Does Figma and Elementor describe a layout in very different ways. Figma stores a tree of nodes (frames, text, shapes, images) with auto-layout, constraints, and design tokens; Elementor stores a nested JSON tree in `_elementor_data` of sections/columns (or flex containers) and widgets. This skill bridges that gap by reading every Figma node, understanding its role, and recreating it as the right Elementor element with matching styling. **Handles:** - Frames and auto-layout → Elementor flex containers (or section/column on older sites): direction, gap, padding, alignment - Text nodes → Heading (level inferred from font size) or Text Editor widgets - Rectangles/ellipses with image fills → Image widgets; plain shapes → containers; vectors/icons → Image or Icon - Lines → Divider widgets - Repeated card/list patterns → recognised by layer name + structure: FAQ → Accordion, image rows → Gallery/Carousel, number+label → Counter, ic...