How to compare a Figma design with the live website
The website usually ends up close to the Figma design, but not the same: 4 px more spacing here, a different font weight there. Here’s how to find those differences without measuring by hand.
What slips through when you check by eye
The differences that slip through are the small, repeated ones: a spacing that changed in a component and repeats on ten screens, a gray that isn’t the design system’s, or a different line height. One by one you don’t notice them; together they make the product look careless.
- Spacing: padding, gap and the position of each element
- Typography: family, size, weight and line height
- Text, background and border colors
- Sizes, radius, shadows and opacity
- Elements that are in Figma but missing on the page
Three ways to compare
An overlay is good for seeing at a glance if something moved. To know what to change in the code you need the value: “the heading is 44 px and 48 in Figma.”
| Way | How it works | What you get |
|---|---|---|
| By eye, side by side | You open the Figma file and the website in two windows | The big stuff; the small stuff slips and depends on who looks |
| Overlay | A plugin or extension puts the Figma frame over the page with transparency | You see where things don’t line up, but you have to guess by how much and why |
| Value by value | A tool matches each Figma layer with its element on the page and compares their measurements | A list with the Figma value and the page value, ready for the ticket |
Step by step with Pixel Perfect
- Paste the frame link. In Figma, right-click the frame › Copy link to selection. If the frame has tablet and mobile versions, it finds them.
- Type the page address. Localhost, staging or production. If it asks for a username and password, you sign in inside the app.
- Compare. It captures the page at the exact width of the frame and measures each element. An 8294 px tall page takes about 12 seconds.
- Review and report. Differences arrive sorted: the visible ones first. Mark the ones that matter and create the Jira ticket with the crops, or copy the text for Slack.
Tips for a fair comparison
- Compare at the same width as the frame: a 1440 px page against a 1600 px frame always gives false differences.
- Use the same state: the same session, the same data and the fonts already loaded.
- Decide what “equal” means: a ±1 px margin for sizes and a color threshold (delta E) avoid noise from rounding.
- Separate what comes from the component from what comes from the screen: the first one is fixed once in the library.
What to do with the differences
Start with the ones anyone notices. Minor ones go in another batch. If a difference comes from a shared component, fix it there and compare again: one fix often closes several differences at once. Comparing again shows you what was solved and what is new.