Auto Layout automatically positions and sizes child elements within a frame. It's similar to CSS Flexbox and is essential for creating responsive designs.
Enabling Auto Layout
- Select a frame or group
- Press
Shift + Ato add Auto Layout - Or right-click and choose "Add Auto Layout"
- Children are automatically arranged
Direction
- Horizontal - Children arranged left to right
- Vertical - Children arranged top to bottom
- Wrap - Items wrap to next row/column when full
Spacing
- Gap - Space between child elements
- Padding - Space inside the frame edges
- Set individual padding per side (top, right, bottom, left)
Alignment
Control how children are positioned:
- Main Axis - Start, Center, End, Space Between
- Cross Axis - Start, Center, End, Stretch
Child Sizing
- Fixed - Child maintains specific size
- Hug - Child sizes to its content
- Fill - Child expands to fill available space
Resizing Behavior
- Hug Contents - Frame shrinks to fit children
- Fixed Width/Height - Frame maintains set size
- Fill Container - Frame expands in parent
Nested Auto Layout
Create complex layouts by nesting:
- An Auto Layout frame can contain other Auto Layout frames
- Combine horizontal and vertical layouts
- Build grids with nested rows and columns
Common Patterns
- Button - Horizontal with centered text, horizontal padding
- Card - Vertical with image, title, description
- Navigation - Horizontal with space-between alignment
- List - Vertical with consistent gap
Tips
- Use "Hug" for elements that should size to content
- Use "Fill" for elements that should share space equally
- Set fixed minimum widths to prevent items from collapsing
- Auto Layout exports cleanly to CSS Flexbox