Pixel Ruler — Measure Screen Elements in Pixels

Designers and developers: this is your ruler. Pixel mode displays a ruler calibrated to CSS pixels with major ticks every 100 pixels and minor ticks every 10 pixels. Use it to verify spacing, check component sizes, and measure layout dimensions without opening your screenshot tool or design inspector.

Why Designers Need a Pixel Ruler

When you're implementing a design, the spec says "32px padding" or "240px card width." But how do you verify those values on screen without taking a screenshot and measuring it in Figma? A pixel ruler overlay lets you check dimensions in real time, directly on the live page.

Live Ruler's pixel mode doesn't require PPI calibration — a pixel is a pixel, regardless of your screen's physical size. This makes it the only mode that works perfectly without any setup, because it measures CSS pixels directly.

Use Cases for Web Developers and Designers

• Verifying spacing and padding — check that your CSS matches the design spec without browser DevTools
• Component sizing — measure button heights, card widths, icon dimensions on the live page
• Responsive breakpoints — visually confirm how much space is available at different viewport widths
• Alignment checking — use guide lines to verify that elements are aligned across different sections
• Screenshot measurement — open a screenshot in a new tab and measure elements directly
• Design QA — compare implemented dimensions against the design file specs

Combined with the crosshair mode, you get instant X/Y coordinates in pixels as you move your cursor — perfect for pinpointing exact positions on screen.

CSS Pixels vs. Device Pixels

Live Ruler measures in CSS pixels (also called logical pixels or DIPs — device-independent pixels). On a standard display, one CSS pixel equals one hardware pixel. On a Retina or HiDPI screen (2× or 3× device pixel ratio), one CSS pixel maps to 4 or 9 hardware pixels.

This is what you want: CSS pixels are the units used in CSS, JavaScript, and design tools like Figma. They represent the "logical" size of elements as the user perceives them, regardless of screen density. If your Figma spec says 48px, the pixel ruler will confirm 48px on any screen.

For physical measurements (the actual millimeters on screen), switch tocentimeters or millimeters.