Convert Figma to EtchWP
You designed it in Figma; the site runs on EtchWP. Getting from Figma to EtchWP usually means exporting CSS and pasting it into a code block — and the moment you do, it stops being EtchWP. There is a better way, and it is the reason we built a EtchWP pipeline into NibWP’s Figma skill.
Why Figma to EtchWP usually means exported CSS
Etch is code-first, so a Figma export as raw HTML is the one thing that breaks the model — it is exactly the wrapper soup Etch users left page builders to escape. What you want from Etch is clean semantic markup on a real design system, and an export gives you neither.
How NibWP builds native EtchWP
NibWP builds validated EtchWP components instead, on top of your Automatic.css design system. It establishes the ACSS tokens first, then builds the layout as real Etch elements — recognizing loops, conditions, components and dynamic data from the start rather than flattening everything into static markup.
The result is the semantic, maintainable Etch structure you would write by hand, with the design’s colors and type mapped to your ACSS variables rather than hardcoded values. It is the design, expressed in your own design system — ready to refine in the Etch editor.
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 EtchWP 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 EtchWP build lands as a draft for you to review before anything goes live.
A worked example
You keep your design system in Automatic.css and build in Etch. Pull a Figma frame, and NibWP first establishes your ACSS tokens, then builds the layout as real Etch elements — semantic, on your variables, aware of loops and dynamic data. Open it in the Etch editor and it reads like something you wrote, because it follows the same rules.
What you get
- Validated EtchWP components, not raw HTML
- Built on your Automatic.css design system
- Colors and type mapped to ACSS variables, not hardcoded values
- Aware of loops, conditions, components and dynamic data
- Clean semantic markup you own
Questions, answered
Does it use my ACSS config?
Yes — it establishes the ACSS design system first, then maps the design’s tokens to your variables.
Is the output editable in Etch?
Yes — real Etch elements, not a static HTML dump.
Will it flatten my dynamic content?
No — it recognizes loops, conditions and dynamic data from the start.
The bottom line
Etch is about owning your markup. A conversion that respects that — semantic elements, ACSS variables, no soup — is the only kind worth using here.
This is one builder in a bigger flow — see the overview in Figma to WordPress without exported CSS.