HTML to canvas, as layers you can edit on the Figma canvas

Screenshot approaches and HTML to Frames start from the same rendered page but end in very different places.

html2canvas also re-implements CSS rendering in JavaScript, so it can miss features the browser supports. HTML to Frames reads values from a real Chromium-based browser after it has done the rendering, then maps them onto Figma properties: gradients including conic and repeating ones, shadows, blend modes, blur and backdrop-blur, clip-path, mask-image and more.

Screenshots still have their place. If you need a quick visual record, a bitmap is fine. If you intend to change anything, layers save you from redrawing the page.

A useful rule of thumb: if the next step is a comment or a ticket, a screenshot is enough. If the next step is opening Figma and changing something, import layers instead.

Some content on a page is already pixels. A <canvas> element draws with JavaScript, and a WebGL scene renders 3D graphics on the GPU. There is no DOM inside these boxes to read, so no tool can turn them into meaningful vector layers.

HTML to Frames handles them explicitly rather than failing silently:

• The box is captured as a screenshot image at its exact position and size.
• WebGL scenes are frozen after a few frames, so you get a stable image rather than a blank or mid-transition frame.
• Everything around the box, such as headings, buttons and overlays positioned on top of it, stays as editable layers.

The same rule applies to other embedded content that cannot be layers: iframes such as maps, videos without a poster image, and object or embed elements. Each becomes an image of its own box, and the results screen lists any warnings.

In practice this means a landing page with a 3D hero still converts into a usable design. You can swap the hero image for a new visual, rewrite the copy above it and adjust spacing, while the rest of the page keeps its Auto Layout. See how that layout is inferred in Auto Layout explained.

Modern pages move: carousels rotate, elements fade in on scroll, cookie banners slide up and hero sections animate on load. A naive capture freezes whatever was happening at that millisecond.

HTML to Frames captures the page as a normal visitor sees it, with a few controls to make the result predictable:

Frozen animations

Animations are frozen so the capture shows each element in a settled state instead of halfway through a transition.

Hide cookie banners & popups

Turn this option on and consent banners and popups are hidden before capture, so they do not cover the page on your canvas.

Extra wait

Slow pages that load content late can be given more time before capture. Extra wait is a Pro option.

Full page

Capture the whole scrolling page or just the first screen, depending on what you need.

These options apply whether the page comes from a URL, a local file or the Chrome extension. The extension is the right choice when you want a specific state, such as an open menu, rather than the default view.

If something is still captured mid-animation or missing, the results screen lists warnings, and a one-click re-import with a different option is usually the quickest fix.