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
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/figma-to-elementor
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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
# 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.
- `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: [...] }` (flex) or `section` + `column` on v3 sites
- Write with `respira_build_page` (whole frame → page) or `respira_inject_builder_content` (append sections); `respira_convert_html_to_builder` is a fallback bridge; `respira_find_element`/`respira_update_element` for refinement.
## Mapping (Figma → Elementor)
**Node type:**
- `TEXT` → `heading` if it reads like a heading (large/bold), else `text-editor`. Infer heading level by font size: ≥48 h1, ≥36 h2, ≥28 h3, ≥20 h4, ≥16 h5, else h6.
- `FRAME`/`GROUP`/auto-layout → `container` (flex). Flatten groups with no fills/strokes/effects; keep groups that carry styling.
- `RECTANGLE`/`ELLIPSE` with an IMAGE fill → `image`; otherwise → styled `container`.
- `VECTOR`/shape → `image` (export from Figma) or `icon`; `LINE` → `divider`.
- `INSTANCE`/`COMPONENT` → treated as a container; flag if it relies on overrides/variants.
**Color:** solid fill → text/background color (+ opacity when <1). Gradient → gradient type (linear/radial), color stops with positions, and an angle computed from `gradientHandlePositions`.
**Box:** `strokes`+`strokeWeight` → border; `cornerRadius`/`rectangleCornerRadii` → border-radius (per-corner when provided); `effects` → box-shadow (offset/blur/spread/color); `opacity` → element opacity.
**Smart widgets (by layer name + structure):** a list whose items each hold a title + body → Accordion; a row that is ≥70% images → Gallery or Carousel (by layer name); a number + label pair → Counter; a row of 2+ icon shapes whose names match platforms → Social Icons. When unsure, fall back to plain containers + widgets.
**Images:** collect IMAGE fills, export from Figma, sideload with `respira_sideload_image`, and set the resulting media on the Elementor image widget/background.
**Design system:** map the frame's distinct fill colors to Elementor global colors (primary/secondary/accent/text) so later edits stay on-brand.
## Execution Workflow
### Phase 1: Read and audit
1. Verify Respira + MCP via `respira_get_site_context`; confirm Elementor is active via `respira_list_plugins`. If not connected, stop and show setup guidance.
2. Read the chosen Figma frame's node tree via the agent's Figma access.
3. Build an inventory: node-type counts, smart-widget candidates, image fills to download, and flagged items (components with overrides, complex vectors/masks, prototyping, gradients beyond linear/radial).
2. Provide the wp-admin/Elementor editor link to the draft.
3. Give a checklist: open in the Elementor editor, check tablet/mobile, confirm images load, test links/buttons, review flagged items, compare against the Figma frame.
## Safety Model
- Read-only Figma analysis and a full plan before any write
- Explicit confirmation before building
- Always writes to a **draft duplicate / new draft** — never an existing live page
- Never auto-publishes
- Snapshot before write when available; rollback path is to delete the draft
- Original Figma file is read-only and never modified
## Honest Disclaimer
This skill rebuilds a Figma frame as an editable Elementor draft page.
