Skip to main content

​
What this means

Auto Layout is a way to automatically arrange and size elements based on rules instead of fixed positions. Instead of manually adjusting width, height, and spacing every time content changes, Auto Layout lets the layout respond to:
  • Content size
  • Spacing rules
  • Direction (horizontal or vertical)
In simple terms:
Auto Layout lets your design adapt instead of breaking.

​
Why this matters

Without Auto Layout:
  • Buttons break when text changes
  • Cards stop scaling when content grows
  • Designs feel “fixed” instead of flexible
With Auto Layout:
  • Components resize automatically
  • Spacing stays consistent
  • Designs translate better to code
  • Responsiveness becomes easier
If you are designing:
  • Buttons
  • Cards
  • Lists
  • Navbars
  • Reusable components
You should be using Auto Layout.
1

Select 1 or more layers

Select a layer or element to give Auto-Layout
2

Give Auto-Layout

Press Shift + A or right click and select Auto Layout
3

Choose Direction

In the layout section of the right panel, Choose a direction:
  • Horizontal → items flow side by side
  • Vertical → items stack top to bottom

​
Common Use Cases

  • Auto-resizing buttons
  • Cards that grow with content
  • Navigation bars
  • Content sections that adapt across screens
  • Lists with consistent spacing

​
Common mistakes across tools

  • Using fixed widths when content should drive size
  • Mixing fixed and flexible sizing randomly
  • Using Auto Layout too late instead of from the start