There are three ways to get a page's design values. You can squint at a screenshot with an eyedropper and hope the hex is close. You can open DevTools and dig through the rules one by one, transcribing each by hand. Or you can import the page as real layers and read its actual values straight off the Figma canvas. Only one of those is fast, and only one is exact.
Import a page as editable layers and Figma hands you the real numbers — exact hex colours, font families, weights and sizes, and the spacing the page was built on. No eyedropper approximations, no copying from DevTools.
Why the eyedropper lies
The eyedropper feels precise — you click a pixel, you get a colour. But what you're sampling isn't the page's source value. It's a flattened picture of it, and the picture has already drifted.
A screenshot is an image, and images get compressed. JPEG in particular trades exactness for file size: a flat brand fill that was one clean hex in the CSS comes back as a faint scatter of near-neighbours. Sample one pixel and you might land on #7A2BC9; sample the one beside it and you get #7B2CC8. Anti-aliasing makes it worse at every edge, where the renderer blends the foreground into whatever sits behind it. You're not reading the colour the designer chose — you're reading a smeared average of it.
DevTools doesn't have this problem. It shows the computed value exactly, because it reads the same value the browser did. But it's slow going. To document a whole page you're clicking element after element, copying a hex here, a font-size there, a line-height somewhere else, and pasting each into a notes file by hand. It's accurate and it's tedious, and tedium is where mistakes creep in.
An eyedropper guesses from a picture. The page's real values were never in the picture to begin with.
Import once, read everything
The shortcut is to stop sampling the page and start reading it. Once a page is imported as native Figma layers — measured from the real browser render, not traced off a screenshot — every value you were hunting for is just sitting there, selectable.
Select any piece of text and Figma's panel shows you the exact font family, the weight, the size, and the line-height the browser actually used. Select any shape or background and the fill gives you the precise hex — or the full gradient, stop for stop. Want the spacing? Hold a modifier and hover a neighbour, and Figma measures the real gap between two layers for you. Nothing is approximate, because nothing was estimated; the importer read what the browser computed and rebuilt it node by node.
This is the whole move. Instead of reconstructing a page's design system by eye, you bring the page in once and then inspect it at your leisure — the same way you'd inspect any Figma file a colleague handed you. For the mechanics of getting a page onto the canvas in the first place — paste, file, or live URL — see how to import a website into Figma.
Building a colour palette
With the page in front of you as layers, building a palette becomes collection rather than guesswork. Click through the surfaces — the header, a button, a card, the body text — and note each fill as you go. Drop the ones you want to keep into Figma colour styles, and you've turned a scattered set of values into a named, reusable palette in a few minutes.
The thing you'll notice, doing this on a site you admire, is how little colour good design actually uses. A whole page that felt rich and varied often resolves to a handful of values: one or two brand colours, a near-black for text, a couple of greys, maybe a single accent doing all the heavy lifting. Seeing the real palette laid bare — exact hexes, no padding — is its own small lesson in restraint, and it's far more instructive than any swatch you'd guess at from a distance.
Capturing the type scale
Type works the same way. Walk through the text layers and write down the sizes and weights that are genuinely in use — the hero heading, the section titles, the body copy, the small print. You'll usually find fewer distinct steps than you expected, and the gaps between them tend to be deliberate.
That's the modular scale showing itself. Sizes that climb 16, 20, 24, 32, 40 aren't random — they're a ratio at work, and once you list them out the system becomes obvious. Turn each step into a Figma text style and you've captured the page's typographic rhythm, ready to reuse. You're not copying the design; you're reading how it was tuned, which is a better thing to learn.
Reading the spacing system
Spacing is the one people skip, and it's often where the craft lives. Measure the padding inside a card, the gap between cards, the space above a heading, the breathing room around a section. Write the numbers down as you measure them.
A pattern almost always surfaces. The values cluster on a grid — multiples of 8 are the usual giveaway — or a section padding repeats from block to block, or the gaps step up a consistent spacing scale. None of that is visible from a screenshot; it only emerges when you can measure the real distances between real layers. Once you see the rhythm, you can build with it instead of eyeballing every margin, and your own layouts inherit the same quiet consistency.
A note on fonts you don't have
Here's the honest caveat, because it matters. Figma can't load a typeface that isn't installed on your machine — that's a platform constraint, not a shortcoming of any one plugin. So if a page uses a webfont you don't happen to own, Figma substitutes a fallback for the glyphs, and the letterforms you see on the canvas won't be the real ones.
But — and this is the part that saves the day — the imported text still carries the true font name. The layer knows it was set in, say, "Söhne" or "GT America", even if your system renders it in something else. So you still walk away knowing exactly which typeface the page used and therefore exactly what to license or install to make it pixel-perfect. You get the information even when you don't get the letterforms — which, when your goal is to understand how a page was built, is the half that actually counts.
Read the page, don't guess at it
Colours, type, spacing — every one of these is a value the browser already resolved into a concrete number the moment the page rendered. The eyedropper throws that number away and asks you to guess it back from a compressed picture. Importing the page keeps the number. Bring the page in as layers once, and the whole design system is there to read: exact, editable, and honest about the one thing — fonts — it can only name rather than draw.