DEV Community

Cover image for Measuring distances

Posted on

Measuring distances

When you receive a fresh mockup, hot off the presses, it's usually delivered to you in some sort of design tool, like Figma or Zeplin.

These tools are awesome, because unlike a static image, they're live representations of the design. You can select individual elements and pluck out colors and sizes.

Unfortunately, this information is not always trustworthy! Just because Zeplin tells you that there's a 64px gap between the heading and the paragraph doesn't mean it's correct.

Tools like Sketch are fundamentally design tools; they inherit a set of practices and idiosyncrasies from the design world, and they don't always map neatly onto the web. They'll be close, sure, but not necessarily close enough.

Instead of trusting the measurements you get from design tools, you should take your own measurements! My favorite way to do this is using the built-in screenshot tool in MacOS:

Image description

You can toggle this feature on with the keyboard shortcut cmd-shift-4. Click and drag to draw a box, and use the numbers in the bottom-right to gauge distance. If you release the mouse, it'll take a screenshot, or you can hit the Escape key to cancel it, to avoid cluttering your desktop with a bunch of images.

Other operating systems don't have this sort of thing built in, but I've found a few alternatives: Greenshot (Windows) and ScreenRuler / KRuler (Linux).

Be sure to measure both the mockup and your implementation! Tweak as needed until the numbers are the same. And measure the distance to the actual letters, not some imaginary box around them!

Work on spotting differences. Arrange your windows so that the mockup and your implementation are side-by-side, and look for subtle differences. Treat it like one of those spot-the-difference games.

There are also tools like PixelSnap. PixelSnap is a tool that lets you quickly and easily measure just about everything on the screen, using a bunch of advanced tools. It's paid software, but you might be able to convince your employer to pick up some licenses for the team!

Design systems

It's becoming increasingly common for organizations to adopt design systems. A design system is a suite of tokens, constants and components that form a cohesive system to be used by design and engineering.

In an ideal world, you'd never have to measure anything, because spacing would be tokenized. The designer could say "this gap is a level-4 space", which would correspond to some number of pixels in your theme.

In practice, this doesn't solve some of the discrepancies between design tools and the web. I've worked with a lot of design systems, and I've still found myself making small tweaks.

Design systems offer a great base upon which to build, but in my opinion, they don't completely solve the problem.

Discussion (0)