Spacing and the 8-point grid, used properly

Put two screens side by side. They have the same content, the same colours and the same font. One looks calm and professional. The other looks "a bit off", though nobody can say why.

Measure them and the answer appears. On the second screen, the gap under one heading is 13, under the next it's 19, and under the third it's 22. Card padding is 15 on one card and 17 on another. The left edge of the text doesn't line up from section to section. No single difference is big enough to notice. Together they make the screen feel careless.

Spacing is the quietest part of visual design, and the one that most often separates amateur work from professional work. This lesson gives you a system for it, and explains why the system works, so you can use it with judgement instead of following it blindly.

Words in this lesson

Spacing tells people what belongs together

Before any numbers, understand what spacing does. Material Design 3's guidance on spacing describes several jobs:

• Grouping. Close spacing ties related things together, like an image and its caption. More space separates unrelated things.
• Proximity. Place components near each other to show they're related. For example, buttons should be close to the content they affect.
• Rhythm. Consistent spacing between related elements makes a screen easier to scan.
• Emphasis. Generous space around something important draws attention to it.

So spacing isn't decoration. When the space between a label and its field is the same as the space between that field and the next label, people can't tell which label belongs to which field. That's a spacing bug, not a style choice.

The core rule: space inside a group should be smaller than space between groups.

Delivery address          ← label
[ 12 Adeola Street    ]   ← field      } 8 apart: they belong together
                                        } 24 apart: new group
Phone number
[ 0803 000 0000       ]

Why a spacing scale?

If you can use any number, you'll use every number: 13, 15, 17, 19, 22. Nobody can remember them, developers can't reproduce them, and the screen looks slightly uneven.

A spacing scale limits your choices to a small set. Instead of asking "how much space here?", you ask a much easier question: "is this a small, medium or large gap?"

Why 8?

Material Design 3 states that its spacing system is measured on an 8 dp scale, where its base spacing unit, space100, equals 8 dp. It says the main spacing units are multiples of 8 dp.

There's also a practical reason 8 works so well on Android, which you can check yourself using what you learned in lesson 5.1. Android's documentation lists density scale factors of 0.75, 1, 1.5, 2, and higher densities at about 3 and 4 times the baseline. Multiply 8 by each:

Multiples of 8 always turn into whole physical pixels at these densities. A value like 10 doesn't at 0.75, where it becomes 7.5. A screen can't light up half a pixel, so values like that have to be rounded, and small rounding differences make edges and gaps slightly uneven. Multiples of 8 also divide cleanly in half (8, 4, 2) when you need something smaller.

"Used properly": it isn't only multiples of 8

Here's what many tutorials get wrong. They teach "everything must be a multiple of 8", and then designers force awkward gaps.

Material Design 3's own spacing tokens include:

0, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 36, 40, 48, 56, 64, 72 (all in dp)

Material explains that the main units are multiples of 8, but smaller "nested" values, like 2, 4, 6 and 10, are also used inside layouts and components. And it says the system can be extended when you need values it doesn't define.

So "used properly" means:

• Use multiples of 8 for most spacing: between sections, around cards, page margins.
• Use 4 (and occasionally 2) for tight, internal spacing, like the gap between an icon and its label.
• Pick from a scale rather than inventing numbers, and use it consistently.

A practical scale for this course

For your 360-wide designs, use this scale:

Material Design 3 says margins on compact screens are 16 dp from the leading and trailing edges. In Module 3 you used 24, which is also on the scale. Either works: the important thing is to pick one and use it everywhere in your product.

Material's spacing words: padding, gap, margin

Material Design 3 splits spacing into three categories:

• Padding: space inside an element.
• Gap: space between elements in a grid or container.
• Margin: space outside an element.

And it gives a useful piece of advice: use padding and gaps before margins. Define padding and gaps on the parent container to organise everything inside it, rather than adding separate margins to each child.

That's exactly how auto layout in Figma works. An auto layout frame has padding and a gap between items, which you learned in Module 3. So when you build with auto layout, you're already following Material's advice.

Spacing and big text

Material Design 3 also notes that when text is scaled up to 200%, the same spacing should be kept by default. The text grows; the spacing system stays the same. That's another reason to build with auto layout and Hug, as you did in lesson 5.1.

Set it up in Figma

Make arrow keys move in 8s

Figma's help centre says the small nudge (arrow keys) is 1 by default, and the big nudge (Shift + arrow keys) is 10. Change the big nudge to 8:

1. Open the Actions menu with Command K (Mac) or Control K (Windows).
2. Search for Nudge amount.
3. Set Big nudge to 8, and leave Small nudge at 1.

Now Shift + arrow moves things exactly one step on your scale.

Add a layout guide

Figma renamed layout grids to layout guides in May 2025. To add one:

1. Select a frame.
2. In the right sidebar's Layout guide section, click Add layout guide. Figma adds a uniform grid by default.
3. Open the layout guide settings and set the grid size to 8.
4. Press Shift G to show or hide layout guides.

You can also add a Columns layout guide set to Stretch, with a margin of 16, so you can see your screen margins.

Use your scale in auto layout

When you set padding and gaps in auto layout frames, type only values from your scale: 4, 8, 16, 24, 32, 48. In lesson 6.5, you'll turn these values into variables, so you choose them from a list instead of typing them.

About the steps in this lesson. The Figma steps were checked against Figma's help centre in September 2026. Figma changes its interface often. If a step doesn't match your screen, search help.figma.com for nudge, layout guides or actions menu.

A worked example: fixing a product card

Before:

• Padding: 15 on top, 12 on the sides, 18 at the bottom
• Image to title: 10
• Title to price: 9
• Price to Add to cart button: 11

Every gap is almost the same, so nothing groups together, and nothing lines up with the next card.

After:

• Padding: 16 on all sides
• Image to title: 16
• Title to price: 4, because they're closely related
• Price to button: 16, a clear break before the action

The title and price now read as one unit. The button clearly stands apart. And every card in the list matches.

Common mistakes

The short version

• Spacing groups things, shows relationships, creates rhythm and adds emphasis. Space inside a group is smaller than space between groups.
• Material Design 3's spacing is on an 8 dp scale (space100 = 8 dp). Multiples of 8 become whole pixels at Android's common densities.
• "Used properly": mostly multiples of 8, with 4 and 2 for tight internal spacing. Pick from a scale.
• Material: padding inside, gap between, margin outside. Padding and gaps before margins. Compact screen margins: 16 dp.
• In Figma: set big nudge to 8, add an 8 layout guide (Shift G to toggle), and use only scale values in auto layout.

Try it yourself

1. Take a screenshot of a real Nigerian app screen. Mark every gap you can see, and estimate its size. Circle any places where groups aren't clear.
2. Write down your spacing scale for your project, using the table in this lesson as a starting point.
3. In Figma, set your big nudge to 8, and add an 8 uniform layout guide to your main screen from Module 5.
4. Rebuild that screen so that every padding, gap and margin is a value from your scale.
5. Check every group: is the space inside each group smaller than the space between groups?
6. Show the before and after to two people without explaining what changed. Ask which looks more trustworthy, and why.

You'll know you've got it when every spacing value on your screen comes from your scale, and someone could tell which things belong together without reading a word.