How to Set Alignment in Auto Layout in Figma

In Figma, set alignment in Auto Layout by selecting the frame with Auto Layout enabled, then using the alignment options in the right sidebar under Alignment and padding. Choose horizontal and vertical alignment like Left, Center, or Right to control how child elements align inside the frame.

Syntax

In Figma's Auto Layout, alignment is controlled via the Alignment and padding settings in the right sidebar. You can set:

• Horizontal alignment: Left, Center, Right, or Space Between
• Vertical alignment: Top, Center, Bottom

These settings determine how child elements are positioned inside the Auto Layout frame.

none

Auto Layout Frame {
  Direction: Horizontal or Vertical
  Horizontal Alignment: Left | Center | Right | Space Between
  Vertical Alignment: Top | Center | Bottom
  Padding: Number (px)
}

Example

This example shows how to set a horizontal Auto Layout frame with center alignment for child elements.

none

1. Select a frame or create a new one.
2. Click the '+' next to Auto Layout in the right sidebar to enable it.
3. Set the direction to Horizontal.
4. Under Alignment and padding, set Horizontal alignment to Center and Vertical alignment to Center.
5. Add child elements inside the frame; they will be centered horizontally and vertically.

Output

Child elements inside the Auto Layout frame appear centered horizontally and vertically within the frame.

Common Pitfalls

Common mistakes when setting alignment in Auto Layout include:

• Not enabling Auto Layout on the frame before trying to set alignment.
• Confusing the frame's alignment with the child elements' individual alignment.
• Using conflicting padding and alignment settings that cause unexpected spacing.

Always ensure Auto Layout is active and check both horizontal and vertical alignment settings.

none

/* Wrong: Trying to align children without Auto Layout enabled */
Frame {
  /* No Auto Layout */
  Alignment: Center; /* This has no effect */
}

/* Right: Enable Auto Layout first */
Frame {
  Auto Layout: Enabled;
  Horizontal Alignment: Center;
  Vertical Alignment: Center;
}

Quick Reference

Setting	Options	Description
Direction	Horizontal, Vertical	Sets the layout flow direction of child elements.
Horizontal Alignment	Left, Center, Right, Space Between	Controls horizontal positioning of children inside the frame.
Vertical Alignment	Top, Center, Bottom	Controls vertical positioning of children inside the frame.
Padding	Number (px)	Space between frame edges and child elements.

Key Takeaways

Enable Auto Layout on a frame before setting alignment options.

Use horizontal and vertical alignment settings to control child element positioning.

Check padding settings to avoid unwanted spacing around children.

Alignment options only affect frames with Auto Layout enabled.

Use 'Space Between' for even spacing between child elements horizontally.