No code module holding the design
Every layer becomes a Divi module with its settings filled in: fills, borders, corner radius, padding, shadows, and type down to letter spacing.
Figma to Divi 5
Your Figma frame, as a Divi 5 page you can edit.
Paste a Figma frame link. FrameKit builds the page from Divi 5's own modules: headings, text, buttons, blurbs, accordions, tabs, pricing tables, contact forms. Open it in the Visual Builder and change anything, like any page you built by hand.
No Figma file yet? Start from the Divi 5 starter file. Works with the Divi theme or the Divi Builder plugin; Divi 4 sites get shortcodes instead.
Perseverance · HomeFigma → Divi 5
- header · template-part→Theme Builder header
- site-branding→Site Logo / Title
- wp-block-navigation × 6→Menu
- wp-block-cover · hero→section + background
- "Perseverance is still driving."→heading · H1
- "Where is Perseverance?"→button
- columns · stats→Number Counter
- wp-block-tabs→Tabs
- group · newsletter→Contact Form
Starter Figma file
Open the starter file in Figma Start from a Figma file built for Divi 5.
The Divi 5 Skeleton DS is a Figma file drawn in the layout FrameKit reads best. Duplicate it, swap in your colours, type and copy, then paste a frame link into FrameKit.
Why Divi 5 users need this
Divi 5 is new. Your Figma files aren't.
Divi 5 stores pages in a new block format, and many Figma-to-WordPress tools don't support Divi at all. FrameKit writes Divi 5's format directly, so the page opens in the Visual Builder as native modules.
Your client can edit it
Headings, buttons and menus open in Divi's usual settings panels. Nobody has to touch HTML to change a price or a headline.
Unlimited sites, no credits
FrameKit runs inside your WordPress site. Nothing is metered, so a 40-page site costs the same as a landing page.
What becomes what
It knows a pricing table when it sees one.
FrameKit reads a layer by what it holds, not just what it's called. 19 common patterns become Divi 5 modules, styled the way you drew them.
| You draw | Divi 5 gets | How FrameKit spots it |
|---|---|---|
| Accordion | Accordion | title rows with a chevron or plus icon, the open item's content below |
| Tabs | Tabs | a row of short labels over a panel, the open one drawn differently |
| Menu | Menu | short link texts side by side in the header or footer |
| Logo | Site Logo / Title | a layer named logo in the header or footer |
| Testimonial | Testimonial | a quote with the name and role under it, at most one small avatar |
| Social icons | Social Media Follow | small icons named after networks |
| Icon list | Icon List | rows of an icon before one short text |
| Stats | Number Counter | big numbers like "98%" over short labels |
| Slider | Slider | a row of photos or slides running past its box, or over dots |
| Form | Contact Form | 2+ input boxes and a submit button; field types from their words |
| Pricing plan | Pricing Tables | a name, a price like "$19" or "€49/month", 2+ short features and one button |
| Call to action | Call To Action | a filled box with a heading, short copy and one button |
| Team member | Team Member | a photo, a short name and role, maybe a bio and social icons |
| Breadcrumbs | Breadcrumbs | short texts with "/" or "›" between them |
| Card | styled Group | an image, then a few texts and up to two buttons in one box |
| Icon box | styled Group | a small icon, a title and copy |
| Logo strip | group of images | 4+ small logos side by side, no text |
| Video | the still image | a photo with a play button on it |
| Gallery | group of images | 4+ photos and nothing else |
Modules in grey are where Divi has no matching module, so the layers come in as drawn. Figma only draws the open tab and the open accordion item, so the others import empty for you to fill in.
Tablet & phone
Your tablet frame becomes Divi's tablet settings.
Draw "Home · Tablet" and "Home · Mobile" next to your desktop frame. FrameKit finds them, matches each layer to the desktop one, and writes what differs as Divi's own tablet and phone values.
Home · 1440
Desktop values
- Writes
- desktop values
- Columns
- 3 in a row
- Colours, weights
- set here, used everywhere
Colours and font weights come from the desktop frame for every screen size.
Colours, header & footer
Not just the page. The site around it.
Divi global colours, linked
A colour in your frame that matches a Divi global colour is linked to it, by Figma style name first, then by value. Add the frame's colour styles as Divi global colours in one click, and they update by name on every re-import, so a rebrand is one change.
// in the module, not a copied hex"color": "$variable(…)$"
Theme Builder header and footer
The top band and footer you drew become Divi Theme Builder templates, used on every page. Navigation drawn in Figma becomes a WordPress menu shown by Divi's Menu module.
Divi has no vertical menu module, so a footer column of links keeps its texts. FrameKit tells you where that happens.
Hero photos as backgrounds
A section with a photo fill gets the photo itself as a Divi background, at the height you drew, with any tint you drew as a gradient over it.
Divi Library and JSON export
Download any mapped page as a Divi 5 JSON file you can import into the Divi Library. Still on Divi 4? FrameKit writes shortcodes, or picks the format for you.
After launch
The design changed. Your client's edits stay.
FrameKit keeps a snapshot of every import. The Figma diff lists what changed in Figma, what was edited on the site, and where both changed. A re-import stops and asks before it replaces anything edited in Divi.
Pricing
One plan. Every builder, Divi included.
$19.99/month, billed yearly
$239.88 a year, or $24.99 month to month
- Unlimited sites and pages
- No credits to run out of
- Divi 5, Divi 4, Bricks, Elementor, Oxygen 6 and Gutenberg
- Support and updates included
Questions
Divi 5 questions, answered.
Either works. FrameKit writes the same Divi pages with the theme or with the Divi Builder plugin on another theme.
Yes. FrameKit writes Divi 4 shortcodes, and on Auto it uses Divi 5's format when Divi 5 is installed and shortcodes when it isn't.
Close, and you check it first. Every import is a draft, with a report of what was set and what wasn't. Colours and font weights are desktop values; type sizes, padding, gaps and stacking follow your tablet and phone frames.
No. FrameKit reads layers by their shapes, sizes and text styles. Names like "button" or "logo" help when they're there, but a frame drawn any way you like still imports.
No. Everything runs inside your WordPress site. If you want a second opinion on the guesses, you can connect your own AI client or Claude API key.
Yes. The Divi 5 Skeleton DS is a starter Figma file drawn for Divi 5. Duplicate it to your own Figma account and edit it, or import any frame you've drawn yourself.
No. A personal access token works on every Figma plan. Published colour, text and effect styles come through on any paid plan.
Your next Divi page is already drawn.
Paste the frame, check the roles, and open it in the Divi Visual Builder.