For years, designers screenshotted other websites and traced over them. Figma just made that obsolete.
Its new “HTML to Figma” Chrome extension grabs a live web page and drops it into your canvas as real, editable layers — not a flat picture.
Here is the workflow almost every product designer has run a thousand times. You find a website you admire. You screenshot it. You paste that screenshot into Figma. Then you sit there and rebuild it by hand — redrawing buttons, retyping text, eyeballing spacing — just to use it as a reference.
Figma’s newest Chrome extension feature, called “HTML to Figma,” deletes that entire ritual. You point it at any live page, capture it, and paste it into Figma. What lands on your canvas is not an image. It is text frames, image objects, and shapes — separated, layered, and ready to edit.
Why this is a bigger deal than it sounds
A screenshot is a dead end. You can look at it, but you cannot touch it. The moment you want to change a color, move a card, or pull one component into your own file, you are starting from zero.
Editable layers change the math entirely. Capture a competitor’s pricing page and you can recolor it to your brand in seconds. Grab a navigation bar you like and drop just that piece into your design system. The reference stops being a thing you copy and becomes raw material you remix.
Start from prod. Capture an entire live web page — or one specific element — and bring the current, shipping state of a product directly onto your canvas.
Remix designs. See a slick UI while browsing? Scrap it straight into Figma or FigJam. It arrives as editable text, images, and shapes you can recolor, split apart, and annotate.
Page to prototype. Right-click a captured frame, choose “Send to Figma Make,” and use the layout as a head start for a working prototype instead of a blank file.
How you actually use it
The setup is genuinely three steps, and none of them require you to be technical.
Install it. Grab the Figma extension from the Chrome Web Store and pin it to your toolbar so it is one click away.
Capture it. On any web page, click the extension icon and choose “Capture page” for the whole thing or “Select element” for a single piece. It copies straight to your clipboard automatically.
Paste it. Open a Figma design file or a FigJam board and hit Ctrl+V (or Cmd+V on Mac). The frames, text, and images drop in as separated layers, ready to edit immediately.
The honest limitations
This is not magic, and pretending otherwise will cost you a frustrating morning. Two things are worth knowing before you build a workflow around it.
The feature is currently in beta, and the capture ability is offered to paid-plan users. If you are on a free seat, this is not yet in your hands.
Pages built on heavy JavaScript animation or canvas rendering may not capture cleanly. The fix: instead of grabbing the full page, use “Select element” on the specific piece you want. And on pages with scroll-reveal effects, scroll all the way down first so every element loads before you capture.
Is it for you?
| ✅ This is for you if | ⚠️ Think twice if |
|---|---|
| You constantly screenshot reference sites and draw on top of them | You are on a free Figma plan and need it today |
| You redesign live UIs and want to tweak them piece by piece | Your targets are animation- or canvas-heavy and won’t capture cleanly |
| You want to spin up prototypes from a real page instead of a blank one | You need pixel-perfect fidelity rather than a fast, editable scaffold |
Why this is landing now
Design tools are racing to collapse the distance between “I saw something I like” and “I’m building with it.” Figma Make already pushes toward turning ideas into working prototypes. This extension feeds that engine: it gives the AI side of Figma a real-world starting point — an actual shipping layout — instead of asking you to describe what you want from nothing.
That is the quiet shift here. The web stops being a gallery you look at and becomes a parts bin you reach into. For anyone who designs by studying what already works, that is a meaningful change in how a project begins.
Figma’s “HTML to Figma” Chrome extension captures any live website as editable layers — text, images, and shapes you can remix instantly. It’s in beta, capture is paid-only, and complex animated pages may need the “Select element” workaround.
☐ Install the Figma extension from the Chrome Web Store and pin it
☐ Confirm you’re on a paid plan (capture is gated during beta)
☐ Try “Capture page” on a simple site, “Select element” on a complex one
☐ Scroll to the bottom of reveal-animation pages before capturing
Want more tools like this, explained without the hype?
We break down the AI and design tools worth your time — and the catches nobody mentions.
Source: Figma “HTML to Figma” Chrome extension announcement. Feature availability and pricing reflect the beta period and may change.
