TL;DR
To convert a website to Figma, install the html2design plugin. Paste a public URL for Pixel or best-effort Editable capture, or import a complete HTML document with its CSS for local and private sources. Review the resulting text, images, styles, and measured frames against the browser 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 screenshots and memory, use a Pixel capture as a visual reference or an Editable import as a measured starting point. Editable output still needs comparison because browser and Figma rendering models differ.
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 Input Paths: Which One to Use
html2design supports public URL capture and manual HTML input. URL capture can produce Pixel or Editable output. Manual input creates editable nodes from the complete document you supply.
| Method | Best for | Requires |
|---|---|---|
| Public URL capture | Public websites, marketing pages, competitor references, deployed previews | A remotely reachable HTTP or HTTPS URL |
| Complete HTML input | Localhost, staging environments, auth-gated dashboards, internal tools | HTML with inline styles, style blocks, or reachable stylesheet links |
If the page is publicly accessible, use URL capture so the remote browser can load CSS, fonts, and images. If the page requires login or runs on localhost, export a complete document for manual input. See the full method comparison guide for 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
Prepare the target page and viewport
For URL capture, use the exact public page and viewport you want to record. For manual input, export the intended state as a complete HTML document and verify that the file still renders correctly outside the original application.
Lazy content, authenticated data, hover states, and scroll-triggered sections may need separate preparation. For long sites, the multi-page import workflow covers page-by-page handling.
Step 3a
Public URL method — capture through the plugin
Paste the public page URL into html2design. Choose Pixel mode for a lossless raster reference or Editable mode for best-effort native layers, then start the capture.
The remote browser loads the page, serializes supported visual output, and sends the capture document back to the Figma plugin. URL capture does not require a browser extension.
Use Pixel mode for visual evidence. Editable mode is intended for inspection and modification; unsupported media or complex visual regions may be rasterized.
Step 3b
Manual method — import a complete HTML document
If the page is behind a login or on localhost, export the rendered state as an HTML file. Include inline styles, <style> blocks, or stylesheet links the plugin can reach.
Load the file or paste the complete document into html2design, then convert. Verify the exported file in a clean browser tab first; if it looks unstyled there, it will also look unstyled in the plugin.
Copying outerHTML from a single element does not include external stylesheets or computed CSS values. Framework class names such as Tailwind utilities require the generated CSS to travel with the HTML.
Targeting a component: create a dedicated component route or Storybook export, then package the component HTML and generated CSS together.
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 a few manual steps.
- Accuracy: Manual recreation introduces approximation. html2design reads rendered geometry and supported computed styles directly, but browser and Figma features do not map one-to-one, so the result still requires comparison and cleanup.
- 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, paste the URL and choose lossless Pixel mode or best-effort Editable mode. For private or localhost pages, import a complete HTML document with its required CSS and assets.
Can you import a live website into Figma?
Publicly reachable URLs can be captured in Pixel or Editable mode. Localhost, staging, and authenticated sources use complete HTML documents instead. Editable output still requires review for fonts, effects, image crops, and runtime behavior.
Is it better to screenshot a site or import it into Figma?
Choose by output need. Pixel mode or a screenshot preserves a flat visual reference. Editable mode creates native nodes for supported content, which is useful when you need to change copy, fills, images, or layout and can accept cleanup.
Does this work with JavaScript-rendered sites (React, Next.js)?
Public URL capture runs JavaScript in a remote browser and can record hydrated React, Next.js, Vue, and Angular output. Manual input does not execute the original application, so private sources must be exported with their final HTML, CSS, and assets.
How long does it take to convert a website to Figma?
Conversion time depends on page length, element count, images, fonts, SVG, and browser-only effects. Include the time needed to organize layers, replace unavailable fonts or media, and compare Editable output with the browser source.