Website to Figma: An Agency Guide to Redesign Proposals

Every redesign starts with the same unglamorous task: getting the client's current site into your design tool. Screenshots are fast but dead on arrival. Rebuilding pages by hand is accurate but eats days you would rather spend on the actual redesign.

This guide shows how to move a website to Figma as real, editable layers with HTML to Frames, and how to turn that import into a redesign proposal your client can understand at a glance. It is written for agencies and freelance designers, but the workflow works just as well for in-house teams auditing their own product site.

Why bring the current website into Figma at all?

A redesign proposal is an argument. You are telling the client, "here is what you have, here is what it should be, and here is why." That argument is much stronger when the "what you have" part is accurate and editable.

• You audit the real thing. Spacing, type scale, color usage and component drift are visible in the layers panel, not guessed from a screenshot.
• You redesign on top of the existing structure. Change a hero, swap a card style, rework navigation, while the rest of the page stays intact for context.
• You show before and after side by side. Same frame size, same content, different design. Clients get it instantly.
• You save the rebuild time. The hours you would spend redrawing the current site go into exploring options.

HTML to Frames converts a page into real Figma frames, text, vectors and images, not a flat picture. If you want the background on that distinction, read HTML to canvas vs editable layers.

Website to Figma vs URL to Figma: what is the difference?

People search for both, and in practice they mean the same workflow. URL to Figma usually describes the mechanic: paste one link, get one design. Website to Figma describes the scope: several pages of one site, often across screen sizes. HTML to Frames covers both, from a single URL to Figma import to a full website to Figma capture with linked pages.

Step 1: Plan which pages to capture

Before you open Figma, list the pages that carry the redesign story. For most marketing sites that is:

1. Home page
2. One key landing or product page
3. Pricing
4. About or team
5. Blog index and one article
6. Contact or a key form page

You rarely need the whole sitemap. You need one page per template, because templates are what you will redesign. Six to ten pages usually covers it, which fits neatly into one Multiple import.

Step 2: Import several pages in one go

Open the plugin and use the Multiple source. Paste up to 10 links; they are processed one after another, and each page becomes one row on the canvas. Multiple import is available on every plan, including Free.

A few details matter for agency work:

• One site = one width. Desktop uses Site width: the plugin measures the page's real design width at import time. Full-bleed designs come in at 1920 with the content box centred, boxed sites at their box width (for example 1200, 1280 or 1440), fluid sites at 1440. Across a multi-page import, every page of the site shares that width, so your rows line up.
• Frame names are readable. Frames are named like domain/path — Desktop (1920), without protocol or www, so you can tell pages apart in the layers panel.
• Cookie banners and popups can be hidden on request, and animations are frozen for a clean frame. The site is captured as a normal visitor sees it.

Import linked pages instead of hunting for URLs

If you do not have a page list yet, import the home page first. After the import, use Import linked pages: pick other pages of the same site from a list, and they are imported as a Multiple import. This is the fastest way to grab the main navigation targets without copying URLs from the browser.

Step 3: Capture the responsive set

Clients increasingly ask "what does it look like on my phone?" before they ask anything else. Answer that with real frames.

Turn on the Responsive set to capture Desktop + Tablet + Mobile in one click. Tablet is 768, Mobile is 390, and there is also Laptop at 1280. On Pro and Team you can capture up to 4 screens per import and set a Custom width if the client's analytics show an unusual breakpoint. Screens of one page are captured in parallel.

Billing stays simple: 1 import = 1 page with all its screens. Desktop, Tablet and Mobile of the home page count as a single import.

Step 4: Add Light + Dark if the site supports it

If the client's site responds to prefers-color-scheme, the Light + Dark option (Pro) captures the page in both modes. You get one variable collection with Light and Dark modes, plus a dark copy of each screen. That is a strong starting point if dark mode is part of the redesign brief, and it tells you immediately which components were never designed for dark backgrounds.

Note that Figma Free files allow one mode per collection, so in a Free file the dark mode is skipped with a note.

Step 5: Turn the import into an audit

Now the import becomes a working file. Before you redesign anything, spend an hour auditing.

