What's the fastest way to start a website redesign in Figma?

Capture the existing site into Figma as editable layers using Export to Figma (30 seconds), then design the new version on top of it. Side-by-side before/after is built in. The slow 'recreate the existing site as a reference' step that used to consume 4–12 hours before any design work began is essentially free with Chrome-extension capture.

Should I redesign on top of the existing site or start from scratch?

On top, almost always. Starting from scratch loses the context of what users currently see. Capturing the existing site to Figma lets you redesign with the constraints visible — what to keep, what to change, what to remove. The exception is full rebrands where the old design is being entirely thrown out; even then, capturing serves as documentation of the 'before' state.

How long does a typical website redesign take in Figma?

For a small marketing site (5–10 pages), a focused designer can complete the Figma phase in 1–2 weeks. The biggest time savings come from skipping manual rebuild of the existing site (saves 4–12 hours alone) and using a component-driven Figma workflow. Larger redesigns scale roughly with page count, not 'site complexity.'

How do I hand off the new Figma design to engineering?

Standard Figma handoff works. Use Figma's dev mode for measured specs, copy values, and exported assets. If your engineering team uses Anima, Locofy, or Builder.io Visual Copilot for Figma-to-code generation, your captured-and-then-redesigned Figma file flows into those tools cleanly. Hand-coding from Figma is still the most common path, and dev mode handles that well.

Does this workflow work for SaaS apps and dashboards, not just marketing sites?

Yes — and it's especially powerful for SaaS apps because admin views and dashboards usually live behind login walls. Export to Figma captures from inside your Chrome session, so authenticated SaaS UI captures cleanly. This is the case that breaks every server-side capture tool (most Figma plugins), and where in-browser capture has its biggest practical advantage.

What's different about redesigning a Webflow vs. WordPress vs. AI-generated site?

The capture mechanic is identical — Chrome renders the page, extension reads the DOM. The differences are in what comes through: Webflow's interactions don't capture (Figma is static), WordPress's plugin output captures as visible at the moment, AI-generated apps capture cleanly because the extension waits for client-side rendering to complete. Pages from any source render the same way once they're in Figma — editable layers regardless of origin.

What if the existing site doesn't have a Figma file at all?

That's the default case and exactly why this workflow exists. Most existing websites were never in Figma — they were built directly in WordPress, Webflow, Framer, or code. Capturing the live site into Figma is the way to get the design source-of-truth into Figma for the first time.

Website Redesign in Figma: The Full Workflow (2026)

The redesign workflow in one paragraph

Capture the existing site into Figma as editable layers (30 seconds). Audit and document what works and what doesn't (1–2 hours). Design the new version on top of the old (the bulk of the project). Iterate with stakeholders. Hand off to engineering. Done.

The unlock is the first step. Manually recreating the existing site as a reference used to consume 4–12 hours before any real design work began. With one-click capture, that step is essentially free — and the captured layers are exact (real fonts, real colors, real spacing) instead of approximations.

The full workflow phase-by-phase

Phase 1: Capture (30 seconds per page)

Install Export to Figma — a free Chrome extension.

Open the existing site in Chrome. Click the extension. Paste into Figma. The current site lands as editable Figma frames with fonts, colors, images, and layout structure preserved.

For multi-page redesigns, repeat for each unique page type:

Homepage
Pricing
Features (each main feature page)
Comparison / alternative pages (if relevant)
Blog / docs index
Sample blog or docs detail page
Customer / case study pages
Sign-up / sign-in flows
Logged-in dashboard views (if redesigning the app, not just marketing)

Each capture takes 5–10 seconds. For a typical 8–10 page redesign, the whole capture phase is under 5 minutes.

Phase 2: Audit (1–2 hours)

In Figma, walk through every captured page. Document:

What works. The brand voice, the hero structure, the pricing presentation, the social proof placement. Don't throw away what's already working.
What doesn't. Outdated typography, inconsistent spacing, weak CTAs, confusing navigation, too much copy, too little, dated visuals.
What's missing. Sections the current site doesn't have but should (testimonials, FAQ, comparison table, value-prop clarity above the fold).
Technical debt. Heavy plugins or bloat that affects design choices, slow images, poor mobile UX.

Capture this as Figma comments on the existing frames. Now you have a tangible audit document, not just verbal critique. Stakeholders can see exactly which existing element each finding refers to.

Phase 3: Strategy (1–2 hours)

