HTML in. Editable Figma out.
Paste code, drop a file or a whole project and get a pixel-accurate design with real text, Auto Layout, vector icons and images — in seconds.
<section class="hero"> <h1>Ship faster</h1> <p>Design meets code.</p> <div class="cards"> <article class="card">… <article class="card">… </div> </section> .cards { display: flex; gap: 24px; }
Works with whatever your HTML came from
Drop the whole project.
Get the whole design.
Upload a .zip or a folder straight from your code editor or site export. HTML, CSS, images and fonts are linked up automatically — pick any page and import it in one go.
- ✓.zip archives and folders
- ✓index.html found for you
- ✓Any page from the project
- ✓CSS, @import, images & fonts
- ✓Missing files reported
- ✓Nothing leaves your computer
Rebuilding a live page by hand isn’t design work. It’s copying. Let the browser do the measuring — you do the designing.
Three steps. Under a minute.
Install the plugin
Open it from Figma Community in any design file. No account needed.
Drop your HTML
Paste code, upload an .html file, a folder or a .zip. Pick a screen size.
Design on it
Get a named, structured frame with text, Auto Layout, vectors and images.
Everything a page needs to become a design
The browser lays the page out, the plugin reads every box, style and glyph — so Figma shows exactly what Chrome showed.
Real text layers, never pictures of text
Every heading, paragraph and button label arrives as a Figma text layer with the right font, weight, size, line height and colour — mixed bold and italic runs included.
- ✓Fonts matched to the ones installed in Figma
- ✓Line breaks exactly like the browser, or free re-flow
- ✓Truncation and line clamps preserved
Named, nested frames — not one flat picture
Layers are named after their tags and classes, nested like the DOM and ordered by z-index, so the file is ready to edit, componentise and hand off.
- ●section.hero › div.cards › article.card
- ●Stacking order and overflow clipping preserved
- ●Pseudo-elements (::before / ::after) included
Checked against the browser, twice
Every Auto Layout container is compared with the browser’s measurements when it is built and once more after the whole page exists. Anything that would move stays absolutely positioned.
- ●Exact sizes, gaps and padding
- ●Fonts substituted? Positions still verified
- ●No silent layout drift
Made for everyone between design and code
Bring a live page back into Figma and iterate on it instead of rebuilding it pixel by pixel.
Hand a prototype built in code to the design team as clean, editable frames.
Audit and redesign client sites starting from an exact copy of what is live today.
Start free. Pay once.
No subscription, no auto-renew.
Try it on your own pages before you pay anything.
- ✓3 full-quality imports
- ✓Paste HTML, upload a file, a folder or a .zip
- ✓Every feature included — no watermark
- ✓No account or card needed
You get a serial key by email. Paste it in the plugin and you are done.
- ✓Unlimited imports for 12 months
- ✓Pixel-accurate layout, Auto Layout, vector icons
- ✓Whole projects and JavaScript-rendered pages
- ✓Priority email support
- ✓One-time payment — no subscription, no auto-renew
Questions, answered
How does the free trial work?+
Install the plugin from Figma Community and you can run 3 imports with every feature enabled. After that the plugin asks for a serial key to continue.
What do I get with PRO?+
Unlimited imports for 12 months for a one-time €10. It is not a subscription and never renews automatically — buy another key when you want another year.
How do I activate my serial key?+
Open the plugin in Figma, click "Enter serial key", paste the key from your email (HTF-XXXX-XXXX-XXXX-XXXX) and press Activate. The key is linked to your Figma account.
Can I use one key on several computers?+
Yes. The key is tied to your Figma account, not to a device, so it works wherever you are signed in to Figma with that account. It cannot be shared between different Figma accounts.
Is my HTML uploaded anywhere?+
No. Your HTML is rendered and converted locally inside the plugin. The licence server only receives your Figma user id, the plugin version and a counter of imports — never your code or designs.
Can I upload a whole website project?+
Yes. Drop a folder or a .zip that contains your HTML, CSS, images and fonts. The plugin finds index.html (or lets you choose another page) and links every stylesheet, image and font with relative paths automatically. Everything stays on your computer.
Stop rebuilding. Start designing.
Your first 3 imports are on us — every feature included.