Squints

Figma's measuring tools for any live web page.

Design tools for the live web. Measure spacing, check type and colour, overlay grids, and slow down or scrub any animation. Design is moving into code. Spacing, type, colour and motion now get decided in the browser, but the tools for checking them stayed behind in the design tool. Squints puts them on the real page, in one small toolbar. WHAT'S IN THE TOOLBAR - Inspect: hover any element to read its size, and the distance to the next one. - Rulers and guides: drag guides out from the rulers. They snap to what's on the page. - Column grid: lay a grid over the live page with its own count, gutter and margins. It's remembered per site. - Draw: arrows, boxes and notes, right where the problem is. - Colour: pick any pixel and get HEX, RGB, HSL and OKLCH, plus the CSS token behind it. - Font: see the font that actually rendered, with size, weight, line height and letter spacing. - Motion: slow every animation on the page down, pause it, and scrub through it frame by frame. - Capture: take a screenshot or record a region, with your marks or without. Free, for designers and design engineers who work in the browser. squints.app