Spacing principles

Spacing principles guide designers in creating interfaces that are not only visually appealing but also functional and user-friendly.

Visualisation of two blocks with different spacings applied to both top and bottom parts of the blocks.

Best practices

Combining different block spacing creates visual relations between different blocks, helping users understand what blocks relate to each other and which ones don’t. These principles make for a consistent use of spacing and provides designers, developers, and creators with a shared language and reference.

When to use

Create distance between blocks of content

When not to use

As spacing inside UI elements

Spacing options

Tight

Visually connects different blocks to each other.

Never use a background colour with this space, unless two or more blocks are connected and, the first and last block, top/bottom spaces respectively, are at least Default.

Close

For different blocks visually related to each other.

Never use a background colour with this space, unless two or more blocks are related and, the first and last block, top/bottom spaces respectively, are at least Default.

Default

The default space between blocks. Background can be used freely.

Spacious

Separates blocks and creates a visual distance beyond default.

Airy

Makes a block stand out.

Applying space to blocks

The platform variable collection provides a convenient way of applying space to block level designs in Figma. For quick access, search for 'block-space' in the auto layout space panel and chose the appropriate space. It will apply the correct space value depending on platform and theme (values can differ between themes).