HTML to Design: A Redesign Workflow for Designers and Agencies

Design usually flows one way: a mockup in Figma becomes HTML in a browser. But a lot of real work runs in the opposite direction. A client hands you a live site and asks for a redesign. A product has drifted from its original mockups over three years of shipping. A developer built a feature straight in code, and now the design team needs to own it.

That reverse direction — HTML to design — means taking what exists in the browser and turning it back into an editable design file. Done well, it saves days of manual rebuilding and gives you something better than a mood board of screenshots: a working file with real frames, text, styles and components.

This article lays out a practical workflow for designers and agencies, from the first audit to a clickable prototype, using HTML to Frames.

What "HTML to design" actually means

The phrase covers any process that converts live code or a website into a design file you can edit. There are three broad ways to do it:

1. Manual rebuild — open the site, measure it in DevTools, recreate every frame by hand.
2. Screenshots — capture images of each page and paste them into Figma as reference.
3. Editable layers — convert the rendered page into real Figma frames, text, vectors and images.

Each has a place, but they differ sharply in cost and in what you can do afterward.

Screenshots are fine for reference. Manual rebuilds still make sense for a single small page you want to restructure from scratch. For anything bigger, editable layers are the starting point that scales.

Who this workflow is for

• UI/UX and web designers running redesigns, audits or inspiration teardowns.
• Design agencies that need a client's site in Figma within minutes to prepare a redesign proposal. The Team plan shares five seats under one license key.
• Design-system teams consolidating colors, type and components that have drifted in production.
• Front-end developers who want to hand a localhost build to a designer as a Figma file.
• Product managers and marketers who need logged-in dashboards or specific states in Figma for planning.

The workflow, step by step

Here's the sequence we recommend. You can skip steps, but the order matters: each one builds on the last.

Step 1: Audit what exists

Before importing anything, decide which pages matter. For most sites, that's a short list:

• the home page,
• one or two key landing or product pages,
• pricing or checkout,
• a content template such as a blog post,
• any logged-in screens that are part of the redesign scope.

Write down which states you need too — an open navigation menu, a form with validation errors, a filled cart. Those can't be reached from a URL alone; you'll capture them with the Chrome extension.

Step 2: Import a responsive set

Now bring the pages in. For public pages:

1. Open HTML to Frames and choose Multiple.
2. Paste up to 10 links. They're processed one after another, and each page becomes one row on the canvas.
3. Choose the Responsive set — Desktop, Tablet and Mobile in one click (up to four screens per import on Pro and Team).
4. Turn on Hide cookie banners & popups so overlays don't cover content.
5. Turn on Styles & variables (Pro) if you plan to extract a design system in the next step.

The Desktop screen uses Site width: the plugin measures the page's real design width rather than guessing. Full-bleed sites come in at 1920 with the content centred, boxed sites at their box width, and fluid sites at 1440. One site gets one width across all pages.

Remember the counting rule: one import = one page with all its screens. A responsive set of five pages is five imports, not fifteen.

After the first import, Import linked pages lets you pick more pages from the same site from a list. For logged-in pages or localhost, use the Chrome extension and Send to Figma. For pages that only exist as files, use Local file to import an HTML file, a whole site folder or a .zip. The HTML to Figma guide covers every source in detail.

Step 3: Extract the design system

This is where an import stops being a picture of the site and becomes a working foundation. With Styles & variables (Pro) turned on, the plugin creates:

• Color variables from colors used at least twice and from the site's CSS custom properties — --brand-primary becomes brand/primary — in a Colors · <domain> collection (up to 96).
• Text styles (up to 48).
• Shadow styles (sm, md, lg, xl).

Two details make this practical for real projects:

• Reuse. If your file already has variables or styles with matching values, the plugin reuses them. Importing the same site twice creates nothing new.
• Snap to my file's styles (Pro). If you already have a design system, imported colors and text can snap to the closest style in your file when there's no exact match, using perceptual OKLab color distance and matching font family, weight, and size within 10%.

If the site supports dark mode, choose Light + Dark (Pro). The page is captured in both color schemes, and you get one variable collection with Light and Dark modes, plus a dark copy of each screen. Note that Figma Free files allow one mode per collection, so the dark mode is skipped there with a note.

The output is an honest inventory of what the site actually uses — often the most useful artifact of the whole audit. Seeing a long run of near-identical grays in one collection makes the case for consolidation better than any slide.

Step 4: Turn repetition into components

With Components & hover states (Pro), repeated structures — cards, buttons, menu items — become components and instances, with text and image overrides kept. Elements that have a hover look become a component set with Default and Hover variants, plus an on-hover prototype interaction. Main components are collected in a Components · <site> frame.

This gives you a component inventory to rationalize. Typical next moves:

• merge near-duplicate button components into one set with variants,
• rename components to match your naming convention,
• swap instances to your own library components where they already exist.

Step 5: Iterate on real structure

Now design. Because the layout comes in as nested frames with Auto Layout where the plugin could verify it, changes behave like they would in a file you built yourself:

• edit headlines and watch the stack reflow,
• change a gap or padding on one section,
• swap a color variable and see every usage update,
• resize a frame and let Fill and Center do their job.

In our tests on real sites, Auto Layout was inferred on roughly 86–97% of frames. Frames that stay absolute get sensible constraints, and the results screen lists why a frame stayed absolute. The Auto Layout explainer goes into the details.

A useful habit: keep the original import on its own page as the "before" and duplicate it for your redesign. Turn on Reference screenshot (Pro) during import if you want a hidden, locked image layer for side-by-side comparison with the live page.

Step 6: Prototype

Imported pages are already partly wired:

• Links stay clickable (Open link).
• Links between imported pages become Navigate interactions, so a multi-page import is a clickable flow out of the box.
• Fixed and sticky headers and horizontal scroll areas work in Present mode.
• Hover variants from Step 4 come with on-hover interactions.

That means you can put the "before" prototype next to the "after" prototype in a client presentation without wiring either from scratch.

Step 7: Keep it in sync

Sites keep changing. Each imported frame stores its source URL, so Re-import is one click when the live page changes. Since existing variables and styles are reused, a re-import doesn't flood your file with duplicates.

Use cases in practice

Agency redesign proposals

An agency pitching a redesign needs the client's current site in Figma fast. Import the key pages as a responsive set, extract the design system, and you have a factual "here's what you have today" section — with the real color and type inventory — before you show a single new idea. The Team plan shares five seats, so several designers can work from the same license. See website to Figma and the redesign guide.

Design–code drift audits

Import the production page and place it next to the original mockup. Differences in spacing, colors and type show up layer by layer, and the generated variables reveal how many off-palette colors crept in.

Developer-built features

A developer prototyped a feature on localhost. Capture it with the Chrome extension, send it to Figma, and the designer refines it in the same file as the rest of the product.

AI-generated pages

If the starting point is HTML from Claude or Cursor, connect the assistant over MCP and the page lands in your open plugin. See AI to Figma.

Learning and teardown

Students can import well-built sites and study how sections are structured, how type scales, and how spacing repeats — one layer at a time.

Privacy considerations for client work

Agencies often import client sites, so it matters what happens to the data. Pages are rendered in an isolated, sandboxed browser; the result is delivered once and then deleted from memory, never written to disk. Uploaded local files are deleted as soon as the import finishes. The plugin doesn't read your Figma file content. The security page has the full policy.

Getting started

The fastest way to see whether this workflow fits is to try it on one real page you're working on. Free includes 10 imports per month; Pro adds the design-system and component features described above. Compare plans on pricing, browse the docs, or see how other tools compare on the alternatives page.