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.