Almost every redesign begins the same demoralising way. Before you can improve a single thing, you spend a day rebuilding the current site by hand in Figma — just to have something real to push against. That first day is pure reconstruction, and the moment the actual work starts, you throw it away. There's a better place to begin.
The fastest redesign starts from the live page itself. Import it as editable layers, then restyle in place — keep the structure and the real content, change the type, colour, and spacing.
The slow way: tracing what already exists
Picture the usual first day of a redesign. You open the live site in one window and an empty Figma file in the other, and you start copying. A frame here, a rectangle there. You eyedrop the brand blue. You guess at the padding — sixteen pixels? Twenty? You retype the headline, then the subhead, then every nav item, hoping you matched the weight.
It's slow, it's finicky, and it's quietly error-prone. You round the spacing without meaning to, your traced version drifts a few pixels off the real thing, and the "before" you're designing against is already a slightly wrong copy. Worst of all, none of it survives. The instant you start the genuine work — the restyle — you delete most of what you traced. A whole day of careful reconstruction, gone, with nothing to show but a baseline you no longer trust.
There's nothing wrong with you for doing it this way. It's just the default everyone inherited, and the default is wasteful.
The faster way: import, then restyle
Now flip the order. Instead of rebuilding the current site so you have something to change, you bring the real page in as editable layers — frames, live text, image fills, vectors — and start changing that. No tracing, no eyedropping, no guessing at padding. The current site becomes your starting artboard, accurate to the pixel, and your first move is a design decision rather than a reconstruction chore.
The shift sounds small but it changes the whole shape of the work. You're no longer reconstructing a design before you can edit one — you're editing a design from the first minute. The structure is already there and correct, so your attention goes straight to the things that actually matter in a redesign: the type, the colour, the rhythm of the spacing, the hierarchy.
Don't rebuild the site to have something to redesign. Import the site, and redesign that.
This is exactly what Vellum does — it reads the values the browser already computed and rebuilds the page as native Figma layers, measured from the real render rather than guessed at. For the full walkthrough of getting a page onto the canvas, see how to import a website into Figma.
From live site to redesign, step by step
Here's the workflow end to end, from the live URL to a redesign you can branch and compare:
- Import the live URL as layers. Run an importer that rebuilds editable nodes — not one that flattens the page to a flat screenshot — and point it at the site you're redesigning. You get a frame full of real, selectable layers.
- Audit what's actually there. Before you change anything, read it. Click into the headings and note the real type scale. Sample the true colours. Measure the spacing the browser actually used. You learn far more from the genuine values than from a copy you traced by eye.
- Set up your new foundations. Define the type scale you want, build colour styles, lay down a grid. These are the rules your redesign will follow, and having them in place before you restyle keeps the new direction consistent rather than improvised section by section.
- Restyle section by section, in place. Work down the page applying your new foundations to the existing structure — swap the type, recolour the fills, retune the spacing, rework the hierarchy. Because the layout is already correct, each change is an edit, not a rebuild.
- Duplicate the frame to branch variants. Once a direction takes shape, copy the whole frame and push it somewhere different. Now you can compare two or three directions side by side, on the real layout, instead of arguing over them in the abstract.
What to keep, what to change
A redesign isn't a teardown of everything — it's a deliberate choice about what carries over and what gets rethought. The imported page makes that choice easy, because it hands you the parts worth keeping for free.
Keep the structure. The page already works as an arrangement of blocks. You don't need to reinvent where the hero sits relative to the nav, or how the feature grid stacks — that scaffolding is sound, and rebuilding it from scratch only invites new mistakes.
Keep the real copy and its true lengths. This is the quiet superpower of starting from the live page. Your headlines are the actual headlines, your paragraphs run to their actual length. The design gets stress-tested by real text from the first minute, so a button doesn't look perfect at "Go" and then break at "Start your free trial." Lorem ipsum hides those problems; real content surfaces them.
Change the type, colour, spacing, components, and hierarchy. This is the redesign. New typeface, new palette, tighter or looser rhythm, refreshed components, a re-weighted sense of what matters most. With the structure and content held steady, every change you make is visible against reality instead of a tidy fiction — and a design that survives real content is one you can actually ship.
When to start from a blank canvas instead
Importing isn't always the right move, and it's worth being honest about when it isn't. If you're doing a ground-up rethink of the information architecture, reworking the core flows, or designing a brand-new product, the old layout has little to offer. Worse, importing it would quietly anchor you to the very decisions you mean to discard — you'd spend the project fighting the gravity of a structure you'd already chosen to abandon.
The rule of thumb is simple. Import for evolutions and audits: a visual refresh, a brand update, a restyle, or pulling a page apart to understand it. Start from a blank canvas for revolutions: when the structure itself is the thing under question, a clean slate serves you better than an accurate copy of the past.
If the work you have in mind is closer to studying how a page is built than reskinning it, that's its own technique — see recreating a website in Figma for a teardown. And if you're weighing the two directions of converting between code and design, Figma to HTML vs. HTML to Figma sorts out which one your task actually needs.
Start from the real thing
The blank canvas has its place, but it's the wrong default for most redesigns. When the job is to make an existing page better, the best starting line is the page itself — imported accurately, structure and content intact, every value editable. Skip the throwaway day of tracing. Begin with reality, and spend your time designing instead of reconstructing.