Spacing between items in Figma - Step-by-Step Guide

Introduction

Spacing between items helps you keep your dashboard or report neat and easy to read. It controls the space between charts, tables, or text blocks so everything looks balanced and clear.

When you want to separate charts so they don’t look crowded.

When you add text labels and want consistent gaps between them.

When you create a list of KPIs and want equal space between each number.

When you adjust a group of buttons to look tidy and aligned.

When you prepare a dashboard for different screen sizes and want spacing to stay consistent.

Steps

Step 1: Select the group or frame containing the items

- Layers panel or canvas

The group or frame is highlighted with a blue border

💡 If items are not grouped, select them all by holding Shift and clicking each

Step 2: Click the 'Auto layout' button

- Right sidebar under the 'Design' tab

The selected frame becomes an auto layout frame with default spacing between items

💡 Auto layout controls spacing and alignment automatically

Step 3: Find the 'Spacing between items' input box

- Right sidebar under 'Auto layout' settings

You see a number representing the current space in pixels between each item

💡 This controls the gap between each item inside the frame

Step 4: Type a new number or use the up/down arrows

- 'Spacing between items' input box

The space between each item changes immediately on the canvas

💡 Try small numbers like 8 or 12 for neat spacing

Step 5: Adjust padding if needed

- 'Padding' settings in the same 'Auto layout' section

Space around the entire group changes, making the layout cleaner

💡 Padding adds space inside the frame edges, outside the items

Before vs After

Before

Five buttons inside a frame with no space between them, all touching each other

After

Five buttons inside the same frame with 12 px spacing between each, clearly separated and easier to click

Settings Reference

Spacing between items

📍 Right sidebar > Design tab > Auto layout section

Controls the gap between each item inside an auto layout frame

Default: 10 px

Padding

📍 Right sidebar > Design tab > Auto layout section

Adds space inside the frame edges around all items

Default: 0 px

Common Mistakes

Changing spacing without using auto layout

Items do not move automatically, so spacing looks uneven or manual adjustments are needed

Use auto layout on the frame first, then adjust spacing between items

Setting spacing too large

Items look disconnected and the layout wastes space

Use moderate spacing like 8-16 px for a balanced look

Summary

Spacing between items keeps your dashboard or report tidy and readable.

Use auto layout frames to control spacing easily and consistently.

Adjust spacing and padding in the right sidebar under auto layout settings.

Practice

1. What does the Spacing between items property control in Figma's Auto Layout?

easy

A. The gap between child elements inside an Auto Layout frame

B. The padding inside each child element

C. The border thickness of the Auto Layout frame

D. The color of the background inside the frame

Solution

1. Step 1: Understand Auto Layout frames

   Auto Layout frames arrange child elements automatically in a row or column.

2. Step 2: Identify what spacing controls

   The Spacing between items sets the gap between these child elements, not padding or borders.

3. Final Answer:

   The gap between child elements inside an Auto Layout frame -> Option A

4. Quick Check:

   Spacing between items = gap between children [OK]

Hint: Spacing between items = gap between children inside Auto Layout [OK]

Common Mistakes:

• Confusing spacing with padding inside elements
• Thinking spacing changes border or background
• Mixing spacing with alignment properties

2. Which of the following is the correct way to set spacing between items to 20 pixels in Figma's Auto Layout panel?

easy

A. Type 20 in the 'Spacing between items' input box

B. Set padding to 20 pixels on all sides

C. Change the frame's width to 20 pixels

D. Add a 20 pixel margin to each child element

Solution

1. Step 1: Locate spacing input

   In Auto Layout, the 'Spacing between items' input box controls the gap between children.

2. Step 2: Set spacing value

   Typing 20 sets the gap to 20 pixels exactly.

3. Final Answer:

   Type 20 in the 'Spacing between items' input box -> Option A

4. Quick Check:

   Set spacing by typing value in spacing box [OK]

Hint: Set spacing by typing number in spacing input box [OK]

Common Mistakes:

• Confusing spacing with padding or margin
• Trying to resize frame instead of spacing
• Adding margin to children instead of spacing

3. Given an Auto Layout frame with three child rectangles each 50px wide, and spacing between items set to 10px, what is the total width of the frame if padding is 0?

medium

A. 180 pixels

B. 150 pixels

C. 170 pixels

D. 160 pixels

Solution

1. Step 1: Calculate total width of children

   3 rectangles x 50px each = 150px total width.

2. Step 2: Calculate total spacing between items

   There are 2 gaps between 3 items, each 10px, so 2 x 10px = 20px.

3. Step 3: Add children width and spacing

   Total width = 150px + 20px = 170px.

4. Final Answer:

   170 pixels -> Option C

5. Quick Check:

   3x50 + 2x10 = 170 [OK]

Hint: Total width = sum of children + (count-1)*spacing [OK]

Common Mistakes:

• Counting spacing gaps equal to number of items
• Forgetting to add spacing gaps
• Adding padding when it's zero

4. You set spacing between items to 15px but notice the gaps are still very small. What is the most likely cause?

medium

A. The frame has padding set that overrides spacing

B. The child elements have fixed width smaller than spacing

C. You forgot to enable Auto Layout on the frame

D. The Auto Layout direction is vertical, but you expect horizontal spacing

Solution

1. Step 1: Understand spacing direction

   Spacing between items applies along the Auto Layout direction (horizontal or vertical).

2. Step 2: Check Auto Layout direction

   If direction is vertical, spacing controls vertical gaps, not horizontal.

3. Step 3: Identify mismatch

   If you expect horizontal gaps but direction is vertical, spacing won't affect horizontal gaps.

4. Final Answer:

   The Auto Layout direction is vertical, but you expect horizontal spacing -> Option D

5. Quick Check:

   Spacing follows layout direction [OK]

Hint: Spacing applies along layout direction only [OK]

Common Mistakes:

• Ignoring Auto Layout direction
• Confusing padding with spacing
• Not enabling Auto Layout at all

5. You want to create a dashboard layout with 4 cards in a row, each 200px wide, with 30px spacing between cards and 40px padding inside the frame on left and right. What should be the total width of the Auto Layout frame?

hard

A. 880 pixels

B. 970 pixels

C. 860 pixels

D. 900 pixels

Solution

1. Step 1: Calculate total width of cards

   4 cards x 200px each = 800px total width.

2. Step 2: Calculate total spacing between cards

   There are 3 gaps between 4 cards, each 30px, so 3 x 30px = 90px.

3. Step 3: Calculate total padding

   Padding on left and right = 40px + 40px = 80px.

4. Step 4: Add all widths

   Total width = 800px + 90px + 80px = 970px.

5. Final Answer:

   970 pixels -> Option B

6. Quick Check:

   4x200 + 3x30 + 2x40 = 970 [OK]

Hint: Total width = cards + spacing gaps + left+right padding [OK]

Common Mistakes:

• Counting wrong number of spacing gaps
• Forgetting to add both left and right padding
• Mixing padding with margin