Spacing - Overview

Purpose

Spacers are defined values that can be used to create layouts (i.e. for paddings, margins, gaps). They ensure that spacing between elements is uniform across the entire website.

The spacing values are definite and are aligned to the 4px vertical baseline grid that is used across the website.

Anatomy

In Figma, spacers are available as a set of variables which can be used in auto layouts, and as a component called v-spacing. The component is transparent designed to be used for vertical spacing. Select the height variant that bests suits your requirement. Do not manually adjust its height.