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 2026-08-29-plan3-results.md
- 1,113 → 0 layers called div in one stripe.com capture of 2,754 nodes · 0 on all six sites 2026-08-28-plan29-results.md
- 0.55% of what twelve live pages painted, lost 37 badged · 2 deliberate 2026-09-03-plan10-results.md
- 2,901 automated tests, green on this build 2,214 unit · 666 real Chromium · 21 end-to-end vitest run · playwright test --list
The same documents record what is still wrong, and so does this page: what it misses.
Side by side
Against html.to.design.
html.to.design
- Price$18 a month, or a free tier
- Imports10 per 30 days, free tier
- Four device widthsA separate import per viewport
- Missing fontsInstall it, then re-import
- AccountFigma account; billing bound to it
- Your page’s dataProcessed through their cloud
Relayer
- PriceFree, on your machine
- ImportsNo limit; none in the code
- Four device widthsOne capture, four frames
- Missing fontsOffered, then Re-apply fonts
- AccountNone, no sign-up
- Your page’s dataStays put —
networkAccess: none
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?
One thing arrives wrong and unbadged: a checkbox's tick. Pasting straight onto the canvas also flattens SVG icons to images and takes the first style of mixed-styled text — the popup says so first. Press ⌘V inside the plugin instead and you get the full import. 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