Convert Figma to Oxygen
You designed it in Figma; the site runs on Oxygen. Getting from Figma to Oxygen usually means exporting CSS and pasting it into a code block — and the moment you do, it stops being Oxygen. There is a better way, and it is the reason we built a Oxygen pipeline into NibWP’s Figma skill.
Why Figma to Oxygen usually means exported CSS
Oxygen replaces the theme, so a pasted export is especially out of place — a code block floating in a structure that is supposed to be native Oxygen top to bottom. You lose the reusable parts, the selectors, the whole Oxygen way of working.
How NibWP builds native Oxygen
NibWP builds native Oxygen structure instead — real elements you can select, restyle and reuse inside the Oxygen editor, not a frozen HTML lump.
The layout you designed becomes the element tree, with Oxygen-native settings and the design’s tokens carried across, so the page behaves like something built in Oxygen — because it was. Nothing is flattened; nothing is pasted.
It reads your tokens, not a screenshot
The build doesn’t start from a picture. NibWP pulls the frame with its real design tokens — the actual color palette and type ramp read out of the Figma file — so Oxygen inherits the exact values the designer set instead of approximate hexes guessed from pixels. Because those tokens are cached locally, the conversion runs offline against them.
Read-only, and draft-first
The Figma connection is read-only throughout — your files are never modified — and the access token is encrypted at rest, shown only as a masked fingerprint. The Oxygen build lands as a draft for you to review before anything goes live.
A worked example
Your site runs on Oxygen. Pull the Figma frame, convert, and you get native Oxygen structure — real elements inside the Oxygen editor with Oxygen-native settings and your design’s tokens carried across. Restyle a selector, reuse a section, keep working the Oxygen way.
What you get
- Native Oxygen structure, not a code block
- Real, selectable, reusable elements
- Oxygen-native settings
- Design tokens carried across
- Nothing flattened or pasted
Questions, answered
Is it real Oxygen or embedded HTML?
Real Oxygen elements you can select and restyle — not an HTML lump dropped into the page.
Do the reusable parts still work?
Yes — because it is native structure, Oxygen’s reusables and selectors apply.
Will it publish automatically?
No — it builds to a draft for your review.
The bottom line
If the site runs on Oxygen, the design should too. Native structure keeps the selectors, the reusables and the workflow intact instead of dropping a dead block into the middle of it.
This is one builder in a bigger flow — see the overview in Figma to WordPress without exported CSS.