Guides · Updated 1 November 2026

How to redesign an existing website in Figma without redrawing it

Import the current site into Figma at the widths you design for, and use it as the baseline. Audit the colours, type and spacing the import exposes, consolidate them into variables and components, then redesign on top of that system, keeping the original frames for before-and-after comparisons.

The first week of most website redesigns goes on rebuilding what already exists. Someone opens the live site, takes screenshots, and redraws the header, the cards and the footer in Figma so there is something to work on. It feels like progress, but it produces a hand-made approximation of a site that is already fully specified in its own code. The colours, sizes and spacing are all there in the stylesheet. Redrawing them by eye loses that precision and costs days.

Starting from an import flips that order. The current site becomes the first file in the project, accurate to the pixel, and the redesign begins with an audit of what is really there.

Capture the baseline

Pick the templates, not the pages. A typical marketing site has a home page, a listing page, a detail page, a contact or sign-up form and a handful of one-offs. One of each covers nearly every component the site uses. For an online shop, add the cart and checkout; for a SaaS product, the pricing page and the first screen after login.

Capture each template at the widths you design for. With Figback that means a single import producing desktop, tablet and mobile frames side by side (1440, 768 and 390 by default), plus a dark theme frame if the site has one. Pages behind a login come in through the Chrome extension, Figback Capture, which saves the tab exactly as you see it (step by step).

Keep these frames in their own page of the file and leave them alone. They are your record of the starting point, and you will want them later.

Let the import show you the mess

A redesign brief usually says the site “feels inconsistent”. An import lets you prove it. Because Figback brings colours, type and spacing in as variables and text styles, the file’s local styles become an inventory of every value the site actually uses.

On a site that has grown for a few years, that list is rarely short. There are greys that differ by one or two points of lightness, three slightly different blues for links, body text at 15, 16 and 17 pixels, and padding values with no pattern behind them. Each one made sense to whoever added it. Seen together, they are the strongest argument in the brief.

This is the most useful artefact for a client meeting. A page of near-identical colours pulled from their own site explains “inconsistent” better than any slide.

Consolidate into a system

Now turn the inventory into decisions. Merge the near-duplicate colours into a small palette, settle on a type scale, and choose a spacing step. In Figma this means editing the variables and text styles, so every layer that uses them updates at once.

Components come next. Figback detects repeated elements such as cards, buttons and list items and turns them into components, with variants where the instances differ. Review those differences: some are intentional states, like a disabled button, and some are accidents worth removing.

If the client already has a design system in Figma, map the import onto it instead. Figback can match captured colours, text and elements to the variables, styles and components in an existing library, so you work with the system the team already maintains rather than building a parallel one.

Redesign on top

With the system in place, the redesign itself goes faster, because changes propagate. Adjusting the primary colour or the base font size moves every screen at once, and you can try a direction across the whole site in an afternoon.

Work on copies of the baseline frames, not the originals. Keeping the untouched import next to the new design gives you before-and-after views for every template, which are the clearest way to show a client what changed and why.

Hand off

When the design is approved, developers get frames built from real components and named variables, which map more directly to code than a file of loose shapes. For prototypes, landing pages or a quick check in the browser, Figback also exports frames back to HTML and CSS. The export runs inside the plugin on every plan and doesn’t count against any limit.

Mind the content you imported

The baseline is a copy of the client’s live site, with all its text, photos and fonts. That is fine for a client who asked for the redesign, but check the font licences before installing their typefaces, and replace stock photos that were licensed only for the website before you reuse them. Our guide on what you may legally copy into Figma covers the details.

Teams that work this way spend their first week on the audit and the system instead of on redrawing. The design work starts with an accurate picture of the site, and the client sees evidence for every change in the brief.

Questions

Should I redesign from a screenshot or from imported layers?

Screenshots are fine for a mood board, but imported layers let you measure real spacing, pick real colours and reuse real text. They also make the style audit possible, because every colour and font size is a value you can list.

How many pages of the old site should I import?

Import one of each template rather than every page: home, a listing page, a detail page, a form, and any page that converts. That covers most components the site actually uses.