Set up your design correctly so that you, your team, and development partners can tap into the system’s efficiency. Here is how we measure.
1. Click on text.
2. Enter the value for type size and line height according to the type scale.
3. Hold the “alt” key and hover over the element you need to measure from as well as the one you need to measure to.
4. Make sure the spacing adheres to our spacing values: 8, 16, 20, 40, 60. No other number should show up between these boxes.
Use consistent spacing
Consistent spacing plays a crucial role in the success of the design system. Using the math helps us create simple, easy-to-remember rules in element spacing and margins. For example, margins on containers should always be the same. This will help us create consistent user interfaces and flows.
Eliminate hours of specifying
Using the math with tools such as Zeplin and Invision should save designers hours of tedious specification. The math also helps us speed up delivery to development.
Because spacing and types scales are predicatable, the math will also help engineers implement the design correctly. Here’s how to use Zeplin in your specifications.
Using Zeplin to specify your design
Zeplin: code specific units per project
Engineers can get platform-specific measurements from a design without the designer having to specify more than when setting up the project initially.
Zeplin: inspecting designs
Using pixel-perfect designs and the same typography and spacing scale, designers save tons of hours by not doing spec work on top of their designs. Zeplin allows engineers to fully inspect each design and understand the designer’s intent. And the engineer keeps full control of the technology and how best to implement the design.
Zeplin: tagging feature
Tags allow the team to quickly find specific designs or see similar work by filtering down. Tagging will also allow the team to add extra process into things like versioning. For example, a designer can tag a design with #WIP for work in progress.
Combined with tagging, versioning is similar to code commits from engineers. Designers can keep the entire team on track by typing a specific blurb each time they update the design. Especially if designs are complex screens or flows, versioning helps us see differences in versions and what code we might need to update as a result. We can also use versioning to check earlier versions and see how the design evolves.
Zeplin offers other helpful features, like the pop-out inspect feature that allows a developer to overlay the designs transparently on top of the coded version to see pixel imperfections. We can also use Zeplin to add comments on designs for rapid feedback.