# Uiprobe

> Uiprobe automatically compares live web pages against their Figma designs and surfaces visual differences as structured findings. It detects spacing, typography, color, layout, and content deviations between the original design and the rendered implementation. Uiprobe works via a Chrome Extension (including on localhost and login-gated pages) and a web app. Authentication is through Figma OAuth. The comparison is deterministic, not AI-based.

Key facts about Uiprobe:

- Uiprobe compares a Figma frame URL against a live webpage URL and produces a set of findings organized into Properties, Spacing, and Unverified sections
- Findings show expected values (from Figma) and actual values (from the rendered page) for each detected difference
- The Chrome Extension is required for localhost and login-gated pages
- A Figma account with a Dev or Full seat is required for active use
- Uiprobe is free to use during the public beta
- Founded by Maarten

## Product Pages

- [Homepage](https://www.uiprobe.io/): Overview of what Uiprobe does and who it is for
- [Chrome Extension](https://chromewebstore.google.com/detail/uiprobe-compare-your-site/opcfheiigjnncbbaljoilbaokpmojpjj): Chrome Web Store listing with feature details and installation
- [Figma Plugin](https://www.uiprobe.io/figma-plugin): Sends any Figma frame to the web app as a draft probe, ready to pair with a live webpage URL
- [Uiprobe for Frontend Developers](https://www.uiprobe.io/for/developers): How Uiprobe helps developers see where their implementation diverges from the Figma design before code review
- [Uiprobe for UI/UX Designers](https://www.uiprobe.io/for/designers): How Uiprobe lets designers check if the implementation reflects their Figma design without manual review
- [Uiprobe for QA Engineers](https://www.uiprobe.io/for/qa-engineers): How Uiprobe gives QA engineers a repeatable, objective visual verification process against Figma designs

## Comparisons

- [Uiprobe vs Pixelay](https://www.uiprobe.io/compare/uiprobe-vs-pixelay): Automated detection vs visual overlay comparison
- [Uiprobe vs PerfectPixel](https://www.uiprobe.io/compare/uiprobe-vs-perfectpixel): Automated findings vs manual image overlay comparison

## Learn

- [What is visual QA for web development?](https://www.uiprobe.io/learn/what-is-visual-qa-for-web-development): The process of checking whether a web page looks the way it was designed to look
- [What is automated design QA?](https://www.uiprobe.io/learn/what-is-automated-design-qa): How automated tools replace manual visual checking between Figma designs and live pages
- [What Figma MCP does and what it doesn't solve](https://www.uiprobe.io/learn/what-figma-mcp-does-and-what-it-doesnt-solve): Generation vs verification — why Figma MCP does not replace visual QA
- [How to compare Figma designs with a live website](https://www.uiprobe.io/learn/how-to-compare-figma-designs-with-a-live-website): Methods for comparing designs to implementations, from manual overlay to automated comparison
- [How to check if a website matches a Figma design](https://www.uiprobe.io/learn/how-to-check-if-a-website-matches-a-figma-design): Methods for verifying design implementation accuracy
- [What is visual regression testing vs design QA?](https://www.uiprobe.io/learn/what-is-visual-regression-testing-vs-design-qa): The difference between regression testing and design-to-code comparison
- [What is a Figma overlay tool and how does it work?](https://www.uiprobe.io/learn/what-is-a-figma-overlay-tool-and-how-does-it-work): How overlay tools work and their limitations compared to automated comparison
- [How vibe coding changes the need for visual QA](https://www.uiprobe.io/learn/how-vibe-coding-changes-the-need-for-visual-qa): AI-generated frontends still need design validation
- [How to do visual QA on localhost](https://www.uiprobe.io/learn/how-to-do-visual-qa-on-localhost): Validating designs on local development servers behind a login or on localhost
- [What are the best Figma plugins for design QA?](https://www.uiprobe.io/learn/what-are-the-best-figma-plugins-for-design-qa): Overview of Figma plugins that support visual quality assurance