Website Redesign Workflow in Figma: Capture First, Redesign Faster
A website redesign workflow for designers who need the existing site in Figma before making improvements.
Most redesigns start with a gap. The live website has all the real constraints, but the Figma file is outdated, missing, or unrelated to what shipped.
Capturing the existing site into Figma closes that gap. You get a useful baseline before making new design decisions.
1. Capture the current site
Use CopyFig to capture the homepage, pricing page, product page, and any critical conversion flows. Keep the captures as a locked baseline in Figma so the team can compare against the redesign.
For long pages, capture key sections separately. That makes the file easier to work with and reduces cleanup.
2. Audit before changing
Before pushing a new visual direction, mark the current problems. Look for weak hierarchy, inconsistent spacing, unclear calls to action, mismatched typography, inaccessible contrast, and repeated components that should be standardized.
This makes the redesign conversation less subjective. The team can see what is broken and why the new design is better.
3. Rebuild only what matters
Do not polish every imported layer. Use the capture to understand the existing page, then rebuild the sections that will become the new design system.
A captured pricing card, for example, may only be a starting point. The final card should be clean, named, componentized, and aligned with your new visual rules.
4. Compare the new direction against reality
Place the old capture and new design side by side. Check whether the redesign actually clarifies the message, reduces friction, and improves page rhythm.
The capture keeps the redesign honest because it preserves the real content and constraints that users already experience.
Frequently asked questions
Why import the old website into Figma before redesigning?
It gives the team a concrete baseline for content, spacing, hierarchy, and conversion flow before new design work begins.
Should I clean up every imported layer?
No. Clean up only the sections that become part of the new design direction or component library.