Media
3 items
Description
Figma-style inspection for any website. Hover for type styles, click two elements to measure the gap, see the spacing box. Design Tool inspects any website the way you review a Figma file. DevTools is built for engineers. The Elements panel is a DOM tree, computed styles are three hundred properties in alphabetical order, and measuring the space between two things means eyeballing an overlay. None of that maps to how a designer thinks. Hover an element and read its type spec: size, weight and line height up front, then family, letter spacing, transform and colour. Click two elements and the distance between them is drawn on the page with dimension lines. Select a container and see margin, border and padding as nested rings, with the flex or grid gap stated right next to the padding. WHAT YOU GET • Type styles at a glance, in designer vocabulary rather than CSS • Measure between any two elements, drawn on the page • A spacing box: margin, border, padding, content, plus gap • px, rem and em, converted everywhere at once • Click any value to copy it • Light and dark, and a panel you can drag anywhere and resize BUILT FOR REAL PAGES Most card grids stretch an invisible click target over the whole card, which means a plain hover lands on that instead of the heading you were pointing at. Design Tool skips overlays that paint nothing, and holding Cmd or Ctrl reaches the most specific element under the cursor, the same way you select through a group in Figma. rem is resolved against the page's real root font size, not an assumed 16px, so sites that set a 62.5% root report correctly rather than confidently wrong. Nested measurements come from the container's padding box, so a 12px padding with a 1px border reads as 12px, not 13px. PRIVACY No network requests. No analytics. No accounts. Nothing is injected into any page until you click the toolbar icon or press the shortcut, and access is limited to that one tab for that visit. Your unit, theme and panel position are stored locally and never leave your machine. Open source: https://github.com/shadezie/design-tool HOW TO USE IT Click the toolbar icon or press Option+Shift+I (Alt+Shift+I on Windows). Hover to inspect. Click one element, then hover or click a second, to measure. Press Esc to clear, Esc again to exit.