We apply spacing to create a sense of balance between elements on a page. Good spacing makes pages much easier for users to scan and identify the differences between various segments of content.
<div class="v-pt-size-24 v-pl-size-24"></div>While we maintain a basic level of precise measurements for spacing on a page, we also leave some room for flexibility for designers to be able to come up with what looks best for them. It is important to make sure that spacing is more than a set of rigid specifications, but so that objects on a page move and adapt based on their relation with other elements on the page.
When creating textual items on a page, it’s important to ensure that there is some consistency in the way that content is rendered. There needs to be a natural rhythm to how it appears. Text in paragraphs need to be consistent while there also needs to be a clear distinction between different paragraphs. The design must look intentional.
Spacing tokens are used to identify any of the following:
These spacing tokens help us provide standard and uniform padding and spacing so that the system remains consistent across all views. The tokens are based on increments of 4 pixels, and are named based on their specific size. We use a simple naming convention for these tokens to help us immediately identify the value of the token without the need for cross-reference. This also enables the system to remain flexible, so that it may be possible to add new ones in the future if the need arises.
To use spacing for Vega elements in Figma, you will need to use the Vega Plugin. Basic Installation and use guide.