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.
Web view shows only the live webpage.
This mode is useful for inspecting the implementation on its own, without any design reference. Findings and markers remain visible on top of the webpage.
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 findings were detected.
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.
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.
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.
Switching view modes does not affect detected findings or probe versions.
You can freely change view modes while reviewing findings, navigating markers, or switching between probe versions. The selected view mode only affects how the comparison is rendered on the canvas.
