/figma-to-divi

name: figma-to-divi
description: "Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected) and writes to a draft, so nothing live is touched."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 1.1.0
  mcp-server: respira-wordpress
  category: migration

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 spacing from Figma padding and item spacing
• Image fills downloaded from Figma and sideloaded into the WordPress media library
• Inset rounded "panel" sections (a signature of modern SaaS designs) via section max-width, radius and background

**Preserves:** text content, links and media; layout structure and nesting; the visual styling above as closely as Divi's rendering allows.

What This Skill Does NOT Do

• **Pixel-perfect recreation** — Divi renders with the browser box model, not Figma's canvas; expect light manual fine-tuning
• **Figma components with overrides / variants** — flattened to visible content and flagged
• **Prototyping and interactions** — no Divi equivalent, skipped
• **Complex vector art, masks, blend modes** — flattened to images where possible, otherwise flagged
• **Auto-generated responsive breakpoints** — the build targets the desktop frame; tablet/phone passes are manual unless the file has explicit responsive frames
• **Divi global colors registration** — the palette is applied consistently across the page; promoting it into Divi's own global colors is left as a flagged manual step
• **Theme Builder templates** — headers/footers/archive templates are out of scope; this builds page content

Requirements

• Respira for WordPress plugin installed and connected; Divi active (4 or 5)
• MCP connection active
• **Figma read access from your agent** — a connected Figma MCP, or a Figma file/frame URL plus a personal access token
• Write access to create a draft with the new Divi content

Trigger Phrase

• "figma to divi"

Alternative Triggers

• "build this figma design in divi"
• "convert figma to divi 5"
• "turn my figma frame into a divi page"

Source: Figma

Same read model as every figma-to-* skill: read the selected frame's node tree via the agent's Figma access (Figma MCP, or REST `GET /v1/files/:key/nodes?ids=:id` plus `GET /v1/files/:key/images` for image fills). Key properties: node `type`, `layoutMode`/`itemSpacing`/`padding*`/axis alignment, text `style`, `fills`/`strokes`/`cornerRadius`/`effects`/`opacity`, `characters`, IMAGE fills.

Target: Divi

Call `respira_get_builder_info` first. On Divi 5 the write mode is native `divi/*` blocks and `respira_build_page` expects a nested structure: `divi/section > divi/row > divi/column > modules` (`divi/heading`, `divi/text`, `divi/button`, `divi/image`, `divi/blurb`, `divi/accordion`, `divi/gallery`, `divi/number-counter`, ...). Fetch per-module attribute schemas from the endpoint `get_builder_info` returns before authoring, so no setting is silently dropped. On Divi 4 the same simplified tree is emitted as shortcodes by Respira — the mapping below is identical.

**Mapping (Figma → Divi):**

• `TEXT` → `divi/heading` (≥48px h1, ≥36 h2, ≥28 h3, ≥20 h4, else body) or `divi/text`
• Top-level frame → `divi/section`; HORIZONTAL auto-layout child → `divi/row` with one `divi/column` per child; VERTICAL → modules stacked in one column
• IMAGE fill → `divi/image` (sideloaded first); `LINE` → `divi/divider`
• FAQ stack → `divi/accordion` + `divi/accordion-item`; icon+title+body card → `divi/blurb`; number+label → `divi/number-counter`
• Buttons: real `divi/button` modules; for pixel-close adjacent button pairs, a `divi/text` module with styled inline links is an accepted fallback (flag it in the report)
• Inset rounded panels: section `background_color` + page-level custom CSS (max-width, margin auto, border-radius) via `respira_update_page` `custom_css`
• Typography/colors/spacing: simplified settings (`heading_font_size`, `font_color`, `background_color`, `padding`, ...) per the inline schemas

Execution Workflow

**Phase 1 — Read and audit:** verify the site and Divi via `respira_get_site_context` + `respira_get_builder_info`; read the frame's node tree; inventory node types, smart-module candidates, images to download, flagged items.

**Phase 2 — Build plan:** present frame → page title, a mapping summary table, fl