Got a question? We're here to help. Check out our most frequently asked questions below. If you don't find what you're looking for, feel free to contact our support team.
Uiprobe is a visual validation tool that helps frontend developers and UI designers ensure their implemented webpages are pixel-perfect matches to their Figma designs. It automatically detects visual inconsistencies, eliminating manual checks and accelerating your review cycles.
Uiprobe is primarily for frontend developers and UI/UX designers who want to quickly verify visual accuracy. It's also useful for team leads and product managers who need to improve cross-functional alignment and reduce time wasted on repetitive feedback loops.
We use Figma-only login to provide a seamless and frictionless onboarding experience. This approach not only gets you started faster but also handles the future integration with Figma's API, so you don't have to connect your account later.
Uiprobe's web application cannot directly access localhost or pages behind a login. To validate these pages, you must use our Chrome Extension. The extension can access the page you are currently viewing and send the content to Uiprobe for comparison.
If no issues are found, Uiprobe will display a "Great job! No visual inconsistencies detected" message. From this screen, you can still view the Figma design or the webpage, or start a new comparison. This can happen if the pages are an exact match or if the Figma design and webpage are completely unrelated.
Currently, Uiprobe only supports Figma and requires a Figma account for login and design integration.
The Web App is the central hub for managing and reviewing all your probes in detail, with various comparison views like Split View and Overlay Mode. The Chrome Extension is a lightweight tool for quickly creating new probes or updating existing ones directly from the webpage you are viewing in your browser.
Uiprobe compares a wide range of visual elements and properties to ensure design fidelity. It categorizes issues into: Layout & Spacing: Including differences in width, height, margins, and padding.
Typography: Checking for mismatches in text content, font family, font size, font weight, letter spacing, and line height.
Color & Styling: Detecting discrepancies in fill color, border color, border thickness, and border radius.Content & Assets: Identifying differences in images and icons.
Unidentified: Flagging elements that are missing or extra compared to the design.
