Let’s start with a simple example of a small spacing unit that, in our design files, is set to 8px. Now we have a sense of the purpose of our spacing we have a sense of what unit of measurement would represent it, and we can consider the value our spacing units might store. The purpose of the spacing can often help identify which spacing unit is appropriate to use. You may want consistent/fixed spacing between larger layout sections but are happy to be more fluid between smaller patterns or components. Should we use fixed or relative units? Yeah, this is another ‘it depends’ topic! You can mix these if you’re clear on the rationale too.

Relative: Use % of the available container.

Relative: Use vw or vh units if the spacing should relate to the viewport width and viewport height of the available viewport.

As with rems, this may change based on user preference but also with the nesting of containers with a font size set this way.

Relative: Use em if you want the spacing to relate to the current container’s font size.

This tends to be ~16px by default but may change based on user preferences.

Relative: Use rem if you want your spacing to relate to the base size of the font in the browser.

Fixed: Use px if you want this value to remain the same in all circumstances.

In our front-end code, we have loads of options we don’t have in our design tools: Like many things in design systems, we can look at more semantic naming conventions to convey purpose.

Creating a unit based on their use cases allows us to be more flexible and change these values as we learn and evolve. As you audit the uses of spacing you currently have, you might find that they’re based on an 8px grid (for example), and so each unit may be a multiplier of that value. This abstraction allows us to change values over time while having minimal impact on the system as a whole.

Spacing is no different in this regard we can create a ‘spacing unit’ to represent a use case for the recurring use of space in our designs. Exploring the humble spacing unit a little, we can unpack some issues you might have encountered and some you might not yet have considered.ĭesign systems provide a sense of consistency, and that can find its way across all parts of our products through our design systems. When we talk about design systems, the focus tends to be on websites else, so we tend to have a web-centric view of what our systems could contain.

Figma font dp to sketch pixel