Export whole frame into a single HTML/CSS file?


I need help. Here is what I am trying to do:
I have this vending machine that prints price labels for customers with an industry level printer. The data on the labels are customizable, so I need to compile the data for the printer from an HTML template. Every implementation carries different products/client info, so I need different template each time.

I have several very simple layouts - no images, just paths and text blocks, nothing else - designed in Figma for those labels.

And I am looking for a plugin (free or paid) that would reliably convert the final Frame into a single HTML file containing both the CSS styling and the HTML structure.

What I tried so far:
Zeplin - good code, but for individual components only
Inspect - same
Builder.io - asks to rasterize vectors (wtf?)
HtmlGenerator - closest yet, but no single file option
Figma to Code
Token → Code

Mostly the plugins skip the path objects or get positioning of individual text blocks wrong.

So the questions is - is there a tool/plugin that can actually do this?
Or am I barking at a wrong tree and I should go explore Adobe XD/Framer/Sketch or some other tool?


I am currently building a figma to code plugin.
And I am looking for tester (fully free)
So would be a pleasure to help you achieve good quality generation for your project
Feel free to DM :slight_smile:

1 Like

Hey Stephane!
I will gladly test your plugin. I don’t think this forum supports DMs tho.
Hit me at tomas.kejmar(at)miwa.eu, please.

Contacted :slight_smile:

1 Like