Spacing between items in Figma - Deep Dive

Overview - Spacing between items

What is it?

Spacing between items in Figma means the empty space or gap you leave between objects like shapes, text, or images. It helps keep designs clean and easy to read by separating elements visually. You can control spacing manually or use Figma’s built-in tools to set consistent gaps automatically. This makes your design look balanced and professional.

Why it matters

Without proper spacing, designs can look cluttered and confusing, making it hard for users to focus or understand the content. Good spacing guides the eye naturally and improves user experience. In business intelligence dashboards, clear spacing helps viewers quickly find insights without feeling overwhelmed. It saves time and reduces mistakes in interpreting data.

Where it fits

Before learning spacing, you should know how to select and move objects in Figma. After mastering spacing, you can learn about alignment, grids, and layout systems to create even more organized designs.

Mental Model

Core Idea

Spacing between items is the invisible breathing room that makes designs clear and easy to understand.

Think of it like...

Spacing between items is like the space between books on a shelf; too close and it’s hard to pick one out, too far and the shelf looks empty and messy.

┌───────────────┐
│ Item 1       │
├───────────────┤
│   ← gap →    │
├───────────────┤
│ Item 2       │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is spacing between items

Concept: Introduce the basic idea of spacing as the gap between objects in a design.

In Figma, when you place two shapes or text boxes next to each other, the empty area between them is called spacing. You can see it as the distance that separates these items so they don’t touch or overlap.

Result

You understand that spacing is a visual gap that helps separate items.

Understanding spacing as a gap helps you see why designs need room to breathe and not feel crowded.

2

Foundation

Manual spacing with move tool

Concept: Learn how to adjust spacing by moving items manually.

Select an object in Figma and drag it away from another object to increase spacing. Use arrow keys for small precise moves. Notice how the gap changes as you move items.

Result

You can create custom spacing by moving items yourself.

Knowing manual spacing lets you control exact gaps but can be slow and inconsistent for many items.

3

Intermediate

Using Auto Layout for spacing

🤔Before reading on: do you think Auto Layout automatically spaces items evenly or does it require manual input? Commit to your answer.

Concept: Auto Layout is a Figma feature that arranges items in a row or column with consistent spacing automatically.

Select multiple items, then click 'Auto Layout'. You can set the spacing value between items, and Figma will keep that gap even if you add or remove items. This saves time and keeps designs neat.

Result

Items stay evenly spaced without manual adjustment.

Using Auto Layout for spacing ensures consistency and speeds up design changes.

4

Intermediate

Adjusting spacing properties in Auto Layout

🤔Before reading on: do you think spacing affects only gaps between items or also padding inside containers? Commit to your answer.

Concept: Auto Layout lets you control spacing between items and padding inside the container separately.

In Auto Layout settings, 'Spacing between items' controls gaps between objects, while 'Padding' adds space inside the container edges. Adjust both to create balanced layouts.

Result

You can fine-tune both gaps between items and space around them.

Knowing the difference between spacing and padding helps create clean, balanced designs.

5

Intermediate

Using constraints to maintain spacing

Concept: Constraints help keep spacing consistent when resizing frames or screens.

Set constraints on items inside a frame to fix their position relative to edges or center. This keeps spacing stable when the frame changes size, useful for responsive designs.

Result

Spacing stays consistent even when resizing frames.

Constraints prevent spacing from breaking during layout changes, improving design flexibility.

6

Advanced

Spacing in nested Auto Layouts

🤔Before reading on: do you think nested Auto Layouts combine spacing automatically or require separate settings? Commit to your answer.

Concept: You can nest Auto Layout frames inside each other, each with its own spacing settings.

Create an Auto Layout frame inside another Auto Layout frame. Each frame controls spacing independently, allowing complex layouts with different gaps in different areas.

Result

You can build multi-level layouts with precise spacing control.

Understanding nested spacing unlocks powerful layout designs that adapt well to content changes.

7

Expert

Spacing impact on performance and collaboration

🤔Before reading on: do you think spacing settings affect only visuals or also file performance and teamwork? Commit to your answer.

Concept: Spacing choices can affect file size, performance, and how easily teams work together.

Too many manual spacing tweaks create many layers and inconsistent layouts, slowing down Figma files and confusing collaborators. Using Auto Layout with consistent spacing improves performance and teamwork by standardizing design rules.

Result

Better file speed and easier collaboration with proper spacing methods.

Knowing spacing’s impact beyond visuals helps create efficient, maintainable design systems.

Under the Hood

Figma calculates spacing by measuring the distance between bounding boxes of objects or frames. When Auto Layout is enabled, it uses spacing values to position items dynamically, adjusting as items resize or change. Constraints lock positions relative to parent frames, preserving spacing during resizing. Internally, Figma treats spacing as numeric values applied in layout algorithms that update in real-time.

Why designed this way?

