Launch offer — code LAUNCH50 takes 50% off your first 3 months →

Any web page,
as editable Figma.

It is not a screenshot. Pages come back as real frames, text and vector nodes, so you can change colours, copy and layout directly in Figma.

Add to Chrome Install Figma plugin ▶  Watch the demo
5 free every month · no sign-up · first conversion in 30 seconds · needs both the Chrome extension and the Figma plugin
Live Demo

Capture to editable in 14 seconds.

Capture in the browser on the left, watch real layers land in Figma on the right. At the end we recolour the text — something you could never do with an image.

acme.studio </>
html2design plugin code 704-921
LAYERS
Frame 1440
Navigation
T Hero title
Hero image
Card grid
✓ Converted to editable layers
page.h2f ⚡
01One click — reads the DOM, styles and layout as they are
02Send instantly by file, clipboard or 6-digit code
03Rebuilt in Figma as real frames, text and vectors
04Select the text and change its colour — these are real nodes
LIVE DEMO
0:14 · loop
Features

The details come across too

Not "roughly similar" — the actual pixels and styles.

Pixel-accurate layout

Reads a DOM snapshot through the Chrome DevTools Protocol and reproduces exact positions and sizes — gradients, shadows, asymmetric borders, rounded corners and overflow clipping included.

Genuinely editable text

Text arrives as text nodes with font, weight, colour and alignment intact. No retyping words off an image.

SVG → vector

Inline SVG becomes editable vector nodes.

iframe & Shadow DOM

Nested frames and web components are merged into a single capture.

6-digit direct send

One pairing code sends a capture straight from the extension to the plugin.

Structured to work with

Not just pasted in — ready to touch. We read flex and grid and configure Auto Layout for you, so the layout holds up when you move or stretch things.

Local by default, no tracking

Captures stay on your machine by default. The extension and plugin carry no analytics, tracking or ad identifiers. Even with direct send the relay forwards and discards immediately, storing nothing.

Use cases

Things a screenshot can’t do

Planning, review, redesign — treat a screen as work, not a reference image.

Competitor teardown

Instead of dropping a flat image into a doc, pull the screen apart frame by frame. Spacing and font sizes arrive as real values, and you can annotate or edit right on top.

Specs with the real screen

Put the actual product screen in your spec instead of a hand-drawn wireframe. Change only the copy and “here’s what I mean” becomes a single picture.

A redesign head start

Don’t spend half a day tracing a legacy page. Start from the screen that already exists and change only what needs changing.

How it works

Three steps is all it takes

Capture

Click the extension icon on the page you want. It reads the DOM, styles and layout into a .h2f file.

Send

Type the 6-digit code the Figma plugin shows into the extension, and it goes straight across.

Edit

It lands as real frames, text and vectors — with Auto Layout already set up.

Pricing

Start without committing

Use it free for as long as that is enough. Upgrade only when it is not.

Free
$0
forever
  • 5 conversions every month
  • No sign-up, no login
  • Every conversion feature included — nothing held back
Start free
LAUNCH50 — 50% for 3 months
Pro
$5 / month
cancel anytime
  • Unlimited conversions
  • Sign in with Google to use it on every device
  • Payments handled securely by Paddle, our Merchant of Record
Get Pro
🎉 First 100 users — code LAUNCH50 applies automatically at checkout for 50% off your first 3 months (until 2026-08-08)
FAQ

Frequently asked questions

How is this different from a screenshot tool?
A screenshot is a single flat image. html2design rebuilds the page as real Figma frames, text, images and vector nodes, so you can change colours, copy and layout immediately — no retyping, no tracing.
Where does my captured data go?
By default it never leaves your machine — it is a file download or a clipboard copy. Only direct send passes through a relay, which forwards and discards it immediately without storing anything. We collect no personal data from free users.
Do I really need the Figma plugin?
Yes. The Chrome extension does the capturing, and the html2design plugin inside Figma turns that capture into real layers. Both are free to install.
How do I cancel Pro?
Cancel whenever you like. Payments run through Paddle as Merchant of Record, and the link in your receipt email lets you manage the subscription directly. See our refund policy for details.

Don’t spend half a day moving one screen.

Your first capture lands in Figma in about 30 seconds. Five a month stay free, always.