How to Set Spacing in Auto Layout in Figma

In Figma, set spacing in Auto Layout by selecting the frame with auto layout and adjusting the Spacing between items value in the right sidebar. This controls the gap between child elements horizontally or vertically depending on the layout direction.

Syntax

To set spacing in Auto Layout, use the Spacing between items property. It accepts a number value representing pixels.

Example parts:

• Auto Layout Frame: The container with auto layout enabled.
• Spacing between items: The pixel value for space between child elements.
• Direction: Horizontal or vertical layout affects spacing direction.

none

Auto Layout Frame {
  direction: horizontal | vertical
  spacingBetweenItems: number (pixels)
}

Example

This example shows a vertical auto layout frame with three text items and 20 pixels spacing between them.

none

Frame (Auto Layout) {
  direction: vertical
  spacingBetweenItems: 20
  children: [
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3")
  ]
}

Output

A vertical stack of three text items with 20 pixels space between each item.

Common Pitfalls

Common mistakes when setting spacing in Auto Layout include:

• Not selecting the Auto Layout frame but a child element, so spacing controls are missing.
• Confusing Padding (space inside frame edges) with Spacing between items (space between children).
• Setting spacing to zero unintentionally, causing items to stick together.

none

/* Wrong: Trying to set spacing on a child element */
Text("Item 1") {
  spacingBetweenItems: 20  /* This does nothing */
}

/* Right: Set spacing on the Auto Layout frame */
AutoLayoutFrame {
  spacingBetweenItems: 20
}

Quick Reference

Property	Description	Example Value
Spacing between items	Space between child elements in pixels	16
Direction	Layout direction: horizontal or vertical	vertical
Padding	Space inside frame edges around children	24
Align items	How children align inside frame	center

Key Takeaways

Set spacing in Auto Layout by adjusting the 'Spacing between items' property on the frame.

Spacing controls the gap between child elements, not the padding inside the frame.

Always select the Auto Layout frame to see and change spacing settings.

Spacing value is in pixels and affects layout direction (horizontal or vertical).

Avoid zero spacing unless you want items tightly packed.