Design & UI Validation

Measure Tool

A precision crosshair ruler HUD that overlays all device frames simultaneously, giving you real-time pixel and rem readouts for any point on the canvas.

Overview

Pixel-Perfect Measurement Across All Viewports

The Measure Tool is one of Vispane's signature interactions. When active, moving your cursor over any device frame draws a crosshair guide line across the entire canvas with a live HUD showing the exact x/y coordinates in both pixels and rem units. This shared HUD works across every viewport simultaneously — a capability that doesn't exist in any standard browser DevTools.

Live Crosshair HUD: Continuous x/y position readout that follows the cursor in real time across the full multi-device canvas.
px and rem Units: Displays measurements in both pixel and rem units simultaneously, accounting for the document's root font size.
Point-to-Point Distance Measurement: Click once to place an anchor point, then move the cursor to measure the exact distance between two points on the canvas.
Cross-Frame Operation: The single HUD overlay spans all device frames — no need to switch between viewports to measure different elements.
Non-Destructive: The measure tool activates as an overlay and doesn't interfere with the page's click events or interactions.

Pro Tips

💡

Verify spacing against design specs Use the point-to-point measurement to verify that the gap between elements matches the spacing specified in your Figma or Sketch design file exactly. This catches pixel-drift issues before they reach code review.

💡

Check consistent gutters across breakpoints Activate the tool and check that your grid gutters are consistent across the Mobile, Tablet, and Desktop frames. Inconsistent gutters that passed code review are one of the most common quality issues in responsive layouts.