How to Convert a Website to Figma (Editable Layers)

There are four: paste a screenshot, capture the page with Figma's own Chrome extension, import it with the html.to.design plugin, or copy the whole site with the Livery extension and open it with the Livery for Figma plugin. Only the last three give you layers you can edit.

The tools that give editable layers all work the same way underneath. They read the page in a real browser, after its CSS has been applied, and turn each box into a frame, each run of text into a text layer and each picture into an image fill. They differ in how much of the site they take, what they build on top (styles, variables, components) and what they cost.

You can, but you get a picture, not a design. Text can't be edited, colours have to be picked by eye and every box has to be traced by hand. It's fine as a reference frame to design on top of, and that's all.

If a screenshot is all you have (a mock-up, a brand board, an app you can't open in a browser), a tool that reads the image is the next step up. Livery's image to design reads screenshots in the browser, with no AI model, and rebuilds them as editable Figma layers: text, frames with fills, corners, borders and shadows, and logos as vectors.

Install the Figma Chrome extension, sign in on a paid plan, open the page and capture it. Figma's help centre says code to canvas "turns on automatically once you're signed in to a paid plan", and that capturing is "currently gradually rolling out in open beta".

1. 1Open the page in Chrome and choose Capture page, or pick a single element. Figma says the page capture "includes parts of the page that are scrolled out of view".
2. 2Each capture goes to the extension's tray and is copied to your clipboard.
3. 3Paste it into a Figma Design file or a FigJam board, where it lands as layers.

Figma lists two other routes to the same result: copying layers from a Figma Make preview, and the generate_figma_design tool on the Figma MCP server, which lets a coding agent send a running web app to a Figma file. Where your file already has variables, Figma tries to connect them to the pasted layers: colours, text properties such as font size and line height, and frame properties such as corner radius, padding and gap.

Figma is open about the limits: captures come in "as plain Figma layers with variables bound if any are available", there is "no component and styles mapping yet", pages with heavy JavaScript animation, canvas drawing or virtualised lists may capture imperfectly, and browser pages such as chrome:// can't be captured.

html.to.design is a Figma plugin with a companion browser extension. Paste a URL into the plugin (press Tab to add more and import several pages at once) and it builds the page as editable layers, with text and colour styles created as local styles.

• Auto layout: optional. Its docs say it "imports websites with advanced auto layout already set up for you, if you want it".
• Private pages: the browser extension captures pages behind a login and sends them to the plugin.
• Cost: a free plan with a monthly allowance of imports (12 a month on its docs page at the time of writing). Pro adds batch imports of many URLs and high-resolution images, under a fair use limit of 1,000 imports a month.

Copy the site with the Livery browser extension, then import it with the Livery for Figma plugin. The extension takes every page with its text, images, videos and fonts; the plugin rebuilds it as a design system you can edit.

1. 1Add the Livery extension (free on the Chrome Web Store; Edge, Brave and Arc work too).
2. 2On the site, choose what to copy: this page, the whole site (this page and the pages it links to, up to your plan's limit), or a walkthrough recorded while you browse.
3. 3In the Figma desktop app (any Figma plan), open Livery for Figma and sign in once. Your copies are waiting there, newest first.
4. 4Pick a copy, choose what comes in (assets, motion, the walkthrough) and press Import.

What lands in Figma:

• Every page as a frame at its real size. Boxes keep their fills, borders, per-corner radii, shadows and opacity; text keeps each styled run (font, weight, size, line height, letter spacing, colour).
• Pictures as image fills, inline SVGs as vectors you can edit, and videos where your Figma plan plays video. Canvas drawings and embeds Figma can't rebuild are cut from the page's screenshot, so nothing goes missing.
• The site's colours as variables bound to the layers that use them, radii and spacing as variables, and its type as text styles in the site's own fonts. A font Figma doesn't have is set in Inter, and the plugin says which.
• Components with variants, sections, and a page for each foundation (colour, typography, icons, spacing, radius, shadows, motion).
• Links between copied pages as prototype clicks, so the copy navigates like the site.

Simple flex rows (a button, a label and its icon) and components come in as auto layout, so a longer label pushes what follows along. Everything else keeps its measured position, which keeps the page exact. Copies are private to your account; the free plan copies up to 5 pages at a time and Pro up to 40.

Importing a site to study it is common practice, but the text, photos, illustrations, logos and fonts in it still belong to their owners. The U.S. Copyright Office lists "the layout, format, or 'look and feel' of a web page" among things it won't register, while text, photographs and artwork on a site can be protected.

This is not legal advice, and the rules differ between countries. Use an imported copy as reference, replace its words, images, logo and any paid fonts with your own, and ask the owner when in doubt.

Our guide on copying a website's design explains where the line sits between style you can borrow and assets you can't.