Every look is a class
Every look is a FrameKit class selector you can edit in Oxygen, so changing one style changes every element that uses it.
Figma to Oxygen 6
Your Figma frame, as an Oxygen page you can edit.
Paste a Figma frame link. FrameKit builds the page from Oxygen 6's own elements: Containers, Text, Text Links and native details, each styled by a class selector you can edit. Open it in Oxygen and change anything, like any page you built by hand.
Perseverance · HomeFigma → Oxygen 6
- header · template-part→Oxygen header template
- site-branding→Container Link to home
- wp-block-navigation × 6→<nav> of Text Links
- wp-block-cover · hero→Container + background
- "Perseverance is still driving."→Text · h1
- "Where is Perseverance?"→Text Link
- columns · stats→a group of the drawn numbers
- wp-block-tabs→a group of its labels and panel
- group · newsletter→its layers
Why Oxygen 6 users need this
Oxygen has no widgets. FrameKit doesn't need them.
Oxygen has no widgets, so there is nothing ready-made to map a design to. FrameKit writes Oxygen page data directly: Containers, Text and Text Links, styled the way you drew them.
Native HTML where it fits
An accordion becomes native <details> Containers. A menu becomes a <nav> of Text Links.
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 Oxygen 6 elements, styled the way you drew them.
| You draw | Oxygen 6 gets | How FrameKit spots it |
|---|---|---|
| Accordion | <details> Containers | title rows with a chevron or plus icon, the open item's content below |
| Menu | <nav> of Text Links | short link texts side by side in the header or footer |
| Logo | Container Link to home | a layer named logo in the header or footer |
| Icon list | <ul> of <li> Texts | rows of an icon before one short text |
| Card | styled Container | an image, then a few texts and up to two buttons in one box |
| Tabs | a group of its labels and panel | a row of short labels over a panel, the open one drawn differently |
| Testimonial | a group of its parts | a quote with the name and role under it, at most one small avatar |
| Social icons | a group of the drawn icons | small icons named after networks |
| Icon box | styled Container | a small icon, a title and copy |
| Logo strip | row Container of images | 4+ small logos side by side, no text |
| Stats | a group of the drawn numbers | big numbers like "98%" over short labels |
| Slider | slides as Containers | a row of photos or slides running past its box, or over dots |
| Form | its layers | 2+ input boxes and a submit button; field types from their words |
| Pricing plan | styled Container | a name, a price like "$19" or "€49/month", 2+ short features and one button |
| Call to action | styled Container | a filled box with a heading, short copy and one button |
| Team member | styled Container | a photo, a short name and role, maybe a bio and social icons |
| 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 |
Oxygen has no widgets, so most patterns become Containers styled the way you drew them, every look a FrameKit class selector you can edit in Oxygen. 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 Oxygen breakpoint styles.
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 onto the element's selector at Oxygen's nearest breakpoint.
Home · 1440
Base styles
- Writes
- the selector's base styles
- 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.
Colours as Oxygen variables
Oxygen loads no theme, so your tokens live in Oxygen itself: Oxygen variables in a "FrameKit" collection. Elements use them through their class selectors, so a rebrand is one change.
/* in the selector, not a copied hex */var(--<variable>) in a FrameKit class selector
Text styles as selectors
Your Figma text styles become selectors for body, h1–h6 and links, so type stays consistent on every page.
Header and footer templates
The top band and footer you drew become Oxygen header and footer templates, used on every page. Navigation drawn in Figma becomes a <nav> of Text Links.
No widgets, no problem
Oxygen has no widgets, so an accordion becomes a native <details>, and tabs, sliders and forms import as groups of the layers you drew.
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 Oxygen.
Pricing
One plan. Every builder, Oxygen 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
- Oxygen 6, Bricks, Elementor, Divi 5 and Gutenberg
- Support and updates included
Questions
Oxygen 6 questions, answered.
An accordion becomes a native <details>. Tabs, sliders and forms import as groups of the layers you drew, styled the way you drew them, for you to wire up.
No. Oxygen loads no theme, so on an Oxygen site your tokens live in Oxygen variables and selectors instead.
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) is written at Oxygen's nearest breakpoint.
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 Oxygen page is already drawn.
Paste the frame, check the roles, and open it in Oxygen.