The design is finished. The client signed off. Now you open the YOOtheme builder and start over: drag in a section, set the grid, drop in a heading, nudge the padding, repeat. Every block on the page gets rebuilt by hand, even though you already made every one of those decisions last week in Figma.
That rebuild is the tax on Figma-to-YOOtheme work, and most of it is mechanical. Export the frame’s HTML, run it through Convert, and you get a native YOOtheme layout you can import. You still do the finishing work. You’re just not starting from an empty canvas.
The workflow at a glance
- Design the page in Figma.
- Export the frame’s HTML (Dev Mode, or an export plugin).
- Paste that HTML into YOOforged Convert.
- Attach a screenshot of the frame for visual context.
- Import the result into the YOOtheme builder and refine.
The rest of this covers each step, what comes across cleanly, and how to build the frame so the conversion goes better.
Why there is no true one-click Figma to YOOtheme
Worth knowing why this is a workflow and not a button. A YOOtheme layout is JSON: sections, rows, columns, and elements, each with defined properties, all sitting on UIkit. A Figma frame is vector shapes on a canvas. It has no idea what a UIkit grid is, and it was never meant to.
Nothing connects those two models directly, which is why the YOOtheme forums have years of “what’s your Figma workflow” threads and no good answer in any of them. What does connect them is the HTML your design exports. Convert reads that markup and rebuilds it as a YOOtheme layout. It never opens the Figma file, and it isn’t a Figma plugin. It only sees the code.
Step by step
1. Get clean HTML out of Figma
Dev Mode is the straightforward route. Open the frame, select the top-level frame, and copy the HTML out of the code panel. If you already use an export plugin that spits out HTML, that works too.
How you built the file matters more than which export you use. Auto-layout, named layers, and standard web patterns give you markup that maps cleanly. A frame held together with absolute positioning and one-off effects gives you a mess, and you’ll pay for it in cleanup later.
2. Paste the HTML into Convert
Open Convert and paste the HTML in. The cap is 1MB per pass, which covers most single pages. If you’re working on something long, split it and run it in sections.
3. Attach a screenshot for spacing and hierarchy
Attach a screenshot of the frame alongside the HTML. Markup on its own doesn’t say much about spacing or visual hierarchy, and the screenshot fills that in. It’s the cheapest thing you can do to improve the result.
4. Generate and review
You get back a YOOtheme layout as importable JSON, plus a count of the sections and elements it produced. Check that count. If your frame had six sections and the readout says three, something got truncated, and you want to know that now rather than after you’ve imported it.
On a well-built frame, figure 75-90% of the structure comes across. The rest is cleanup.
5. Import into the builder and refine
Import it and finish the job there. Spacing usually needs a nudge, placeholder images need swapping for real ones, and a few elements will want a human eye. From that point it’s an ordinary YOOtheme layout. Nothing about it is locked or special.
What maps cleanly, and what needs hand-tuning
Comes across reliably:
- Sections and overall page structure
- Grids and columns
- Headings, text, and images
- Buttons and basic links
- General spacing and order
Expect to hand-tune:
- Interactions and animations
- Complex or heavily custom components
- Pixel-exact spacing
- Anything driven by JavaScript
Knowing that split ahead of time is what keeps this from being a letdown. Convert kills the tedious part of the rebuild. The finishing pass is still yours, and it always was.
How to prep a Figma frame for a cleaner conversion
A few habits pay off here:
- Build with auto-layout rather than absolute positioning.
- Name and group layers so the structure is legible.
- Keep to standard web patterns (stacked sections, grids, cards) where you can.
- Flatten purely decorative effects that won’t translate to markup.
- Use real content sizing so proportions export sensibly.
Finishing the page with Style and Copywriter
Once the structure’s in the builder, two other YOOforged modes handle what’s left. Style sets brand colors, fonts, and rounding across the theme. Copywriter fills in or rewrites the copy so you’re not shipping lorem ipsum.
Other design sources
None of this is really about Figma. Any tool that hands you rendered HTML feeds the same pipeline: paste the markup into Convert, attach a screenshot, import, refine. Webflow exports work. So does output from AI design tools like Claude and v0.
Frequently asked questions
Does YOOforged read my Figma file?
No. Convert works from the rendered HTML your frame exports, not the Figma file or its data model. It isn’t a Figma plugin.
How accurate is the conversion?
On a well-structured frame, figure 75-90% of the layout comes across cleanly. Interactions, complex custom components, and pixel-exact spacing get finished by hand in the builder.
Is Figma to YOOtheme free?
Convert is a Pro feature. The free tier covers Translate, Copywriter, and the AI Assistant, with 10 generations a month shared across the three.
Can I convert a whole multi-section page at once?
Up to 1MB of HTML per pass, which handles most pages. Split anything long or complex into sections for the best result.
Do I need the YOOtheme Pro Figma UI kit?
It helps. Designing against real YOOtheme components makes the exported HTML map more predictably. It isn’t required.
Turn your next Figma design into a YOOtheme layout
The rebuild is the part you don’t have to do by hand anymore. Export the frame, run it through Convert, and start from a real layout.