Design is moving into code. The decisions that used to be settled in a design file, like spacing, type, colour and motion, now get made in the browser, where the tools for looking closely never followed.

Squints brings them. Figma’s measuring tools and more, on any live web page. A free Chrome extension for design engineers.

• Inspect anything. Read its box, and the gap to the next one.

• Rulers and guides. Drag them out like in Figma. They snap.

• A column grid. Over the real page, remembered per site.

• Draw on the page. Arrows, boxes and notes, where it matters.

• Pick any colour. Every format, plus the token behind it.

• Identify any font. The one that really rendered, with metrics.

• Slow motion down. Every animation at a tenth of its speed.

• Record and scrub. Step through any animation, frame by frame.

I’m Andreas, a product designer and frontend engineer near Copenhagen. More of my design work happens in the browser now, and I kept wanting Figma’s measuring tools there, on the real page instead of a mockup of it. Squints is that toolbar, and it’s free.