What's the fastest way to copy a website to Figma?

Install Export to Figma (free Chrome extension), open the website in Chrome, click the extension, paste into Figma. Under 30 seconds including the install. The result is editable Figma layers — real fonts, selectable text, named hierarchy — not a flat screenshot.

Will I get editable text and shapes, or just an image?

Editable Figma layers. Real text you can select and edit (in the original font), real shapes you can recolor, real layer hierarchy. Not a flat screenshot. This is the key difference between Chrome extensions like Export to Figma and the older 'screenshot and trace' workflow.

Can I copy a website to Figma for free?

Yes. Export to Figma includes 10 free captures per month, every month, with no credit card required. That's not a trial — it's a permanent free tier. Pro is $1/month during the launch promo for unlimited captures.

Does this work on any website?

Any website that renders in Chrome can be copied. This includes public marketing sites, SaaS dashboards behind login, AI-generated apps from Lovable/Bolt/v0/Cursor/Claude Code, Webflow/Framer/WordPress/Shopify sites, and even localhost dev URLs. The only cases that don't work are non-browser content like native mobile UIs or PDF files.

Can I copy just a single section of a webpage?

Yes — Export to Figma supports element-level capture. Click the extension icon, hover over the element you want (a hero, a pricing card, a navigation bar), click. Only that element comes into Figma as its own frame. Useful for building component libraries from real website examples.

Does the copy include auto-layout?

Yes — CSS flexbox and grid layouts translate to Figma auto-layout where possible. The result is responsive-aware Figma frames, not static images. Simple grids translate cleanly; complex CSS Grid with named template areas may need manual cleanup after import.

What about copying authenticated pages — my logged-in dashboard, member area, etc.?

Yes, this is one of the workflow's main strengths. Sign in to the site in Chrome first. The extension uses your existing Chrome session, so anything you can see while signed in captures normally. This is the case that breaks every server-side capture tool (most Figma plugins, etc.).

Why don't Figma plugins that paste URLs work as well?

Figma plugins fetch URLs from their own servers, outside your browser. That breaks on three patterns: authentication (the server can't access your login session), modern JavaScript apps (the server sees an empty HTML shell before JS executes), and AI-generated apps (which depend entirely on client-side rendering). A Chrome extension reads the DOM after Chrome has finished painting, which fixes all three.

How to Copy a Website Into Figma in One Click (2026)

The fast answer

To copy any website into Figma as editable layers:

Install Export to Figma — free Chrome extension.
Open the website in Chrome.
Click the Export to Figma extension icon.
Switch to Figma. Press Cmd+V / Ctrl+V.

The site appears as editable Figma layers. Done.

Total time: 30 seconds for the install, then under 10 seconds per capture.

What you actually get

The output is real Figma layers, not a flat image:

Editable text (the original copy, in the original font, at the original size and weight).
Real shapes (you can recolor, resize, restyle freely).
Embedded images at original resolution.
Layer hierarchy matching the page structure.
Auto-layout where the source used CSS flexbox or grid.

You can edit any element directly in Figma. No manual rebuild, no eyedropping colors and guessing fonts.

What you don't get

Animations (Figma is a static design tool).
Interactive states like hover or focus (unless you trigger them before capturing).
JavaScript-driven behavior.
Native form submission or navigation behavior.

For 99% of design work — redesigns, audits, component extraction, polish — these omissions don't matter. You're working visually in Figma.

Step-by-step walkthrough

Step 1: Install the Chrome extension

Visit the Chrome Web Store listing and click "Add to Chrome." Pin the extension to your toolbar so the icon stays visible.

Step 2: Open the website you want in Chrome

The site can be:

A public marketing page (yoursite.com, a competitor's domain, etc.)
A logged-in SaaS dashboard — the extension uses your existing Chrome session
An AI-generated app preview from Lovable, Bolt.new, v0.dev, Cursor, or Claude Code
A Webflow, Framer, WordPress, or Shopify site
A localhost dev URL like localhost:3000
A member-only or paywalled page that you have access to

Step 3: Wait for the page to fully load

This matters more than it sounds. Modern websites render content client-side after JavaScript executes. If you capture before the page is fully painted, you'll capture an intermediate state.

For most sites, 1–3 seconds is enough. For heavy SaaS dashboards or AI-generated apps, give it 3–5 seconds. For sites with scroll-triggered content (lazy-loaded sections), scroll the full length first to trigger all the loads, then scroll back to the top.

Step 4: Click the Export to Figma extension icon

You have two options:

Whole page capture: Just click the icon. The full rendered page is captured.
Single element capture: Click the icon, then hover over the specific element on the page (a hero section, pricing card, nav bar, testimonial row). The element highlights. Click to confirm. Only that element gets captured.

The capture itself takes 2–5 seconds.

Step 5: Paste into Figma

Open Figma. Create a new file or open an existing one. Press Cmd+V (Mac) or Ctrl+V (Windows).

The captured website appears as Figma frames in the current page.

Step 6: Now you can edit

Click into the frames. Select text — you'll see the original font and size in Figma's right panel, exactly as it appeared in Chrome. Click any shape — fills, strokes, and effects are real Figma values you can edit. Build components, swap variants, redesign on top.

Common use cases

Redesigning an existing site

Capture the current site → design the new version side-by-side. The captured frames serve as both reference and starting point. See the full redesign workflow guide.

Auditing competitor designs

Copy 5 competitor pricing pages into Figma. Compare layouts, copy patterns, color use side-by-side. The exact data (real spacing values, real color hex codes) makes the audit more rigorous than working from screenshots.

Polishing AI-generated apps

You built an app with Lovable, Claude Code, Bolt, v0, or Cursor. The output is functional but visually rough — typography is approximate, spacing is arbitrary, colors don't quite match your brand. Copy the running app into Figma. Polish in Figma. Hand off the polished design. See the dedicated AI apps guide.

Building a component library from real examples

Capture a great hero section from a competitor. Save it as a Figma component. Build variants. Reuse across your projects. Same for pricing tables, nav patterns, testimonials, FAQs.

Designing A/B test variants

Capture your current landing page (the control). Design 3 variants in Figma on top. Hand off to engineering or your CRO tool. Track conversions.

Why this approach works on modern sites where Figma plugins fail

The free "HTML to Figma" Figma plugins, and even paid ones like html.to.design's free tier, have a structural limitation: they fetch URLs from their own servers, outside your browser. For modern web tech, this breaks three things:

Authentication. Anything behind a login is unreachable — your SaaS dashboard, admin views, member-only pages.
JavaScript apps. React/Vue/Svelte apps return near-empty HTML on first request. Server-side fetchers catch the empty intermediate state.
AI-generated apps. Same problem amplified — Lovable, Bolt, v0, Cursor, Claude Code all depend entirely on client-side rendering.

The Chrome extension reads the resolved DOM after Chrome has finished painting, using your existing browser session. The same kind of URL that produces a flat image through a Figma plugin produces editable layers through the extension. See the comparison vs Figma plugins for the longer version.

Copy vs import vs recreate — the terms are interchangeable

These terms get used interchangeably. The mechanics are the same:

Copy a website to Figma — colloquial, generic
Import a website to Figma — same thing, more formal
Recreate a website in Figma — implies more design intent on top of the captured source

All three queries lead to the same workflow: open the URL in Chrome, click the extension, paste into Figma.

Pricing

Free: 10 captures per month, forever, no credit card.
Pro: $1/month during the launch promo. Unlimited captures.

Install Export to Figma from the Chrome Web Store — 30 seconds.