Spacing Systems for UI Design

Spacing is the most repeated design decision in a UI. Every padding value, every gap between elements, every margin is a spacing decision — and there are hundreds of them in any complex interface. Without a system, those decisions happen ad hoc, and the result is spacing that looks subtly inconsistent: similar elements have different padding, related sections have different gaps.

A spacing scale solves this by reducing your infinite set of possible values to a defined, limited set you always choose from.

What a spacing scale is

A spacing scale is a sequence of values that all your spacing decisions come from. Instead of typing "13px" because it looked right, you choose the nearest value in your scale. The constraint forces consistency.

You need a scale because the goal isn't perfect precision at each individual decision — it's consistency across the whole system. A button with 13px padding and a card with 12px padding looks inconsistent. A button with 12px padding and a card with 12px padding looks intentional, even if neither is the "perfect" optical value.

The 4pt vs 8pt debate

You'll see both in the wild.

8pt grid: values are multiples of 8 — 8, 16, 24, 32, 40, 48, 64, 80, 96. Clean and simple. Works well for most layouts. The gap between 8 and 16 can feel large for fine-grained spacing decisions.

4pt grid: values are multiples of 4 — 4, 8, 12, 16, 20, 24, 32, 48, 64. More granularity at small sizes. Allows values like 4px (for tight icon-to-label spacing) and 12px (for compact list padding) that pure 8pt doesn't have.

Most design systems use a variation of the 4pt system but skip many values — defining only the ones they actually need. That's the sensible approach.

Defining your spacing scale

A scale that works for most product UI:

| Token | Value | Use | |-------|-------|-----| | space-1 | 4px | Tight spacing — icon to label, checkbox to text | | space-2 | 8px | Small gaps — between related elements | | space-3 | 12px | Component internal padding (compact) | | space-4 | 16px | Component internal padding (default) | | space-5 | 24px | Spacing between components | | space-6 | 32px | Section spacing (small) | | space-7 | 48px | Section spacing (medium) | | space-8 | 64px | Section spacing (large) | | space-9 | 96px | Page section separation |

You won't use all of these equally — space-4 and space-5 will cover 80% of your spacing decisions. The larger values are for page layout.

Using spacing tokens in Figma variables

Figma variables let you define your spacing scale once and reference it across components, rather than typing raw pixel values.

To set up spacing tokens:

1. Open the Variables panel (the grid icon at the top right of the design panel)
2. Create a new collection called "Spacing"
3. Add variables for each value: name them with your naming convention (space-1 through space-9, or 4, 8, 12... or xs, sm, md, lg...)
4. Set each variable's value to the corresponding number

To apply a spacing variable: in the auto layout settings panel, click the spacing value and then click the variable icon that appears. Select your token.

Once a component uses spacing tokens, updating the token value updates all instances of that spacing throughout the file. This is the design-side equivalent of a CSS variable.

Try Figma Free

Consistent spacing rules

Padding is the space inside an element's boundary — the space between the text inside a button and the button's edge.

Gap (or "margin" in older terminology) is the space between elements — the space between two buttons in a row, or between items in a list.

Consistent rules to follow:

• Same component type = same padding. All "large" buttons have the same padding. All "default" card components have the same padding.
• Use gap for spacing between sibling elements in auto layout. Don't fake spacing by adding margins to individual elements.
• Be systematic with inline vs block spacing. A card might have 16px vertical padding and 20px horizontal padding — set this intentionally, not by eye.

Applying the scale to components

Buttons: Small button: 6px vertical / 12px horizontal padding. Default: 10px / 16px. Large: 14px / 20px. (Use the closest scale values.)

Cards: 16px or 24px internal padding, depending on content density. Use the same padding on all sides, or consistent asymmetric padding (24px horizontal, 20px vertical).

Form inputs: 10px vertical / 14px horizontal padding is typical for a standard text input. Always consistent across all input types in your system.

Section spacing on page: 48px between major sections, 24-32px between subsections within a section.

The spacing antipatterns to avoid

• Pixel-nudging elements until they "look right" without checking against your scale
• Different padding on similar components ("the card has 16px but the panel has 20px... why?")
• Using margin instead of gap in auto layout components — this breaks when the component is used in a different context
• Half-values and odd numbers (6px, 7px, 13px) that don't map to any scale value and can't be maintained consistently

The measure of a good spacing system: any designer on your team should be able to pick up a design and add a new component to it, and the spacing will feel right without guidance. That's what systematized spacing enables.