Design Tool
Figma's inspect panel, for any website
Start new thread

Design Tool - Figma's inspect panel, for any website

by•
Hover any element on a live website and read its type styles the way you would in Figma. Click two elements to measure the exact gap between them as dimension lines, not a ruler you eyeball. See margin, border and padding as a spacing box instead of a flat CSS list. Reach past full-bleed overlay elements with a Cmd/Ctrl-hover. No host permission, no tracking, no network requests — nothing leaves your browser.

Add a comment

Replies

Best
Maker
📌
Hey everyone 👋 I built this because I was tired of digging through DevTools just to measure spacing on a website - scrolling a huge list of CSS properties when all I wanted was "what's the gap between these two things," the way Figma just tells you. So Design Tool brings that Figma-style inspect experience into the browser. Hover to see type styles, click two elements to measure the gap between them, see padding/margin as a proper spacing diagram. It's activeTab-only, no network requests, nothing leaves your browser. Would love to hear what you think, and happy to answer anything about how it's built.