There are a number of ways spacing is used at Skyscanner to give our product a feeling of clarity, focus and calm.
When done correctly, good design should feel balanced. Skyscanner has a core set of spacing tokens that apply from tiny components all the way up to full-page layouts.
The size depends on the overall design and the content to show. There's no one size fits all solution. The range of sizes is based on the 8px grid.
Spacing tokens
Spacing in components
Typically sm – xl tokens are used within the construction of components. 4px of spacing should be used where it’s needed. Details matter.
Spacing between components
When design needs a little more space to breathe, xxl – xxxxl tokens give much-needed space. They create intentional white space on the screen to make it easier for travellers to subconsciously detect where sections start and end.
Padding
Spacing tokens can also be used for padding, and there’s a subset of values for padding.
Padding in components
Padding is spacing that’s applied to the outer edges of cards on all sides. This pushes content inwards, making it easier to scan.
- Don’t spacing combine tokens to make new values.
Figma Autolayout
It’s best to build designs using Autolayout where possible. This allows the design to grow, shrink, wrap and reflow like code. The above examples show spacing turned on just for reference. Figma doesn't natively support spacing tokens, so values must be entered manually.
Layout Grids
Spacing values are linked to our Layout Grids, where we use 16px and 24px margins. All spacing on Skyscanner adheres to a multiple of the 4px foundation.