Issues represent detected visual differences between a Figma design and a live webpage.
Each issue points to a specific place where the implementation does not visually match the design.
(Visual reference: Single issue highlighted on the canvas with an annotation card open, showing expected vs actual values.)
Issues are created as the result of a probe run and are always tied to a specific probe version.
An issue describes a concrete visual discrepancy.
It answers three questions:
Issues are observations based on the visual comparison performed by Uiprobe. They are not opinions or suggestions.
Uiprobe detects different types of visual differences, grouped into categories based on what aspect of the design is affected.
These issues relate to the position and size of elements on the page, including:
Layout and spacing issues typically affect alignment, rhythm, and overall layout consistency.
Layout and spacing issues are often visualized with additional indicators on the canvas, such as measurement lines and distance labels. These indicators help make differences in spacing, size, and padding easier to interpret during review.
(Visual reference: Layout or spacing issue showing measurement lines and spacing values between elements.)
Typography issues relate to how text is rendered, including:
Typography issues often affect readability and visual hierarchy.
(Visual reference: Typography issue showing expected vs actual font size or line-height values.)
These issues relate to the visual styling of elements, including:
Color and styling issues usually affect visual consistency across components.
(Visual reference: Styling issue showing a color or border mismatch between design and webpage.)
Content and asset issues relate to what is visually rendered on the page, including:
These issues typically indicate that the wrong content or asset is being used, is missing, or does not match the design.
(Visual reference: Content issue showing text or asset mismatch with expected vs actual values.)
Unmapped element issues occur when an element exists in the design but not on the webpage, or vice versa.
These issues help identify missing or extra elements compared to the reference design.
(Visual reference: Unmapped element issue highlighting an element present in one source but not the other.)
Issues are visualized on the canvas using markers.
Each marker points to the location where the issue was detected. Selecting a marker opens the corresponding annotation card, which shows the issue details and comparison values.
(Visual reference: Multiple issue markers on the canvas, with one selected and its annotation card visible.)
When multiple issues exist in close proximity, markers may be grouped or clustered to keep the canvas readable.
All issues for the selected probe version are listed in the Issues panel.
The panel provides a structured overview of detected issues and supports grouping when multiple issues occur on the same element or within the same segment. Selecting an issue in the panel highlights its marker on the canvas and opens the related annotation card.
The Issues panel also allows you to filter issues by category, making it easier to focus on specific types of differences, such as layout, typography, or content-related issues.
(Visual reference: Issues panel with category filters applied, showing a filtered issue list.)
When multiple related differences are detected on the same element or within the same segment, they are grouped together.
Grouped issues:
(Visual reference: Grouped issue showing a single marker with a grouped annotation card containing multiple issues.)
Grouping reduces visual noise and keeps related differences connected.
Issues are specific to a probe version.
When you switch to a different version, the set of visible issues may change. Some issues may disappear, new issues may appear, or existing issues may change depending on how the design or webpage has evolved between runs.
This makes it possible to review visual changes over time without overwriting previous results.
Issues are limited to visual validation.
They do not:
Their purpose is to surface visual differences so teams can decide what action—if any—is required.
