/figma-to-elementor

name: figma-to-elementor
description: "Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 1.2.0
  mcp-server: respira-wordpress
  category: migration

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

**Preserves:**

• Text content, links, and media
• Layout structure and nesting (with junk single-child wrappers collapsed)
• The visual styling listed above, as closely as Elementor's rendering allows

What This Skill Does NOT Do

• **Pixel-perfect recreation** — Elementor renders with the browser box model, not Figma's canvas. Spacing and alignment land close but expect light manual fine-tuning.
• **Figma components with overrides / variants** — instances are flattened to inline content; component logic and variant swapping are flagged, not reproduced.
• **Prototyping and interactions** — Figma's click-throughs, smart-animate, and overlays have no Elementor equivalent and are skipped.
• **Complex vector art, masks, and blend modes** — exported as flattened images where possible, otherwise flagged.
• **Auto-generated responsive breakpoints** — the build targets desktop from the frame; tablet/mobile are noted for manual adjustment unless the design provides explicit responsive frames.
• **Theme builder parts** — headers, footers, archive/single templates are out of scope; this builds page content.
• **Fetching Figma for you without access** — you must have Figma read access available to your agent (see Requirements).

Requirements

• Respira for WordPress plugin installed and connected
• MCP connection active (desktop or WebMCP)
• Elementor active on the target site (to write the page)
• **Figma read access from your agent** — either a connected Figma MCP, or a Figma file/frame URL plus a Figma personal access token you can paste
• Write access to create a draft duplicate with the new Elementor content

Trigger Phrase

• "figma to elementor"

Alternative Triggers

• "build this figma design in elementor"
• "convert figma to elementor"
• "turn my figma frame into an elementor page"
• "rebuild this figma mockup in wordpress with elementor"
• "import figma into elementor"

Source: Figma

Figma exposes a design as a tree of nodes. Read it with whatever Figma access the agent has: a connected Figma MCP, or the Figma REST API (`GET /v1/files/:key/nodes?ids=:id` for the selected frame, `GET /v1/files/:key/images` to export image fills) using a personal access token.

Key node shapes to read:

• `type`: `FRAME`, `GROUP`, `TEXT`, `RECTANGLE`, `ELLIPSE`, `VECTOR`, `LINE`, `COMPONENT`, `INSTANCE`
• `layoutMode` (`HORIZONTAL`/`VERTICAL`/none), `itemSpacing`, `paddingLeft/Right/Top/Bottom`, `primaryAxisAlignItems`, `counterAxisAlignItems`, `layoutSizingHorizontal/Vertical` (`FILL`/`FIXED`/`HUG`)
• `style` for text: `fontFamily`, `fontSize`, `fontWeight`, `lineHeightPx`/`lineHeightPercent`, `letterSpacing`, `textAlignHorizontal`, `textCase`, `textDecoration`
• `fills` (SOLID with `color` + `opacity`; gradients with `gradientStops` + `gradientHandlePositions`), `strokes` + `strokeWeight`, `cornerRadius`/`rectangleCornerRadii`, `effects` (DROP_SHADOW/INNER_SHADOW), `opacity`
• `characters` (text content), and IMAGE fills (mark for download)

Pick one top-level frame at a time. Each direct child of that frame becomes an independently editable Elementor section/container.

Target: Elementor

Respira writes Elementor as a simplified tree of `{ type, widget, settings, elements }`, which the plugin normalizes/validates into real `_elementor_data` (v3 sections/columns or v4 atomic flex containers, auto-detected). You never hand-write raw Elementor JSON — you describe the tree and Respira emits the canonical shape.

• Containers: `{ type: "container", settings: {...}, elements: [...] }`