Teardowns are how designers learn. You take a page that clearly works, pull it apart, and look at why it works — the spacing, the type, the restraint in the colour. Do it by eyeball, though, and you're squinting at a screenshot, guessing at the numbers. Recreate the page from real layers instead and it hands you its own measurements.
Recreate a site by importing it as editable layers, then read its real values — spacing, type scale, colour. You learn from the actual numbers the page was built on, not your estimate of them.
Why recreate, not screenshot
A flat screenshot teaches you nothing you can measure. You can look at a heading and admire it, but you can't select it to find out it's 44 pixels at a 1.1 line-height. You can sense that a layout feels tidy without ever confirming the gutters sit on an 8-point grid. The picture holds the answers; it just won't let you read them.
Recreate the same page as layers and the vague impression becomes inspectable fact. Click the heading and Figma tells you the size, the weight, the leading. Drop a measurement between two sections and the rhythm stops being a feeling and becomes a number. A teardown is only as good as what you can actually check, and layers are what make checking possible.
A screenshot shows you that a page works. A layer tree shows you the values that make it work.
Step 1 — import the page as layers
The quickest route is a live URL import: point the plugin at the page you want to study and let it pull the whole thing onto the canvas. If you'd rather paste markup or drop a saved file, the broader walkthrough in how to import a website into Figma covers every route; for the URL path specifically, importing a live URL into Figma goes deeper on how it works.
Whichever route you take, the result is the same: the page arrives as native, selectable Figma nodes — frames, live text, image fills, vectors — measured from the real browser render rather than traced by hand. That fidelity is the point. A teardown built on guessed numbers teaches you the wrong lesson.
Step 2 — read the real numbers
Now the study begins. With the page sitting on the canvas as layers, you can inspect the things a screenshot only hints at:
- Spacing and rhythm. Measure section padding, the gaps between cards, the vertical rhythm down the page. Look for the unit underneath — most considered sites land on an 8-point grid.
- The type scale. Select each level of text and note the size, weight, and line-height. The steps between them usually follow a modular scale, not random jumps.
- The colour palette. Pull the fills and you'll often be surprised how few colours a polished page really uses — a tight token set doing a lot of work.
- Buttons and radii. Check the corner radius, the padding inside a button, the border treatment. These conventions repeat, and spotting the repetition is half the lesson.
What you're really hunting for is the system. Any single value is trivia; the relationships between them — the grid, the scale, the palette — are the design thinking you came to learn.
Step 3 — annotate and compare
One teardown is useful. Three side by side is where the patterns surface. Duplicate your import, lay two or three recreated pages out on the same canvas, and start marking what they share — the same eight-pixel base unit, the same generous line-height on body copy, the same habit of one accent colour against a near-neutral field.
Annotate as you go. Drop notes on the choices that work and the ones that don't, and keep the file. Over time it becomes a swipe file of patterns you can return to — a personal reference built from real pages, not screenshots in a folder.
Turn the teardown into your own work
Because the layers are editable, a teardown doesn't have to stay a study. You can restyle the recreated page into your own direction — swap the palette, retype the headings, shift the spacing to your taste — and design forward from a working structure instead of a blank canvas. That's the subject of redesigning a site without rebuilding it, if you want to take it further.
Or keep the bones and strip the skin: treat the recreated layout as a neutral skeleton — solid structure, no styling opinions — and design over it. Either way, the work you did to understand the page becomes the head start on making your own.
Study, don't steal
Worth saying plainly: a teardown is for learning, auditing, and inspiration — not for lifting a competitor's site wholesale or passing someone else's work off as yours. Recreating a page to see how it's built is fair and useful. Shipping a near-copy of it is neither.
Respect copyright and trademarks, treat other people's design as a teacher rather than a template, and let the understanding — not the pixels — be what you carry forward. Take apart the page to learn how it holds together, then go and make something that's clearly your own.
Learn from the real thing
The best teardown is the one you can interrogate. Recreate the page as editable layers and every choice that used to be a guess becomes a value you can select, measure, and question. Study the real numbers, find the system underneath them, and the next thing you design carries what you learned — not a screenshot of it.