Figma’s spacing system was designed to balance flexibility and consistency. Manual spacing allows creative freedom, while Auto Layout enforces uniformity for scalable designs. Constraints support responsive layouts. This hybrid approach avoids rigid grids but prevents chaotic designs, meeting diverse user needs.

┌─────────────────────────────┐
│        Parent Frame          │
│ ┌───────────────┐           │
│ │ Item 1        │           │
│ ├───────────────┤ spacing   │
│ │ Item 2        │           │
│ └───────────────┘           │
│                             │
│ Constraints fix positions   │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does increasing spacing always make a design look better? Commit yes or no.

Common Belief: More spacing always improves design clarity and aesthetics.

Reality: Too much spacing can make designs look empty, disconnected, or waste valuable screen space.

Why it matters: Over-spacing can confuse users by breaking visual grouping and reduce the amount of information shown at once.

Quick: Does Auto Layout spacing automatically adjust to content size changes? Commit yes or no.

Common Belief: Auto Layout spacing automatically adapts perfectly to all content size changes without manual tweaks.

Reality: Auto Layout maintains fixed spacing values unless you change them; content resizing may require adjusting spacing or padding manually.

Why it matters: Assuming automatic adjustment can cause overlapping or uneven gaps when content changes.

Quick: Is manual spacing always better than Auto Layout for precise control? Commit yes or no.

Common Belief: Manual spacing is always better because it gives exact control over gaps.

Reality: Manual spacing is slower, inconsistent, and error-prone compared to Auto Layout’s systematic approach.

Why it matters: Relying on manual spacing can cause messy designs and slow down updates, especially in large projects.

Quick: Does setting constraints guarantee spacing stays perfect on all screen sizes? Commit yes or no.

Common Belief: Constraints always keep spacing perfect regardless of screen size or frame changes.

Reality: Constraints help but don’t guarantee perfect spacing on all responsive layouts; sometimes manual adjustments or different layout strategies are needed.

Why it matters: Over-relying on constraints can lead to broken layouts on unusual screen sizes.

Expert Zone

1

Auto Layout spacing values can be fractional, allowing sub-pixel precision that improves visual smoothness on high-resolution screens.

2

Combining padding and spacing strategically can create rhythm and hierarchy in designs, guiding user attention subtly.

3

Nested Auto Layouts can cause unexpected spacing behavior if frame resizing rules conflict; understanding inheritance is key.

When NOT to use

Avoid using manual spacing for complex or frequently changing designs; instead, use Auto Layout and constraints. For highly custom or artistic layouts where strict spacing rules limit creativity, manual placement may be better. For responsive web designs, consider CSS Flexbox or Grid alongside Figma prototypes.

Production Patterns

Design teams use Auto Layout with standardized spacing tokens in design systems to ensure consistency across dashboards and reports. Nested Auto Layouts handle complex component layouts like cards with images and text. Constraints maintain spacing for responsive prototypes viewed on multiple devices.

Connections

CSS Flexbox

Similar layout system that controls spacing and alignment in web design.

Understanding Figma’s Auto Layout spacing helps grasp how Flexbox manages gaps and padding in responsive web pages.

Graphic Design Principles

Spacing relates to the principle of white space or negative space in design.

Knowing spacing in Figma connects to broader design ideas about balance and visual hierarchy.

Urban Planning

Spacing between buildings and roads controls flow and usability, similar to spacing in UI layouts.

Recognizing spacing as a flow and usability tool in cities helps appreciate its role in digital design.

Common Pitfalls

#1 Using manual spacing for many items causing inconsistent gaps.

Wrong approach:

Select each item and drag manually to adjust spacing without Auto Layout.

Correct approach:

Group items and apply Auto Layout with a set spacing value to keep gaps consistent.

Root cause:

Misunderstanding that manual spacing is scalable and consistent for complex layouts.

#2 Confusing padding with spacing and setting wrong values.

Wrong approach:

In Auto Layout, setting large padding expecting it to space items apart.

Correct approach:

Set padding to control space inside container edges and spacing to control gaps between items separately.

Root cause:

Not knowing the difference between padding and spacing properties.

#3 Ignoring constraints leading to broken spacing on resize.

Wrong approach:

Not setting constraints on items inside frames, causing them to move unpredictably when resizing.

Correct approach:

Set constraints to fix item positions relative to frame edges or center to maintain spacing.

Root cause:

Lack of understanding of how constraints preserve layout during resizing.

Key Takeaways

Spacing between items is the invisible gap that makes designs clear and easy to read.

Manual spacing gives control but is slow and inconsistent; Auto Layout automates consistent spacing.

Auto Layout separates spacing between items and padding inside containers for balanced layouts.

Constraints help maintain spacing during resizing but don’t guarantee perfect responsive layouts alone.

Good spacing improves user experience, file performance, and team collaboration in design projects.

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