One of the key pieces of a design system is a well-defined spacing system. This ensures that both designers and developers can use spacing consistently across projects.

Now, you can create your spacing system in Zeplin and this way, your product team can collaborate effortlessly about spacing values.

There is a new “Spacing & Layout” page under your styleguide. You can start to create your set of spacing tokens by clicking on the “Add first token” button.

Zeplin suggests names and values when you create them, but you can change these variables to match your design system.

Zeplin also displays translucent overlays when reviewing screens so that you can easily differentiate where spacing tokens are used. You also have the option to change the overlay colors to provide the best contrast for your designs.

Once you finish defining your spacing tokens in your styleguide, Zeplin displays these spacing tokens right in the screens while you are inspecting the layers. You can also get platform specific code snippets for these spacing tokens through Zeplin extensions: Style sheet variables (CSS, Sass et al.), Swift constants, XML variables.

☝️If you define measurements based on a single base value, you can create a single spacing token in your styleguide and this way, Zeplin displays multiples of this spacing token in the screens. 

If you have any feedback on Spacing, let us know at support@zeplin.io!

Related articles:

Did this answer your question?