How to Import Any Website Into Figma (2026 Guide)

If you design in Figma, you've probably tried to get a live website into Figma at some point. Maybe you were auditing a competitor. Maybe a client said "I want something like Stripe.com, but for accounting." Maybe you just saw a beautiful component and wanted to take it apart.

And you probably did what most of us do: screenshot. Crop. Drop into Figma. Realize you can't edit any of it. Sigh.

This guide shows you the version of that workflow that actually works — importing a live website into Figma as fully editable layers, in roughly 30 seconds, with no plugins inside Figma and no code on your end.

What "importing a website to Figma" actually means

Before the how-to, a quick definition. There are three things people mean when they say "I want to put this website in Figma":

1. A screenshot — a single flat image. Useful for a presentation deck. Useless if you want to redesign it.
2. An iframe / embed — the live site rendered inside Figma. Doesn't really exist as a stable workflow; Figma is a design tool, not a browser.
3. Editable layers — every text node, image, frame, and auto-layout container as a real Figma layer you can move, retype, restyle, and reuse.

This guide is about #3. That's the one that's actually useful for design work, and it's the one we built Export to Figma to do.

The 3 ways to do it (compared honestly)

Method	Speed	Editable?	Free tier	Best for
Chrome extension (Export to Figma)	~30s	Yes — real layers	10/mo free	Live sites, fast iteration
Figma plugin (e.g. html.to.design)	1–3 min	Yes, but paste-HTML workflow	Limited free	When you have raw HTML
Rebuild manually	4–8 hours	Yes (you made it)	Free	Tiny single sections

The Chrome extension route wins on speed and on accuracy for live sites — because it captures whatever the browser actually rendered, not whatever the HTML file says. If you want a deeper feature-by-feature comparison, we wrote html.to.design vs Anima vs Export to Figma.

Step-by-step: import a website into Figma

Here's the full workflow. We're using Export to Figma — full disclosure, we built it.

Step 1 — Install the extension

Install Export to Figma from the Chrome Web Store. It's free. Pin it to your toolbar so the icon is one click away.

Step 2 — Open the website you want

Navigate to any live page in Chrome. Could be Stripe.com, your competitor's pricing page, a Webflow site you admire, your client's existing homepage. If Chrome can render it, the extension can capture it.

Step 3 — Click Export

Click the Export to Figma icon in your toolbar. A small floating bar appears at the top of the page. Click Export. The extension reads the rendered DOM and styles into a structured payload.

You'll see a confirmation. That's it — the capture is done and on your clipboard.

Step 4 — Paste into Figma

Open Figma. Press Cmd+V (or Ctrl+V). The page lands on your canvas as a frame full of real layers.

Try this: open the layers panel and expand the imported frame. You'll see a tree of frames, text nodes, image fills, and auto-layout containers. Click any heading — it's editable text, not a flattened image. Click an image — it's a real image fill you can replace.

Step 5 (optional) — Capture only what you need

Don't want the whole page? Click Select Element in the floating bar, then hover and click any section. Only that section exports. Good for grabbing just a hero, just a pricing table, or just a navbar.

What gets preserved

This is where most "import a website" tools fall down. Here's what we preserve:

• Real text — every heading, paragraph, and label is editable Figma text. Font family, size, weight, line height, letter spacing carry across.
• Colors as fills — backgrounds and text colors come in as Figma fills. You can swap them, organize them into styles, or pull them into a design system.
• Images — every <img> and CSS background image becomes a real image fill you can replace or extract.
• Spacing and layout — padding, margin, gap. We map flex and grid containers to Figma auto-layout where it's a clean fit.
• Stacking order — z-index relationships are preserved as layer ordering.

What doesn't import cleanly (the honest part)

We don't want to oversell this. Here's what's still rough:

• Videos come in as a single thumbnail frame (Figma doesn't support video).
• Canvas elements — custom drawings, charts using <canvas> — import as flat images. The drawings inside aren't extractable.
• CSS animations capture the resting state. The animation itself doesn't carry across because Figma doesn't have a runtime to replay it.
• Complex SVG gradient stops — we get them roughly 90% of the time, but very intricate radial gradients sometimes flatten. We're working on this.

If your audit absolutely depends on one of those, layer the extension capture with a screenshot of the missing bits.

Common use cases

We see designers use this for four big things:

1. Competitor audit and teardown. Capture a competitor's full site, paste into one Figma file, annotate. Way faster than screenshots-and-crops, and you can pull their color palette into your design system in one minute.
2. Client redesign starting point. Most redesign projects start with "what they have today." Capturing the live site means your day-one Figma file is the real product, not a vibe deck. See our full redesign workflow for what to do after the import.
3. AI-generated site → designer's Figma file. Tools like v0, Bolt, and Lovable spit out a live site. Bring that into Figma to polish typography, fix spacing, and turn it into a proper component library.
4. Personal inspiration library. Hit a page you love, capture it, file it in a Figma "swipe file." Real layers beat Pinterest because you can take individual components apart.

How it compares to alternatives

Two questions we get a lot:

"Why not just use html.to.design?" It's a great tool — we recommend it when you have raw HTML files. But it works inside Figma as a plugin and asks for HTML you paste in. For live sites, especially ones with JavaScript that renders content on load, a Chrome extension that captures the rendered DOM is more accurate.

"Why not Anima?" Anima is design-to-code. Different problem. If you need to generate React from a Figma design, use Anima. If you need to get an existing website into Figma, use Export to Figma.

We did a longer side-by-side at html.to.design vs Anima vs Export to Figma.

Ready to try it?

Install Export to Figma from the Chrome Web Store. Free, 10 exports a month, no credit card. If you ship a redesign or audit using it, we'd love to see — drop us a note.