Read the design system that already exists

With Styles & variables (Pro), the plugin creates color variables from colors used two or more times and from the site's CSS custom properties, so --brand-primary becomes brand/primary. You also get text styles and shadow styles. Import the same site twice and nothing new is created, because existing variables and styles are reused when values match.

That collection is an honest inventory. Thirty near-identical grays or eleven body text sizes tell their own story in your proposal.

Spot repeated components

With Components & hover states (Pro), repeated structures such as cards, buttons and menu items become components and instances, and elements with a hover look become component sets with Default and Hover variants. The main components land in a "Components · site" frame. For an audit, that frame is a ready-made inventory of what the current site actually uses.

Check the layout structure

Most frames come in with Auto Layout, so you can resize and rearrange. The plugin builds the page pixel-exact first, then infers stacks, gaps, padding and alignment, and verifies every child's position before keeping the result. If a frame cannot be expressed cleanly, it keeps absolute positions with sensible constraints, and the results screen tells you why. The full mechanism is covered in Auto Layout explained.

Keep a reference layer

Turn on Reference screenshot to add a hidden, locked layer you can toggle to compare the import against the live page. Useful when a client asks, "is this really what we have today?"

Step 6: Build the redesign proposal

With an accurate, editable "before," the proposal almost assembles itself.

Duplicate, then redesign

Duplicate each imported row. Keep the original as Before, label the copy After, and start redesigning on the copy. Because the content is real text and real images, you are redesigning with the client's own copy and photography, not lorem ipsum.

Present before/after boards

Place Before and After frames side by side at the same width. For each template, add two or three annotation callouts explaining the change: clearer hierarchy, shorter forms, better contrast, consolidated components.

Prototype the flow

Links between imported pages become Navigate interactions, and fixed or sticky headers keep working in Present mode. That means you can click through the current site and then through the proposal in the same prototype, which makes for a convincing walk-through on a call.

Before and after: what changes in your workflow

Team plan and licensing for agencies

Agencies usually have more than one designer touching a redesign. Here is how the plans map to that:

• Free: $0, 10 imports per month, 1 screen per import, Multiple import with 10 links. Good for trying the workflow on a small site.
• Pro: $7 per month at launch (regular $9), unlimited imports under fair use, up to 4 screens per import, plus styles and variables, Snap, components and hover, Light + Dark, Custom width, Detailed layers, Reference screenshot and Extra wait. Bought inside Figma's own checkout.
• Team: $22 per month at launch (regular $29), same features as Pro, 5 seats through a shared license key.

For an agency running a few redesigns a month, Team keeps everyone on the same feature set without each designer buying separately. See pricing for details.

Example timeline: a two-week redesign sprint

Here is how a typical sprint can look once the import is handled by the plugin. Adjust to your process.

The import step that used to take a day or two of rebuilding is reduced to the first morning.

Tips that save time on client sites

• Use Extra wait (Pro) for sites that load content late, such as sliders or lazy sections.
• Pick the page language for multilingual sites; the plugin supports 15 languages.
• Resolve fonts first. The Missing fonts screen suggests replacements before building, and remembers your choices per site.
• Re-import with one click when the client ships a change mid-project. The source URL is stored on the frame.
• Watch for embedded content. Maps, videos without posters, and WebGL canvases come in as a screenshot image of that box, since they cannot be layers.
• Logged-in pages need the browser route. For client portals or dashboards behind a login, use the Chrome extension; see our localhost and logged-in pages guide.

Client data and privacy

Agencies are often asked how client material is handled. Pages are rendered in an isolated, sandboxed browser, delivered once, then deleted from memory, and never written to disk. The plugin does not read your Figma file content; it only writes layers. The security page has the details you can forward to a client.

Wrapping up

Moving a client's website to Figma as editable layers turns the first, most tedious step of a redesign into a short import. You get an accurate "before," an audit built from the site's real CSS, and a file where the proposal grows naturally next to the original. Start with one template, check the result, then bring in the rest of the site with Multiple and Import linked pages.

Ready to try it? See all features, read the docs, or get the plugin and run your first import.