Can I convert an old website to Figma without a Chrome extension?

Yes. HTML to Figma (html2design) is a native Figma plugin that requires no Chrome extension. You copy the HTML from your browser's DevTools or directly from the legacy codebase, paste it into the plugin, and it generates fully editable Figma layers.

How do I rebuild a website in Figma from old HTML?

Open the legacy site in your browser (or locally), right-click the section you want, choose 'Inspect', and copy the outer HTML. Paste that HTML into the html2design Figma plugin. The plugin converts it into native, editable Figma frames with typography, colors, and layout preserved.

What types of legacy HTML does the plugin support?

HTML to Figma supports any valid HTML and CSS — including old table-based layouts, Bootstrap 3/4 grids, inline styles, and modern Flexbox. If the browser can render it, the plugin can convert it.

Convert Old Website to Figma — Legacy Site Migration Guide (2026)

Q: Does the old website need to be live to convert it to Figma?

No. HTML to Figma works entirely from pasted HTML and CSS code. You can convert a legacy site even if it only exists as files on disk — no live server or public URL required.

Convert Old Website
to Figma

Stop rebuilding legacy HTML from scratch. Paste your old site's code directly into Figma and get fully editable layers — with layout, typography, and colors preserved — in under 2 minutes.

The Problem with Legacy Redesigns

⏳

Hours of manual work

Recreating an old site in Figma by hand takes 2–4 hours per page. Spacing, font sizes, and colors drift. You end up with a design that doesn't match the live product.

🔗

Extension tools need a live URL

Chrome-extension importers like html.to.design require a publicly accessible URL. Legacy sites on staging servers, internal intranets, or local builds can't be captured that way.

🏗️

Legacy HTML is messy

Old sites often use table layouts, inline styles, or Bootstrap 3 — formats that screenshot-based tools handle poorly. You need a tool that reads the actual CSS, not a snapshot.

How to rebuild a website in Figma

The html2design plugin works from raw HTML and CSS — not screenshots. That means it handles legacy codebases just as well as modern React apps.

Step 01

Open the legacy site in your browser

Open the old website in Chrome or any modern browser. It doesn't matter if it's running on localhost, a staging server behind a VPN, or even just a saved .html file on your desktop. HTML to Figma doesn't need a public URL.

If the site no longer exists at all, you can work directly from the source files. Open the HTML in a browser via File > Open or a simple local server like python3 -m http.server.

Step 02

Copy the HTML from DevTools

Right-click the section or page you want to migrate. Choose Inspect. In the Elements panel, right-click the root element of that section and choose Copy > Copy outerHTML.

For a full-page migration, select the <body> element and copy its outerHTML. For individual components — a nav, hero, or card grid — select just that element. You can import the page section by section and assemble it in Figma.

Step 03

Paste into the html2design plugin

Open Figma, run the HTML to Figma plugin from the plugin menu, and paste your copied HTML into the input field. Click Generate.

The plugin reads the HTML structure and the browser's computed CSS — including fonts, colors, padding, margin, Flexbox layout, borders, and shadows — and recreates each element as a native Figma layer. You get a named layer tree you can actually edit, not a flattened screenshot.

Step 04

Iterate and redesign in Figma

Once the legacy site is in Figma as editable layers, your designer can iterate directly — adjust spacing, update typography, swap colors, and explore layout changes without rebuilding from scratch.

This is the fastest way to create a redesign baseline. Instead of recreating every pixel by hand, you start from an accurate digital twin of the live site and make only the changes that matter.

What the plugin preserves from legacy HTML

Even 10-year-old Bootstrap and table-based layouts come through accurately.

Typography

✓ Font family, size, and weight
✓ Line height and letter spacing
✓ Text alignment and color
✓ Inline styles (font-size, color)

Layout & Spacing

✓ Flexbox direction, alignment, gap
✓ Padding and margin (computed)
✓ Width, height, and positioning
✓ Bootstrap grid columns

Visual Styles

✓ Background colors and gradients
✓ Borders, border-radius
✓ Box shadows
✓ Image fills and background images

Layer Structure

✓ Named layers from HTML tags/classes
✓ Nested group hierarchy
✓ SVGs as native vector paths
✓ Editable text layers (not rasterized)

Common legacy migration scenarios

Redesigning a Bootstrap 3 or Bootstrap 4 site

Bootstrap grid columns, cards, and navigation components paste cleanly into the plugin. The computed CSS provides accurate widths and gutters. You can migrate an entire Bootstrap template into Figma and hand it off to designers for a visual refresh — without rewriting any HTML first. See also: Bootstrap to Figma guide.

Migrating an internal tool or admin panel

Internal tools often live on private servers or VPNs — places Chrome-extension importers can't reach. HTML to Figma doesn't care. Open the admin panel in your browser, copy the relevant HTML from DevTools, and paste it into Figma. No public URL, no extension access issues.

Documenting a live site before a full rewrite

Before replacing an old site entirely, teams often need a design audit. Convert the existing site page by page into Figma to create a visual inventory — then annotate, restructure, and hand off to development as the redesign brief. Much faster than screenshotting and manually tracing each page.

Converting an email template to Figma

HTML email templates are notoriously table-heavy and tricky to document. The plugin reads the raw HTML and renders it as Figma layers — giving your design team an editable version of every email in the library. No live URL needed, just the template file.

Frequently asked questions

Does the old website need to be live to convert it to Figma?

No. HTML to Figma works entirely from pasted HTML and CSS — not from a URL or a live server. You can open an archived .html file directly in your browser, copy the HTML from DevTools, and paste it into the plugin. No deployment required.

What about table-based layouts? Will those work?

Yes. The plugin reads computed CSS, so it doesn't matter whether the layout uses tables, floats, Flexbox, or Grid. As long as a modern browser can render the HTML, the plugin can import it. Table cells become frames with accurate widths and positions.

Can I import just one section, not the whole page?

Yes — and that's often the best approach for legacy sites. Select the specific <header>, <section>, or <div> you need in DevTools, copy its outerHTML, and import just that piece. You can combine multiple imports on the same Figma canvas.

How is this different from taking a screenshot?

Screenshots give you a flat image — you can't edit text, change colors, or adjust layout. HTML to Figma gives you native, editable Figma layers: each text block is a text layer, each container is a frame, and each color is an actual fill value. You can iterate immediately without retracing anything.