TL;DR
To convert a live website to Figma: install the html2design plugin, open the target page in Chrome, and use the Chrome extension to capture it directly — or copy the page's outerHTML from DevTools and paste it into the plugin. The result is a native Figma frame with editable text, accurate colors, and a layer structure that mirrors the rendered HTML. The whole process takes under 10 minutes for a single page.
Why Convert a Live Website to Figma?
The standard design workflow starts in Figma and ends in code. But that direction doesn't work when the code is already ahead of Figma — which is most of the time in established products. Developers ship features, designers update the Figma file later (or don't), and within a few sprints the Figma file no longer reflects what's actually live.
Converting the live website back to Figma closes that gap. Instead of re-creating pages from scratch in Figma based on screenshots and memory, you import the rendered HTML directly — getting a Figma file that is, by definition, accurate to what ships.
The workflow also has value outside of sync situations. Competitive analysis, client handoffs, rapid prototyping, and redesign audits all benefit from having the live site available as editable Figma layers rather than static reference screenshots. We'll cover the specific use cases in detail after the how-to.
Two Methods: Which One to Use
html2design offers two import paths for live websites. They produce identical Figma output — the difference is in how you extract the HTML from the page.
| Method | Best for | Requires |
|---|---|---|
| Chrome extension | Public websites, marketing pages, competitor sites, any page you can open in Chrome | Chrome + html2design extension installed |
| HTML code paste | Localhost, staging environments, auth-gated dashboards, internal tools | Chrome DevTools (built-in, no install) |
If the page is publicly accessible, the Chrome extension is faster — one click and it handles everything. If the page requires login, runs on localhost, or is behind a staging URL that the extension can't reach, use the HTML paste method. See the full method comparison guide for a detailed breakdown of edge cases.
Step-by-Step: Convert a Website to Figma
Step 1
Set up html2design in Figma
Open Figma and go to Plugins → Browse plugins in Community. Search for "html2design" and install it. Once installed, open any Figma file and launch the plugin from Plugins → html2design. Leave Figma open — you'll come back to it after extracting the HTML from the browser.
Create a dedicated Figma file for site imports rather than importing into an active design file. This keeps imported layers separate from your design work and makes it easy to reference or delete the import later without affecting in-progress designs.
Step 2
Open the target page in Chrome and let it fully load
Navigate to the page you want to convert in Chrome. Wait for all content to load — especially if the page has lazy-loaded images, sticky headers that change state on scroll, or JavaScript-rendered sections. The import captures the DOM at the moment you trigger it, so partial renders produce partial imports.
For pages with above-the-fold vs below-the-fold content that renders differently, decide upfront what you want to capture. You can capture the page at a specific scroll position by scrolling to that point before triggering the extension. For full-page imports of long pages, the multi-page import workflow covers how to handle sections systematically.
Step 3a
Chrome extension method — capture directly from the page
If you installed the html2design Chrome extension, click the extension icon in your Chrome toolbar while on the target page. The extension reads the rendered HTML and computed CSS styles for the full page and sends them to the Figma plugin automatically.
Switch to Figma. The plugin will show a preview of the incoming import. Click Convert. The plugin generates native Figma frames from the HTML and CSS data the extension sent.
If the extension doesn't capture images: Some sites serve images with restrictive CORS headers that prevent the extension from embedding them. The frames will still be accurate in every other respect — text, colors, layout, spacing — with placeholder rectangles where images would be. This is typically fine for redesign and audit work.
Step 3b
HTML paste method — copy outerHTML from DevTools
If the page is behind a login, on localhost, or otherwise not reachable by the extension: open Chrome DevTools with Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows/Linux). Go to the Elements tab.
Right-click the <body> element (or the specific section you want to import) and choose Copy → Copy outerHTML. Switch to Figma, open the html2design plugin, click the Code tab, paste the HTML, and click Convert.
For sections where computed styles matter (particularly for fonts and colors that don't appear directly in the HTML), html2design reads the computed CSS alongside the HTML, so the output accurately reflects the browser-rendered values even for utility-class frameworks like Tailwind.
Targeting a specific component instead of the full page: right-click the component in the page, choose Inspect, right-click the highlighted element in the Elements panel, and choose Copy → Copy outerHTML. This gives you a focused import of just that component — useful for auditing individual UI elements.
Step 4
Organize the imported layers in Figma
After conversion, you have a native Figma frame on your canvas. The layer names come from the HTML structure (IDs, class names, semantic tags) — they'll be more or less readable depending on the site's markup quality.
For single-page imports, rename the top-level frame to something descriptive: Homepage — Desktop — 2026-04-10 is a good pattern that shows what it is and when it was captured. For multi-page imports, use Figma pages to separate each site page and name them to match the site's URL structure (/home, /pricing, /blog).
You don't need to clean up the layer structure for most use cases. The import is a reference, not a deliverable — use it as a baseline to work from, not an output to ship.
What You Get in Figma
The Figma output from a website conversion is a native frame with:
- Editable text layers — every text node on the page is a Figma text layer with the correct font, size, weight, line height, and color. You can edit text directly.
- Accurate color fills — background colors, border colors, and text colors are all the computed values from the rendered page, not the CSS source. If a utility class like
bg-blue-600renders to#2563EB, that's what you get in Figma. - Positioned frames — each element is positioned and sized to match its rendered dimensions. Padding and margin are reflected in the layer spacing.
- Embedded images — images are embedded as Figma image fills (subject to CORS restrictions on the source site).
- Layer structure — the layer hierarchy roughly mirrors the HTML DOM structure, making it possible to navigate the Figma file using knowledge of the site's markup.
What you don't get is Auto Layout, Figma Variables, or Component definitions — those require manual work after import. For most use cases (redesign, audit, prototyping), the flat imported structure is sufficient. For design-system extraction work that requires Variables and Components, the design system from existing code guide covers that workflow.
Five Use Cases for Converting Live Sites to Figma
Redesign baseline
Import the current site before starting a redesign. Work from production truth instead of outdated Figma files or screenshots. Covers what the site actually ships, not what was designed.
Client design handoff
Convert a client's live site to Figma, duplicate the frames, and redesign on top of real content. Proposals feel grounded because they show actual pages being improved, not generic mocks.
Competitive analysis
Import competitor sites to audit their design systems: type scales, color tokens, component patterns, spacing rhythms. More accurate than visual inspection alone.
Rapid prototyping
Import a production page, make changes in Figma, add Prototype connections, and share with stakeholders — without rebuilding the page from scratch in a design tool.
Design-system audit
Import the live site to see what's actually shipping. Compare against the Figma design system. Document the drift before the next design system review sprint.
Onboarding new designers
New designers joining a team can import the live product to understand the actual design language — rather than relying on a Figma file that may not reflect current production state.
How It Compares to Manual Recreation
The alternative to importing a live website into Figma is rebuilding the page manually in Figma from screenshots. This is the standard approach when no conversion tool is available, and it has significant drawbacks:
- Time: Manually recreating a single marketing page in Figma typically takes 2–4 hours for an experienced designer. A homepage with a complex hero, feature grid, and testimonials section could take longer. html2design converts the same page in under 5 minutes.
- Accuracy: Manual recreation introduces approximation. Font sizes are eyeballed. Spacing is guessed. Colors are sampled from screenshots with inherent lossy compression. html2design reads computed styles directly, so font sizes, spacing values, and colors are exact.
- Maintenance: A manually recreated Figma file becomes stale the moment the site changes. With html2design, you can re-import a page at any time to update the Figma baseline to the current production state.
The main advantage of manual recreation is that you produce a cleaner Figma file — with proper Auto Layout, named components, and an organized layer structure. If the goal is a production Figma file for an active design team, manual cleanup after an html2design import produces the same result in less total time than full manual recreation.
Common Issues and Fixes
Most imports work cleanly. When they don't, the issues follow a predictable pattern:
Fonts not rendering correctly
If the page uses a web font that Figma doesn't have installed locally, text will fall back to a system font. Fix: install the font on your machine (Google Fonts, Adobe Fonts) or replace the text layers with your team's shared font after import.
Images appear as gray rectangles
This happens when the site serves images with CORS headers that block cross-origin reads. The layout is still accurate — you can replace image placeholders manually in Figma, or use the DevTools method to capture the outerHTML with img src attributes and substitute images after import.
Fixed-position elements (navs, overlays) out of place
CSS position: fixed elements are placed at their visual position on screen at the time of import. If a fixed navigation overlaps the page content in the import, move it to a separate layer group. For imports where the nav position matters, trigger the import at the top of the page (scroll position 0) so the fixed nav is correctly positioned relative to the content.
Large pages produce complex layer trees
A long page with many sections will produce a deep layer hierarchy. For redesign work, it's often better to import sections independently rather than the full page — capture the hero, then the feature grid, then the footer as separate imports, and compose them in the Figma file manually. This produces a cleaner working file without sacrificing accuracy.
Next Steps
Once you have the live site in Figma, the most common next steps are:
- Starting a redesign from the import — the website redesign checklist covers the full workflow from import to launch.
- Extracting design tokens from the import — see the design tokens guide for how to register Variables from imported values.
- Auditing the import for design debt — the design system from existing code guide covers systematic component extraction.
- Building a multi-page site import — the multi-page import guide covers the full page-by-page workflow for an entire site.
FAQ: Converting Websites to Figma
How do you convert a website to Figma?
Install the html2design Figma plugin. For public sites, use the Chrome extension — it captures the rendered HTML and computed styles and sends them to Figma automatically. For private or localhost pages, open DevTools, copy the outerHTML, and paste it into the plugin's code input. The plugin generates native Figma frames in seconds.
Can you import a live website into Figma?
Yes. html2design imports any live website into Figma as editable native layers. Public sites work via the Chrome extension. Localhost, staging, and auth-gated pages work via the HTML paste method. The import reads computed styles — so the Figma output reflects what the browser actually renders, not just the CSS source.
Is it better to screenshot a site or import it into Figma?
Import is significantly more useful. A screenshot produces a flat, non-editable image in Figma. An html2design import produces native text layers (editable), accurate color fills (extracted from computed styles), and a layer structure you can work with. If you need to make changes to the design — even small ones — an import is the right choice.
Does this work with JavaScript-rendered sites (React, Next.js)?
Yes. html2design reads the rendered DOM after JavaScript has executed, not the source HTML. React, Next.js, Vue, Angular, and any other JS-rendered framework all work — the import captures what the browser displays, including dynamic content and JS-modified DOM state.
How long does it take to convert a website to Figma?
Under 5 minutes for a single page once you have the plugin installed. The conversion itself takes 10–30 seconds depending on page complexity. Most of the time goes to setting up the Figma file and organizing the import afterward. Compare that to 2–4 hours for a manually recreated page.