How to import a website into Figma, three ways

You found a page worth keeping — a layout you want to redesign, a competitor's hero you want to study, your own marketing site you'd rather edit in Figma than in code. The question is how to get it out of the browser and onto the canvas without rebuilding it by hand. There are three honest ways to do it, and one of them works on almost anything.

Why pull a website into Figma at all?

Designers don't import pages for fun — they do it because starting from the real thing beats starting from a blank artboard. A few situations come up again and again:

• Redesigns. The fastest way to redesign a page is to begin from the page itself, then restyle in place — not to trace a screenshot pixel by pixel.
• Audits and teardowns. Pull a live page in as layers and you can measure its real spacing, type scale, and color — the values, not your guess at them.
• Reusing what already ships. Your production site is the source of truth. Bringing it back into Figma keeps the design file honest about what users actually see.
• Salvaging old work. A site built years ago in code, with no Figma file behind it, can be recovered into an editable design in minutes.

Whatever the reason, the goal is the same: get the page onto the canvas as something you can edit, not a picture you can only look at.

The three ways to import

Every method below lands the page as native Figma nodes. Which one you reach for depends on what you have in front of you — a URL, a file, or a snippet.

1. Import a live URL

This is the one most people want. You paste an address — https://stripe.com, your own staging link, a landing page you admire — and the importer renders that page, measures it, and rebuilds it on the canvas. No copying markup, no exporting anything. It's the closest thing to "give me that page, here, in Figma."

The one wrinkle is a browser security rule called CORS, which blocks scripts from reading some third-party pages directly. A good plugin routes those blocked requests through its own proxy so the import still works — you shouldn't have to think about it. URL import has its own guide if you want the full picture, including what to do on the rare page that refuses.

2. Drop an HTML file

If you've already saved a page — "Save as… Webpage, Complete" from your browser, or an export from a static-site build — you can drop the .html file straight in. This is handy for pages behind a login, local prototypes, or anything not reachable by a public URL. The importer reads the saved markup and its styles exactly as the browser would.

3. Paste HTML & CSS

For a single component — a pricing card, a nav bar, a button you built in a CodePen — pasting the markup and styles directly is the quickest path. A full document or just a fragment both work. Because the HTML and CSS are processed locally, nothing you paste leaves your machine. This is the method to use when you only want one piece of a page, not the whole thing. It's the heart of converting HTML to Figma.

"Editable layers," and why it's the whole point

Here's the difference that decides whether an import is useful or just decorative. Some tools flatten the page into a single image and drop it on the canvas. It looks right. Then you click it, and there's nothing inside — no text you can change, no spacing you can adjust, no color you can recolor. You imported a screenshot.

A real import rebuilds the page as a layer tree: frames for the structure, live text with its real font and weight, image fills for photos, vectors for icons. Every node selectable, every value editable. That's the version you can actually design with.

If you can't select the headline and retype it, you didn't import the page — you photographed it.

This is worth checking before you commit to any tool. We wrote a whole piece on recreating a site for a teardown that leans entirely on layers being real — none of it works on a flat image.

Where imports get tricky (and how to handle it)

No importer is magic, and the honest ones tell you where the edges are. Three things come up most:

• Fonts you don't have installed. If the page uses a typeface that isn't on your machine or in your Figma file, the text has to fall back to something you do have. Good plugins keep the layout stable and tell you what was substituted, rather than silently swapping a font and letting the text re-wrap.
• CORS-locked images and pages. Some assets are served with rules that block direct reading. A built-in proxy handles most of these; a few stubborn hosts still won't budge, in which case saving the page and importing the file is the reliable fallback.
• Highly dynamic pages. A page that's mostly canvas, WebGL, or content that only appears after scrolling and clicking will import what was actually on screen at capture time. Static and content-driven layouts come through best.

The trade-off is fair: anything the browser genuinely rendered, a good importer can rebuild. Things the browser draws with low-level graphics, or only reveals through interaction, are the hard cases — and worth knowing about up front.

A two-minute walkthrough

Concretely, here's the whole loop with a URL import:

1. Open Figma, run the importer plugin, and pick URL as the source.
2. Paste the address and choose a width — desktop, tablet, or mobile. (Some tools let you import all three at once.)
3. Let it render and measure. The page comes back as a frame full of editable layers, placed on your canvas.
4. Select anything — a heading, a card, a button — and start redesigning. Retype the copy, swap the color, adjust the spacing.

That's it. From "I like that page" to "I'm editing that page" in about the time it takes to read this paragraph.

So which method should you use?

Reach for the URL when you want a whole live page and have its address. Drop a file when the page is local or behind a login. Paste when you only need one component. All three give you the same prize at the end — the page as editable Figma layers, ready to take apart and rebuild.