All Collections
Global Styleguides
Creating your spacing system
Creating your spacing system

Learn how to add your spacing tokens to Zeplin

Tuba avatar
Written by Tuba
Updated over a week ago

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.

You can create your spacing system in Zeplin so that your product team can collaborate effortlessly about spacing values.

You can start to create your set of spacing tokens by clicking on the “Add first token” button from the “Spacing and Layout” page under your styleguide.

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 on 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 on the screens. 

Related articles:

Did this answer your question?