View modes control how the Figma design and the live webpage are displayed on the canvas.
They allow you to switch between different visual representations of the comparison, depending on what type of difference you want to inspect.
View modes are selected from the view toolbar at the top of the canvas.
(Visual reference: View mode controls in the canvas toolbar.)
Web view shows only the live webpage.
This mode is useful for inspecting the implementation on its own, without any design reference. Issues and markers remain visible on top of the webpage.
(Visual reference: Canvas showing only the webpage layer with issue markers visible.)
Figma view shows only the Figma design.
This mode allows you to inspect the design in isolation and compare it mentally to the implementation. Markers remain visible to indicate where issues were detected.
(Visual reference: Canvas showing only the Figma design layer with markers.)
Split view displays the webpage and the Figma design side by side using a movable split handle.
Dragging the handle reveals more or less of each layer, making it easier to compare alignment, spacing, and positioning across a shared edge. The split direction can be switched between horizontal and vertical.
(Visual reference: Split handle on the canvas, shown in both horizontal and vertical orientation.)
Overlay view places the Figma design and the live webpage directly on top of each other.
In this mode, one layer is blended over the other, allowing precise inspection of alignment and subtle visual differences. The opacity of the top layer can be adjusted to control how strongly the layers blend.
(Visual reference: Overlay view with opacity control visible in the toolbar.)
Diff view highlights visual differences between the design and the webpage.
Instead of showing both layers directly, this mode visualizes pixel-level misalignments and differences, making it easier to spot small shifts, size changes, or spacing inconsistencies that may be hard to see in other modes.
(Visual reference: Diff view highlighting pixel-level visual differences on the canvas.)
Switching view modes does not affect detected issues or probe versions.
You can freely change view modes while reviewing issues, navigating markers, or switching between probe versions. The selected view mode only affects how the comparison is rendered on the canvas.
