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, icon rows → Social Icons
• Typography (font family, size, weight, line-height, letter-spacing, transform, alignment)
• Colors (solid fills with opacity; linear/radial gradients with stops and angle)
• Spacing (padding, gaps), borders, border-radius (per-corner), box shadows, opacity
• Image fills downloaded from Figma and sideloaded into the WordPress media library
• The Figma color palette mapped to Elementor global colors so the design system carries over