Define paddings, gaps, and margins around elements.
Choosing Space vs. Size
Space
Spacing design tokens focus on controlling spatial relationships; that is, the space between and around elements. Example CSS properties they correspond to: padding, margin, gap
Size
Size design tokens define intrinsic dimensions of UI components. Example CSS properties they correspond to: width, height, border-radius, border-width, positioning properties, i.e. top, left, etc.
Usage
Use spacing units, when stacking elements or when adding padding or margin.
When setting the scale of an element, use Size units.
Setting a Specific Spacing
When setting the gap between elements, utilize Space Tokens for the gap value.
👍 gap: var(--dt-space-400)
👎 gap: var(--dt-size-400)
<style>
.wrapper {
gap: var(--dt-size-400);
}
</style>
<div class="wrapper">
<div>
Element A
</div>
<div>
Element B
</div>
</div>
Stacking
When adding space between elements, both vertically and horizontally, we can use either space-between or gap to define the space that separates each element. The value is set as a variable in Figma and as a token in code.
- For gaps inside a box/container, such as between headings, text, and buttons, use values like
var(--dt-space-0)tovar(--dt-space-550) - For spaces between different boxes/containers on a page, choose values from
var(--dt-space-600)tovar(--dt-space-700)
Vertical stacking
Set the space-between/gap groups vertically.
Horizontal stacking
Set the space-between/gap groups horizontally.
Padding
When adding space around an element, use padding to create breathing room.
Avoid using margin, which adds space outside the element and can affect the layout, in that case, follow the stacking approach.
Padding can be measured vertically and horizontally.
Visual Guides
Grouping
Group and adjust the distance between elements to guide users understanding of their relationships. Closer elements appear more connected, while larger gaps indicate less association.
Consistent and intentional spacing decisions across pages create a predictable layout, reducing cognitive load and allowing users to focus on the content rather than the layout.
Proximity groups are formed by placing elements close together. Delimited groups, on the other hand, are defined by clear visual boundaries, such as borders.
Guiding the Eye
Control the amount of space around an element to affect its visual importance. Use larger spaces for more prominent elements and smaller for those of lower importance. Keep in mind the position of the elements will benefit the order of reading.
The empty areas around elements provide visual breathing room, enhancing readability and contrast.
Tokens
Here are some frequently used tokens, don't use values outside the recommended range for specific types of spacing. For a complete list, visit the Spacing Tokens section.
Key Takeaways
- Use predefined tokens, they help maintain consistency and make it easier to update designs.
- Consider the overall composition and whitespace to create well-proportioned layouts.
- Ensure consistent spacing across various screen sizes and breakpoints.
- Keep spacing consistent: This ensures a polished look across all devices.
🌟 Design Tip: Optimize your workflow in Figma by setting the nudge amount to 4px or 8px. It's a small change that can make a big difference in ease of use!