Define the redesign's goals before any new design happens:

Conversion goal: Are you trying to lift signup conversion? Reduce churn? Improve perception?
Brand goal: Modernizing? Repositioning as premium? Adding personality?
Scope: Marketing only? App UI included? Email templates? Doc site?
Constraints: Time, budget, team, brand assets that can't change.

Document on a Figma cover page that lives at the start of the file. Reference back to it when design decisions get fuzzy. ("Does this serve the conversion goal we documented?")

Phase 4: Design (the bulk of the project)

Work on top of the captured existing frames. Build the new version in a parallel column. This gives you (and your stakeholders) permanent before/after visibility throughout the project.

Common patterns:

Hero section. Redesign with new positioning. Keep the existing hero visible for comparison.
Pricing. Often the highest-leverage redesign target. A/B-friendly variants are easy to design when you have the current version already in Figma.
Feature blocks. Look at how the current site structures feature content. Decide what to keep vs. restructure.
Mobile. Design mobile in parallel from day one. Don't desktop-first.
Component variants. Extract recurring patterns (hero variants, pricing card styles, testimonial layouts) into Figma components.

Phase 5: Component library (alongside design)

As you design, extract reusable patterns into Figma components. By project end, you'll have:

Heroes (multiple variants)
Pricing blocks (multiple variants)
Feature blocks
Testimonial cards
CTA buttons
Navigation
Footer

The captured existing frames make this easier because you have real examples from the source site to study — what the current design is doing, even if you're replacing it.

Phase 6: Stakeholder review

Share the Figma file. Async comments beat synchronous review meetings, especially when stakeholders are in different timezones. Set a clear deadline ("feedback by Friday EOD"). Iterate.

For larger teams, group review threads by section (a comments thread on the hero, another on pricing, etc.) rather than scattering comments randomly. Easier to triage and respond.

Phase 7: Handoff

Standard Figma handoff. Use Figma's dev mode for measured specs and asset exports.

If your engineering team uses Anima, Locofy, or Visual Copilot for Figma-to-code generation, your captured-and-redesigned Figma file flows into those tools cleanly — see the Anima alternative comparison and Locofy alternative for context on those workflows.

For hand-coded implementation, designers usually pair dev mode with a written spec doc covering edge cases (responsive breakpoints, empty states, loading states).

When this workflow shines

Agency redesigns where the client's existing site isn't in Figma. Capture in 30 seconds. Pitch the redesign immediately with side-by-side before/after.
In-house redesigns of legacy marketing sites. Capture the live site. Iterate without rebuilding it from scratch.
SaaS app redesigns including authenticated dashboards. Capture from your logged-in Chrome session.
AI-app polish. You built the app with Lovable, Claude Code, Bolt, v0, or Cursor. Capture it. Polish in Figma. Hand off the polished design.
Webflow / Framer migrations. Capture the current Webflow or Framer site. Redesign in Figma. Then ship the new version back to Webflow/Framer (or migrate to a different platform).

What you can't redesign this way

If the source site is genuinely gone (no live URL, no Wayback Machine archive), capturing isn't possible. In those rare cases, manual rebuild is unavoidable. For everything else, capturing beats rebuilding.

A worked example: agency pitch to redesign a 12-page SaaS marketing site

An agency I worked with pitched a SaaS marketing site redesign. Standard scope: homepage, 4 feature pages, pricing, 3 comparison pages, 2 customer story pages, signup. 12 pages total.

Old workflow (before Export to Figma):

Day 1–2: Senior designer manually rebuilt the existing site in Figma as references. 12–14 hours of layer-building before any design work.
Day 3: Audit and strategy.
Day 4–10: Design work.
Day 11–14: Stakeholder review and iteration.

New workflow:

First hour: Captured all 12 pages (under 5 minutes of capture time, the rest spent organizing them in the Figma file).
Hour 2–3: Audit and strategy.
Day 1 (rest)–Day 7: Design work — with two extra days available because the rebuild phase was eliminated.
Day 8–11: Stakeholder review and iteration.

The total project saved 1–2 days. More importantly, the captured references were exact — same fonts, same colors, same spacing — so the design decisions were anchored to real data instead of approximations.

For an agency running 4+ redesigns per quarter, that's a meaningful operational change.

Pricing for Export to Figma

Free: 10 captures per month — enough for most redesign projects.
Pro: $1/month (launch promo) for unlimited captures.

Install from the Chrome Web Store.