How to import a responsive website into Figma

A modern site isn't one layout — it's three or four. It reflows at each breakpoint, columns folding into a single stack, the nav collapsing into a menu, the type stepping down a size. To redesign or document that page honestly, you want all of those layouts in Figma, lined up side by side — not just the desktop view you happened to grab.

Why one width isn't enough

Most of the design work, and most of the bugs, live in the mobile layout — not the wide desktop view that tends to get shown off in a portfolio. It's where a three-column grid has to become one, where a sprawling header has to fold into a hamburger, where long headlines suddenly wrap to four lines and break the rhythm. That's the layout people actually use, and it's the one that's hardest to get right.

So importing only the desktop view quietly hides two-thirds of the design. You capture the easy state and miss the two states where the real decisions happen. If you're redrawing a page or writing a spec from it, you need every breakpoint on the canvas — otherwise you're working from a third of the truth.

The desktop view is the layout that was easiest to build. The mobile view is the one that was hardest — and the one most people will see.

Capture each breakpoint

The method is simple: import the same page more than once, at the widths that matter. Each render is a genuine reflow at that width — the browser laying the page out fresh — not a desktop frame squashed down to look small.

1. Import the page at a desktop width — say 1440. This is the full layout, every column expanded.
2. Import it again at a tablet width — around 768. Watch the grid loosen and the sidebar start to give way.
3. Import it once more at a mobile width — roughly 390. Now everything is a single stack, the nav is a menu, and the type has scaled down.

On Vellum's Pro plan this is one action: a multi-viewport batch captures all three widths in a single trace and lays the frames out side by side for you. But you don't need Pro to do it — importing one width at a time works on the free plan too. The result is the same either way: a separate, editable frame per breakpoint. If you're new to the basics of getting a page onto the canvas, start with how to import a website into Figma.

Read the responsive story

Line the three frames up next to each other and the design starts to explain itself. You can see exactly how the columns collapse — which ones merge, which one wins the full width, what order they fall into once they stack. You can watch the type scale down step by step, and notice where a heading that fit comfortably at 1440 now wraps awkwardly at 390.

You can see how the navigation becomes a menu, what gets hidden behind the toggle, and what stays pinned. None of this is a guess — it's the browser's own reflow, measured pixel for pixel from the real render. Read across the frames and you're reading the responsive spec: the precise behaviour a rebuild has to hit at every width.

Redesign responsively

Once all the breakpoints are on the canvas as editable layers, you can restyle each one — and the side-by-side layout is what keeps the work honest. Change a heading on desktop and you can immediately carry the same decision down to tablet and mobile, so the type ramp, the spacing, and the colour stay consistent across the set rather than drifting apart screen by screen.

That's the difference between redesigning a responsive page and redrawing three unrelated mockups. You're editing one design at three sizes, with every breakpoint visible at once. For the wider approach — starting a redesign from the real page instead of a blank artboard — see how to redesign a website in Figma.

Pick the right widths

The numbers above — 1440, 768, 390 — are sensible defaults, but the better move is to match the site's actual breakpoints rather than reach for round figures. A layout doesn't reflow gradually; it jumps at specific widths the CSS defines, and those are the widths worth capturing.

Finding them takes a minute: open the page in a browser and slowly drag the window narrower, watching for the moments the layout visibly snaps — a grid recolumns, the nav flips to a menu, a panel disappears. Each jump marks the edge of a breakpoint band. Import at a width just inside each band — comfortably past the jump, not right on the seam — and your frames land in the middle of each real layout, exactly where the design was meant to be seen.

The bottom line

A responsive site is a small family of layouts, not a single picture. Bring every member of that family into Figma — desktop, tablet, mobile, lined up side by side — and you've captured the whole design, reflow and all. That's what a faithful redesign starts from, and what an honest spec is written against.