Annotation cards show the details of visual issues directly on the canvas while you’re reviewing probe results.
They appear when you select a marker and explain what differs between the Figma design and the live webpage, without requiring you to leave the area you’re inspecting.
(Visual reference: Annotation card shown on the canvas after selecting a marker.)
An annotation card presents a detected issue in a compact format. It typically includes:
This information is shown alongside the affected element on the canvas.
(Visual reference: Annotation cards showing different issue categories with expected → actual comparisons.)
Annotation cards adapt based on the type of issue being reviewed.
When a marker represents a single issue, the annotation card focuses on that individual difference.
When multiple issues are detected, annotation cards can represent different types of groups, for example:
(Visual reference: Grouped annotation cards showing different grouping patterns.)
Grouping allows related differences to be reviewed together without cluttering the canvas with multiple overlapping cards.
The footer of an annotation card contains controls that support reviewing and navigating issues.
Depending on the issue and context, the footer may include:
These actions are designed to support fast review workflows while keeping the card focused on visual inspection.
(Visual reference: Annotation card footer showing navigation and feedback controls.)
Annotation cards are integrated with the canvas:
Annotation cards behave consistently across view modes, even as the visual presentation of the comparison changes.
Annotation cards are designed for visual review only.
They do not:
Their role is to surface visual differences so teams can decide what action—if any—is needed.
