Why Import a Website into Figma?
The classic design workflow goes one direction: Figma files become shipped code. But modern teams constantly need to run it in reverse — capturing what's actually in production and pulling it back into Figma.
Common reasons engineers and designers do this:
- Legacy migration — documenting or redesigning a codebase that predates the design system, with no source Figma file
- Developer handoff audit — verifying that shipped components match the original design file spec
- Competitor analysis — pulling a competitor's UI into Figma to study spacing, type scale, and component patterns
- Design system kickstart — bootstrapping a Figma library from an existing product rather than rebuilding from scratch
- Prototyping from real data — using live component HTML as the starting point for a new design iteration
Figma doesn't have a built-in import-from-URL feature. You need a plugin. And not all plugins work the same way.
The Two Methods for Importing Websites into Figma
Every tool for getting web content into Figma uses one of two underlying approaches. Understanding the difference determines which one fits your situation.
URL-based Chrome extension
A Chrome extension captures the rendered DOM of a live, publicly accessible page and sends it to a Figma plugin.
- ✓ Works without copying code
- ✗ Requires a live public URL
- ✗ No localhost support
- ✗ Can't reach pages behind auth
- ✗ Browser extension required
HTML code paste (html2design)
You copy the HTML and CSS of any element using browser DevTools, then paste it directly into the Figma plugin panel.
- ✓ Works with any HTML source
- ✓ Full localhost support
- ✓ Works behind auth walls
- ✓ No Chrome extension needed
- ✓ Works with unreleased builds
The right choice depends on what you're importing. If you need a live, public marketing page and prefer a one-click workflow, a Chrome extension may be faster. For everything else — localhost, staging environments, auth-gated dashboards, email templates, or component-level imports — the code-paste approach is the only option that consistently works.
Developer note: The URL-based method sends your page's HTML to a third-party server for processing. The code-paste method (html2design) runs entirely within the Figma plugin context — no external server receives your markup. For internal tools or proprietary UI, this matters.
Method B: How to Import a Website into Figma with html2design
This method works for any web content you can open in a browser — live sites, localhost, Storybook, email templates, internal tools behind auth. Here's the step-by-step.
Install the html2design Figma plugin
Open Figma. In the Community tab, search for html2design (also listed as "Jesse - HTML to Figma - Import Websites as Editable Designs"). Click Install. Requires an active subscription ($12/mo or $96/yr).
Open the target website in your browser
Navigate to whatever page or component you want to import. This can be any URL your browser can open:
- A live website:
https://yourproduct.com/dashboard - Your local dev server:
http://localhost:3000 - A Storybook story:
http://localhost:6006/?path=/story/... - Any page you're logged into (auth cookies work normally)
Copy the HTML using browser DevTools
Open DevTools (Cmd+Option+I on Mac, F12 on Windows). In the Elements panel, locate the root element of the section or component you want to import. Right-click the element → Copy → Copy outerHTML.
For the full page above-the-fold view, select the <body> element or the main layout wrapper. For a specific component, select only that element — smaller scope produces cleaner Figma layers.
Paste into the html2design plugin in Figma
In your Figma file, open the plugin via Main Menu → Plugins → html2design. Paste the copied HTML into the input field. Click Convert.
The plugin creates native Figma layers on the canvas: frames for containers, text layers for typography, rectangles for backgrounds, and vector paths for SVGs.
Review and clean up the imported layers
After import, you get a fully editable layer tree. Common cleanup steps:
- Rename auto-generated layer names to match your component vocabulary
- Verify Auto Layout settings on flex containers (html2design maps CSS flexbox automatically)
- Detach and replace web fonts not in your Figma team library
- Remove any utility layers you don't need (e.g., invisible overflow wrappers)
Importing a Full Page vs. a Component
Full-page imports and component-level imports require different strategies.
Full page import
Select the <body> or top-level layout wrapper. Be aware that very large pages (hundreds of elements) will produce complex layer trees that take more time to convert and clean up. A pragmatic approach: import section by section, starting with the hero or primary UI region.
Component-level import (recommended)
Import individual components rather than entire pages. This gives you:
- Cleaner, more focused layer trees
- Faster conversion times
- Easier alignment with your existing Figma component library
- More control over what ends up in your design file
Pro tip: Use the browser's responsive design mode to capture mobile layouts. Set the viewport to 375px wide before copying the HTML — the computed styles will reflect the mobile breakpoint, and html2design will generate a mobile-sized Figma frame.
What Gets Preserved — and What Doesn't
Preserved by html2design
- Typography: font family, size, weight, line-height, letter-spacing, text alignment
- Layout: CSS Flexbox → Figma Auto Layout (direction, gap, padding, alignment)
- Colors: fills, borders, gradients, box shadows
- Border radius and opacity
- Background images (as fills)
- SVG elements as native Figma vector paths
- JavaScript-rendered content (captured post-execution via DevTools)
Not preserved (design decisions required)
- CSS animations and transitions — static snapshot only
- Hover states — copy the hover DOM separately if needed
- CSS Grid layout — falls back to absolute positioning
- Video and canvas elements — captured as empty placeholders
- Fonts not available in Figma — fall back to Inter with a warning
Importing a Website vs. Importing Raw HTML
You might wonder: is there a difference between importing a website (live page) and converting raw HTML/CSS code?
Technically, no. Both methods use browser-rendered HTML as input. The difference is only in where you get the HTML from:
- From a live page: use DevTools → Copy outerHTML. You get the computed DOM — JavaScript has already executed, all styles are resolved.
- From your editor: paste raw HTML/CSS directly. You get exactly what you wrote. Best for components you haven't opened in a browser yet.
In both cases, html2design processes the HTML the same way. Use whichever source is more convenient.
Comparing Alternatives
For a detailed breakdown of html2design vs. URL-based tools like html.to.design vs. manual recreation, see our full comparison page. The short version:
- html2design (code-paste): works everywhere, including localhost and auth-gated pages. No browser extension. Code-first.
- URL-based tools: convenient for live public pages. Require a Chrome extension. Can't reach localhost or private URLs.
- Manual recreation: full control, no automation. Only practical for simple components or when pixel-perfect accuracy matters more than speed.
Frequently Asked Questions
Can I import a website into Figma for free?
Some Chrome extension tools have free tiers with watermarks or import limits. html2design starts at $12/month with unlimited imports and no watermarks.
Can I import a localhost website into Figma?
Yes — with the code-paste method only. Open your local dev server in a browser, copy the HTML via DevTools, and paste it into the html2design plugin. Chrome extension tools that work from a live URL cannot reach localhost.
Does Figma have a native website import feature?
No. Figma doesn't natively support importing websites or HTML. You need a plugin from the Figma Community — either url-based or code-paste.
Does importing a website preserve CSS Auto Layout?
Yes. html2design maps display: flex, flex-direction, gap, padding, and align-items to Figma's native Auto Layout system. This is one of its most useful features for design system work.
How long does it take to import a page?
A single component converts in 2–5 seconds. A full section takes under 10 seconds. A dense full-page layout may take 20–30 seconds. This compares to 2–4 hours of manual Figma work.
Related Articles
How to Convert HTML to Figma: A Developer's Guide →
The core workflow — DevTools, code paste, and cleaning up the output in Figma.
How to Convert React Components to Figma Designs →
React renders to HTML — capture any component state from Storybook, Next.js, or localhost and import it directly.
Tailwind to Figma: Build a Design System from Your Tailwind Components →
Extract tokens as Figma Variables and convert your Tailwind component library to native Figma layers.
Try it now
Import your first page in under a minute
Open DevTools. Copy outerHTML. Paste into html2design. Get editable Figma layers instantly — no extension needed.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime