Lens and Prism
Does the site match the Figma design?
Paste a frame link next to the URL. UICheck measures fonts, colours, spacing and text on the real page, shows every area that looks different, and explains each one, so design QA takes minutes, not an afternoon.
- 6
- kinds of difference
- 3
- frames per check
- ±1px
- font tolerance
Drag the line to compare the design with the built page.
84% match · 5 areasWhat it compares
Everything a designer checks by eye
- 1
Visual differences
The page and the frame compared in blocks, grouped into numbered areas. Font smoothing and content that only moved up or down don’t count.
- AaFigma 40px · site 32px
Font size & weight
Every design text is found on the page and its size, weight, family and line height compared.
- ΔE 18 (limit 3)
Colours
Text colours measured like the eye sees them (CIEDE2000), so tiny rounding differences pass and visible ones don’t.
- Padding 24px vs 12px
Spacing & padding
Auto-layout padding and the gaps between items, measured as the space visitors actually see.
- Get a free quoteGet free qoute
Missing or changed text
Headings and labels from the design that are missing on the page, or worded differently, typos included.
Form fields
The number of fields and their labels in the frame compared with the form on the page.
In the report
Three ways to see the difference
How it works
From frame link to fix list, in minutes
Connect Figma once. After that every check takes one extra link.
Step 1
Connect Figma
Sign in with Figma once, or add a personal access token. View access to the file is enough.
Start freeStep 2
Paste the frame link
Right-click the frame in Figma, copy the link and paste it next to the URL. Up to three widths.
See how it worksStep 3
Read the differences
A match score, numbered areas, and every font, colour, spacing and text difference in plain words.
See plans
Built for real pages
Differences that matter, not noise
Browsers never render text exactly like Figma, and real content shifts as it loads. UICheck is tuned to report what a designer would point out, and skip the rest.
Font smoothing ignored
Compared in small blocks, not single pixels.
Moved content isn’t “different”
A section pushed down by a banner is matched where it is.
Sensible tolerances
±1px font size, ±2px line height, colour difference 3.
Spacing that you see
Padding and gaps measured inside the border, 4px or 15% leeway.
Questions
Do I need a paid Figma plan?
No. UICheck reads the frame through Figma’s API, so view access to the file is enough. Connect with Figma, or add a personal access token for files shared from other teams.
How is this different from an overlay plugin?
Overlay plugins rely on your eyes. UICheck measures fonts, colours, spacing and text automatically, groups visual differences into areas, and runs the responsive and accessibility checks on the same page.
Will tiny rendering differences be flagged?
No. Browsers and Figma never draw text exactly the same, so the visual comparison works on small blocks rather than pixels, ignores content that only moved, and style checks use tolerances (±1px font size, ±2px line height, colour difference 3, spacing 4px or 15%).
Can I compare phone and desktop designs?
Yes. Add up to three frame links, one per width, for example a 390px phone frame and a 1440px desktop frame. Each is compared at its own width.
Which plans include it?
Figma comparison is part of Lens and Prism.
Ship pages that match the design
Lens is $5 a month: Figma comparison, every screen size, Safari and Firefox, and full-site checks.