01 Why This Exists
Designers are drowning in HTML now, and it's the good kind of drowning. Ask Claude or ChatGPT for a landing page and you get one, as a single HTML file, in seconds. Clients send links. Developers send prototypes. The web itself is the biggest design reference library ever assembled. All of it lives one format away from Figma, and that one step is where the toll booth stands.
The established tool for this step is genuinely excellent, and it charges a subscription for full use. I kept hitting the same thought: this is a conversion, not a service. It reads a page and rebuilds it as layers. Charging monthly rent for that felt like the kind of gap a person with my particular mix of habits, a designer who codes, could close.
There was a second reason, the honest one. I had a folder of almost-shipped things and a portfolio of client work. I wanted one project where every decision was mine: the design, the code, the listing copy, the support email, the price. The price is zero. This page is the story of shipping it.
02 What It Does
Three ways in, one result: real Figma layers, not a screenshot.
A full document or a fragment, straight from an AI chat or a code editor. Tailwind CDN, style blocks and inline styles all work
Save any page as HTML and drop it on the plugin. Broken asset links are recovered automatically
Point it at a live site. For JavaScript-heavy pages there's a companion trick, covered in section 04
The import itself is the obsessive part. Flexbox becomes Auto Layout with direction, gap, padding and alignment intact. CSS Grid becomes Figma's grid Auto Layout, spans included. Text keeps its mixed inline styles as styled ranges, with working hyperlinks. Gradients, shadows including inset, per-corner radius, per-side borders, opacity and blend modes carry over. Inline SVG becomes real vectors. Images arrive full-resolution, converted from webp and avif where Figma needs it. Google Fonts are matched to Figma's own library by weight, and the plugin auto-detects the layout width so you never have to guess what viewport the HTML was made for.
03 Layouts That Don't Lie
Every importer's failure mode is the same: Auto Layout that looks right until you edit it. Resize one card and the whole frame folds like a paper crane. The cause is guessing. An importer reads the CSS, assumes what the browser probably did with it, and commits that assumption as structure.
My rule for this plugin: never commit a guess.
The plugin renders your HTML in a real browser engine first and measures where every element actually landed, to the pixel. Then, before any container becomes Auto Layout, it simulates what Figma's Auto Layout math would produce for that container. If the simulation reproduces the measured layout within about 1.5 pixels, the container earns Auto Layout. If it doesn't, that container falls back to absolute positions that match the browser exactly.
So you get one of two honest outcomes: Auto Layout that behaves like Auto Layout should, or pixel-perfect fidelity where the math didn't hold. Never the broken hybrid.
04 The Webflow Problem
Modern marketing sites are JavaScript all the way down, and JavaScript fights capture tools. This was the plugin's hardest month, and it taught me how the paid competition really wins: not smarter parsing, but a server farm of real browsers doing the rendering. I don't have a server farm. I had to get inventive.
WHAT JS-HEAVY SITES DO TO AN IMPORTER
Scroll-reveal libraries hold below-the-fold content at zero opacity until it scrolls into view. Capture without scrolling and half the page imports as a black void
Carousels clone their slides for infinite loops. Import one and the pricing section explodes into a stack of duplicate cards
Entrance animations get captured mid-tween: white smears where headlines should be
WHAT THE PLUGIN DOES ABOUT IT
Every CSS animation and transition is snapped to its final state, so nothing is captured mid-flight
The plugin scrolls through the full page step by step, letting reveal libraries fire, then forces any stragglers visible before serializing
Pattern rules detect the clones that carousel libraries create and skip them, with strict guards so the rules never delete real content
The terminal fallback. One click opens the page in your own browser tab, routed through a tiny Cloudflare Worker, where the site's JavaScript runs with full fidelity. A copy button hands the finished result back to the plugin. Same architecture as the paid tools' rendering farms, except the browser doing the work is yours, which also means it's free
05 What It Can't Do Yet
A tool page that hides its limits is an ad. These are mine, as shipped:
CSS transforms are approximated by their bounding box, not rebuilt as rotation
::before and ::after pseudo-elements are skipped
Conic gradients flatten to linear; video and most embeds become placeholders
Custom-coded tab systems can still leak a duplicate panel past the pattern rules
Each of these is on the list, and the list is public in the plugin's description. I shipped imperfect on purpose. A tool that helps people today beats a flawless one that never leaves the folder, and I have enough experience with that second category to know.
06 Free Forever
No account, no import limit, no analytics. Pasted HTML never leaves your machine; the plugin fetches only the assets your page references. The business model is a tip jar: if the plugin saves you time and you feel like it, you can support it on Patreon. If you never do, nothing changes.
As of August 2026 the plugin is submitted and sitting in Figma's review queue. The buttons below go live the moment it's approved.
Get it on Figma CommunitySupport on Patreon
Want a tool like this built inside your team, or a design partner who ships end to end? I take on projects.