01
Add the truth
Upload approved Figma exports, screenshots, or reference URLs.
Visual QA for UX designers and developers
Save hours on design and development QA. Catch every mismatch in seconds.
Simply use screenshots of your design and dev files. QA Troll flags every difference in spacing, color, and type, then writes fixes your developers can ship right away.
$10/month · Cancel anytime · Built for designers, developers, and QA
Team · Member profile
Analysis completeVisual report
7.8% drift3 issues in the dev file. Click a pin on the dev file to jump to its fix, or a number here to find it on the dev file.
- 1Issue 1:Name heading
Heading sits 12px low
Design places the name 16px under the header row. The dev file uses 28px.
mt-7 → mt-4 - 2Issue 2:Invite button
Corners are too round
Design radius is 8px. The dev file uses 12px.
rounded-xl → rounded-lg - 3Issue 3:Role text
Role text fails contrast
Design uses the muted text color. The dev file drops it to 50% opacity, under the 4.5:1 WCAG ratio.
text-paper-muted/50 → text-paper-muted
Pixel-level measurements Stack-aware guidance1440 × 1024 compared
From reference to exact fix
A visual handoff developers can act on.
02
Add the build
Pair each screen with its coded page, screenshot, or accessible URL.
03
Ship exact fixes
Review measured drift and implementation guidance for your stack.
Real-world examples
Maya signs off on a landing page in minutes, not a meeting.
Maya is the product designer at Ember Roasters. Her developer shipped the new homepage to staging and asked, “Does it match?” It looks close. Instead of squinting between two tabs, she drops the approved Figma export and a staging screenshot into one QA Troll flow.
Landing page · 2 screens · 1 flow
3.2%
visual difference found
Nothing she'd have caught with confidence by eye, and all of it measured. She sends the checklist, the developer fixes it, and the rerun shows 0% difference.
Visual report
3.2% drift4 issues in the dev file. Click a pin on the dev file to jump to its fix, or a number here to find it on the dev file.
- 1Issue 1:Hero headline
Headline sits 14px low
Design sets hero padding-top at 50px. The dev file uses 64px.
pt-16 → pt-[50px] - 2Issue 2:Subheading
Subheading is too light
Design specifies #4A3F38. The dev file renders #7A726B, which weakens contrast.
text-stone-500 → text-stone-700 - 3Issue 3:Primary button
Button lost its pill shape
Design uses a full pill. The dev file has a 6px corner radius.
rounded-md → rounded-full - 4Issue 4:Product grid
Card gap is uneven
Design uses a consistent 32px gap. The dev file measures 40px and 42px.
gap-10 → gap-8
The result: a 20-page review goes from a work week to a coffee break.
Checking a page by hand, side by side with the design, takes about an hour. QA Troll checks all 20 pages in about 10 minutes.
Another real QA pass
One product card, seven things the dev file got wrong.
The developer restyled the Ember Roasters product card. It still looks like a nice card, which is exactly why these slip through. QA Troll compares it to the approved design and labels every difference on the dev file.
New harvestHuila, Colombia
Pink Bourbon
Hibiscus, red grapefruit and raw honey with a silky, lingering finish.
Roast
Medium
250g500g1kg
$16
Add to cartNew harvest1Visual report
7 issues in the dev file. Click a pin on the dev file to jump to its fix, or a number here to find it on the dev file.
- 1Issue 1:Badge
Off-brand badge color
Design uses the brand green for "New harvest". The dev file renders it coral, which fights the green bag.
bg-accent → bg-primary text-primary-foreground - 2Issue 2:Origin label
Metadata is louder than the name
Design sets the origin at 12px, muted, normal tracking. The dev file uses 14px, widest tracking, and a coral tint.
text-sm tracking-widest → text-xs tracking-wide text-paper-muted - 3Issue 3:Tasting notes
Wrong size and ad-hoc color
Design is 14px muted with relaxed leading. The dev file is 16px at 70% opacity with 28px leading, so it wraps to three lines.
text-base leading-7 → text-sm leading-relaxed text-paper-muted - 4Issue 4:Roast meter
Filled segments fail contrast
Design fills segments in brand green. The dev file uses pale coral, well under the 3:1 WCAG ratio for graphics.
bg-accent/50 → bg-primary - 5Issue 5:Size selector
A third active-state color
Design highlights the selected size in green. The dev file uses near-black, so the card now has three "selected" colors.
bg-paper-foreground → bg-primary text-primary-foreground - 6Issue 6:Price
Price outweighs the call to action
Design sets the price at 24px in the text color. The dev file uses 30px green, the heaviest thing in the footer.
text-3xl text-primary → text-2xl text-paper-foreground - 7Issue 7:Add to cart
Weak primary button
Design is white text on brand green. The dev file is dark text on coral, lower contrast and off-brand.
bg-accent text-accent-foreground → bg-primary text-primary-foreground
Pricing
One plan. Everything included.
Less than an hour of review time a month. Cancel anytime.
QA Troll Pro
$10/ month
- Unlimited QA projects and flows
- Screenshots, live URLs, and Figma references
- Measured drift on layout, spacing, color, and type
- Fixes written for Tailwind, CSS, React, and more
- Saved results and one-click reruns
For designers
Protect the intent of the approved file without writing another vague annotation.
For developers
Get measured offsets, colors, sizing, and code guidance instead of a subjective review.
For QA teams
Keep every screen, source, result, and rerun together in one repeatable workspace.
FAQ
Questions about visual design QA
What you can upload, how comparisons work, and what your developers get back.
What file types can I upload?
Upload any standard image: PNG, JPG, WebP, GIF, or AVIF. PNG works best for design QA because it is lossless, so compression artifacts are not mistaken for visual differences. Keep each file under 4.5 MB.
Can I use screenshots instead of Figma files?
Yes. Screenshots are the most common input. Any image of the approved design and any image of the current build can be compared, whether they come from Figma, Sketch, Adobe XD, a browser, or a device simulator.
How do I compare a Figma design?
Export the frame from Figma as a PNG at the same width as the page you are testing, then upload it as the design reference. You can also paste a direct HTTPS link to an exported Figma image.
Can I paste a live website URL?
Links must point directly to an image served over HTTPS, such as a hosted screenshot. To check a live, staging, or localhost page, take a full-page screenshot in your browser and upload it. Private network and localhost URLs cannot be fetched.
Do the design and build images need to be the same size?
No, but matching sizes give the most accurate results. QA Troll scales the build image to the dimensions of the design reference, up to 1920 × 1600 pixels. Capture both at the same viewport width (desktop, tablet, or mobile) to avoid false differences.
What kinds of visual differences does QA Troll detect?
It measures pixel-level drift and reports real differences in layout, spacing, alignment, typography, color, corner radius, and content. Each finding includes a severity, a measurement, and a suggested fix.
Which frameworks are the code fixes written for?
Choose Tailwind CSS, plain CSS, React, Vue, SwiftUI, or Flutter for each project, and every fix is written for that stack so developers can paste it straight into their code.
Does it work for mobile apps?
Yes. Set a screen to the mobile or tablet viewport and upload screenshots from iOS, Android, or a device simulator. SwiftUI and Flutter guidance is available for native apps.
Can I check a whole user flow at once?
Yes. Group screens into flows, such as onboarding or checkout, and run the whole batch in one pass. Every screen, source, and result is saved together so you can rerun it after fixes ship.
How is this different from visual regression testing?
Visual regression tools compare a build against its previous version. QA Troll compares the build against the approved design, so it catches drift that was never correct in the first place.
Are my designs and screenshots private?
Yes. Uploads are stored in private storage tied to your account and are only used to run your comparisons. They are never shown publicly.
How much does QA Troll cost?
QA Troll Pro is $10 per month and includes unlimited projects, flows, and reruns. There is no contract, and you can cancel anytime.
QA Troll Pro · $10/month
Stop describing what looks off. Measure it.
Create a project, add your references, and turn visual differences into fixes your developer can ship.
Subscribe for $10/month Cancel anytime