Capture the whole page.
One button. It fires whatever lazy-loads, waits for the images, then parks the file.
HTML to Figma Chrome extension + Figma plugin
The page in your tab becomes editable Figma layers.
Real Auto Layout that reflows. Layer names a designer would have typed. Not a screenshot, not a tree of layers called div.
Free No account No import limit
Features
Four things it does.
Or pick one section.
The picker names what it is about to take. Arrow up widens the selection, a click captures it.
Four device widths, one run.
Desktop 1440, laptop 1280, tablet 768, phone 375. Four frames from a single capture.
Right-click, Paste here.
No file to import — 2,061 layers straight off the clipboard. Then Figma asks what to swap in for a font it hasn't got.
Why this one
Numbers from the repository, not adjectives.
4,034
Auto Layout stacks replayed, zero pixels drifted
6 captures · verified to 0.6 px
1,113 → 0
layers called div in one stripe.com capture
of 2,754 nodes · 0 on all six sites
0.55%
of what twelve live pages painted, lost
37 badged · 2 deliberate
2,738
automated tests, green on this build
2,159 unit · 559 real Chromium · 20 end-to-end
The same documents record what is still wrong, and so does this page: what it misses.
Side by side
Against html.to.design.
| Feature | Relayer | html.to.design |
|---|---|---|
| Price | Free, on your machine | $18 a month, or a free tier |
| Imports | No limit; none in the code | 10 per 30 days, free tier |
| Four device widths | ShippedOne capture, four frames | A separate import per viewport |
| Missing fonts | Offered, then Re-apply fonts | Install it, then re-import |
| Account | None, no sign-up | Figma account; billing bound to it |
| Your page's data | Stays put — networkAccess: none |
Processed through their cloud |
As documented, August 2026. Find a row out of date and I will fix it.
Questions
The ones that get asked.
Does my page leave my machine?
No Relayer server exists. The capture runs in your tab; the plugin declares
networkAccess: none and fetches only your page's own images and fonts.
Pages behind a login?
Yes — it reads the live tab, not a re-fetched URL. Whatever your browser has already rendered: signed in, on localhost, behind staging.
What does it miss?
Three arrive wrong and unbadged: an <img> with no
src, an <img>'s own background, a checkbox's tick.
Pasting also flattens SVG icons to images and takes the first style of mixed-styled
text — the popup says so first. Everything else that could not be carried arrives
badged.
Framer, React, Tailwind?
It reads the rendered page, not the source, so the framework mostly does not come
into it. Framer's display: contents shell needed handling; it has it.
What is a .relayer file?
A zip: doc.json plus the page's images and fonts. 100 KB to a few
megabytes — stripe.com, in the clip above, is 2.5 MB.
What does it cost?
Nothing. There is no account to make, no sign-up, and no import counter — not a generous limit, none in the code.
The tab you have open, as editable layers.
Capture it with the extension, paste it into Figma. Real Auto Layout, real layer names, no Relayer server.
Free No account No import limit