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, and XML variables.