Was du siehst
Eine Beispiel-Website, über die man mit dem Röntgenblick fährt. Jedes Element zeigt seinen Kasten, seine Maße und seinen Innenabstand. Wählt man ein Element aus und fährt mit gedrückter Alt-Taste über ein anderes, erscheint der Abstand in Pixeln.
Dazu kommen ein Spaltenraster über der Seite, Lineale mit Hilfslinien zum Ziehen, ein Schrift-Prüfer mit Familie, Größe, Stärke, Zeilenhöhe und Farbe sowie Notizen, die man direkt an die Stelle heftet.
So ist es gebaut
Eine durchsichtige Messschicht liegt über der Seite. Sie liest die echten Maße jedes Elements aus dem Browser und zeichnet Kästen, Abstände und Beschriftungen darauf. Die Lineale sind Canvas-Zeichnungen, die Hilfslinien lassen sich verschieben und zurück ins Lineal ziehen.
Woher die Idee kommt
Squints bringt die Messwerkzeuge aus Figma als Browser-Erweiterung auf jede Website. Wir haben die Idee direkt in eine Seite eingebaut – genau so prüfen wir unsere eigenen Projekte vor dem Start.
Darauf achten wir
- Messung in echten Pixeln des Browsers
- Kurzbefehle X, G, R, T und N
- Am Handy misst ein zweites Antippen den Abstand