No HTML widget holding the design
Every layer becomes an Elementor container or widget the editor's own panels can edit. Your client changes a heading in the heading's settings, not in code.
Figma to Elementor
Your Figma frame, as an Elementor page you can edit.
Paste a Figma frame link. FrameKit builds the page from Elementor's own containers and widgets: headings, text, buttons, icon lists, nested tabs, accordions, counters, testimonials. Open it in the Elementor editor and change anything, like any page you built by hand.
A few patterns use Elementor Pro widgets: Form, Price Table and Call to Action. Header and footer templates use Elementor Pro's Theme Builder.
Perseverance · HomeFigma → Elementor
- header · template-part→Theme Builder header (Pro)
- site-branding→Site Logo / Title
- wp-block-navigation × 6→WordPress Menu
- wp-block-cover · hero→container + background image
- "Perseverance is still driving."→Heading · h1
- "Where is Perseverance?"→Button
- columns · stats→Counter
- wp-block-tabs→Nested Tabs
- group · newsletter→Form (Pro)
Why Elementor users need this
A real Elementor page, not a picture of one.
Most Figma-to-WordPress workflows paste the design as one block of HTML or make you rebuild it by hand. FrameKit writes Elementor data directly, so the page opens in the Elementor editor as native containers and widgets.
Auto layout becomes containers
Figma auto layout becomes Elementor's container layout: direction, gaps, wrap, padding and alignment.
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 Elementor widgets, styled the way you drew them.
| You draw | Elementor gets | How FrameKit spots it |
|---|---|---|
| Card | Image Box or container | an image, then a few texts and up to two buttons in one box |
| Accordion | Accordion | title rows with a chevron or plus icon, the open item's content below |
| Tabs | Nested Tabs | a row of short labels over a panel, the open one drawn differently |
| Menu | WordPress 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 Icons | small icons named after networks |
| Icon list | Icon List | rows of an icon before one short text |
| Icon box | Image Box | a small icon, a title and copy |
| Stats | Counter | big numbers like "98%" over short labels |
| Slider | Image Carousel | a row of photos or slides running past its box, or over dots |
| Form | Form (Pro) | 2+ input boxes and a submit button; field types from their words |
| Pricing plan | Price Table (Pro) | a name, a price like "$19" or "€49/month", 2+ short features and one button |
| Call to action | Call to Action (Pro) | a filled box with a heading, short copy and one button |
| Team member | Image Box or container | a photo, a short name and role, maybe a bio and social icons |
| Logo strip | row of images | 4+ small logos side by side, no text |
| Breadcrumbs | its texts | short texts with "/" or "›" between them |
| Video | the still image | a photo with a play button on it |
| Gallery | container of images | 4+ photos and nothing else |
Widgets in grey are where Elementor has no matching widget, so the layers come in as drawn. Widgets marked (Pro) need Elementor Pro. 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 Elementor's tablet controls.
Draw "Home · Tablet" and "Home · Mobile" next to your desktop frame. FrameKit matches each layer to the desktop one by path, and writes what differs as Elementor's own _tablet and _mobile controls.
Home · 1440
Desktop controls
- Writes
- the widget's base controls
- Reads
- the frame you pasted
The desktop frame is the base; tablet and mobile frames only add what differs.
Colours, header & footer
Not just the page. The site around it.
Kit global colours, linked
A colour in your frame that matches one of your Kit's global colours is linked to it, by Figma style name first, then by value. Add the frame's colour styles to the Kit in one click and update them by name later.
// in the widget, not a copied hex__globals__: { color: "globals/colors?id=…" }
Type and spacing from the Kit
Text styles and spacing from your Figma file go into the Kit's typography and spacing, so widgets refer to them instead of repeating sizes.
Theme Builder header and footer
The top band and footer you drew become Elementor Pro Theme Builder templates, used on every page. Navigation drawn in Figma becomes a WordPress menu shown by Elementor's menu widget.
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 Elementor.
Pricing
One plan. Every builder, Elementor 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
- Elementor, Bricks, Divi 5, Oxygen 6 and Gutenberg
- Support and updates included
Questions
Elementor questions, answered.
Most patterns use widgets in free Elementor. Forms, price tables and calls to action map to Elementor Pro widgets, and header and footer templates use Elementor Pro's Theme Builder.
Into your Kit: Kit global colours + custom colours. Widgets refer to them by reference, so changing a Kit colour updates every page.
Close, and you check it first. Every import is a draft, with a report of what was set and what wasn't. What differs in your tablet and mobile frames (type sizes, padding, gaps, stacking, hidden layers) becomes Elementor's tablet and mobile controls.
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.
No. A personal access token works on every Figma plan. Published colour, text and effect styles come through on any paid plan.
Your next Elementor page is already drawn.
Paste the frame, check the roles, and open it in the Elementor editor.