How to import a live website into Figma as editable layers

Step 1 — save the page as a self-contained file

A web page isn't one file. It's markup plus stylesheets plus fonts plus images, scattered across paths and CDNs. "Saving" it means collapsing all of that into something that still renders on its own. Two formats do this properly.

Option A — a single .mhtml file

In Chrome or Edge: File → Save Page As… → Webpage, Single File. You get one .mhtml (or .mht) with the HTML, the CSS and every image packed inside it. This is the least fiddly option and the one to reach for first.

Option B — a .zip of a complete save

Save as Webpage, Complete instead. You get an .html file plus a folder of assets beside it. Zip the two together and drop the .zip on the plugin. It is unpacked in-plugin and every relative reference resolves — including URLs inside linked stylesheets and @imported CSS, which resolve against the stylesheet rather than the page.

Pages behind a login, on staging, or on localhost

This is where a file-based workflow quietly wins. Your browser is already authenticated, already on the VPN, already pointed at localhost:3000. Whatever you can see, you can save — and whatever you can save, you can import. No tool needs network access to your private environment.

Step 2 — drop the file on the plugin

In any Figma file, run html2figma and drag the saved file onto the drop zone. If you'd rather not deal with files at all, the plugin also takes pasted markup: a whole page, or a fragment with its <style> block.

The plugin renders the page in a real browser engine, reads each element's final geometry and computed style, and rebuilds that as Figma nodes. It never re-interprets your CSS, which is why flex, grid, floats and absolute positioning all survive — the browser already did the layout, and the plugin just copies the answer.

Step 3 — pick your viewports

Tick any combination of Desktop, Laptop, Tablet and Mobile and each is rendered and imported separately, side by side on the canvas. Media queries genuinely apply per viewport, so a flex row that stacks on mobile arrives as a vertical Auto Layout frame there and a horizontal one on desktop. One import, the full responsive set.

What arrives in Figma

• Real text layers with font family, weight, size, line-height, letter-spacing and alignment — selectable and editable, not baked into a picture.
• Auto Layout where the children genuinely form a uniform stack. The plugin proposes the frame, replays it, and keeps it only if every child lands within a pixel of where the browser put it.
• Components. Repeated blocks — cards, list rows, nav items — are detected by structure and rebuilt as one component with instances, each keeping its own text and images.
• Variables and text styles. Colours used more than once become Figma Variables named like a designer would name them (Slate 900, not #0F172A); repeated typography becomes Text Styles.
• Gradients, per-side borders, per-corner radii, box-shadows including inset, opacity, overflow clipping, blur, images, and inline SVG as editable vectors.
• A layer tree named from roles and content rather than div › div › div.

Where it gets awkward

Three things account for most disappointing imports. All three are fixable before you convert.

CSS that is generated at runtime

The plugin deliberately never executes the page's JavaScript. That keeps pasted or downloaded markup from running inside the plugin, and it means the layout is read statically. The cost: a page whose styles are produced by a script at load time — the Tailwind CDN build is the common one — imports unstyled. The plugin warns you before it happens. The fix is to save the page from the browser after it has rendered, which bakes the computed styles into the save, or to use a build with compiled CSS.

Lazy-loaded images and content

Anything that hasn't loaded when you hit save isn't in the file. Scroll the whole page to the bottom first, let the images populate, then save.

Fonts

Fonts map to the closest font installed in Figma, with Inter as the fallback. If the brand face matters, install it in Figma before importing rather than fixing text layers afterwards.

What people actually use this for

• Redesigns that start from the real production page instead of a screenshot traced by hand.
• Design-system migrations, where a legacy site needs to become components and tokens.
• Competitive teardowns — pull a page apart at the layer level rather than squinting at a JPEG.
• Design QA, comparing what shipped against what was specced, on the same canvas.
• Getting coded prototypes back into design, including HTML generated by an AI assistant.