Auto Layout
Auto Layout automatically arranges and spaces child elements within frames, components, and instances.
Auto Layout automatically arranges and spaces child elements within frames, components, and instances. It helps create responsive designs that adjust automatically as content changes.
Adding Auto Layout
| Icon | Tool | Description |
|---|---|---|
 | Add Auto Layout | Click the Add button with the plus icon to add Auto Layout to frames, components, and instances. |
Flow Direction
Choose how child elements are arranged:
- Wrap Vertical: Arrange items vertically with wrapping to new columns
- Vertical: Arrange items top to bottom in a single column
- Horizontal: Arrange items left to right in a single row
- Wrap Horizontal / Grid: Arrange items horizontally with wrapping to new rows (grid layout)
Resizing
Control how the frame sizes itself:
- Width (W): Toggle between
Hug(sizes to content) andFill(fills available space) - Height (H): Toggle between
Hug(sizes to content) andFill(fills available space)
Alignment
Control how child elements align within the frame using a 3×3 grid. Click any position in the grid to align items. The center position represents center/center alignment. Rows control primary axis alignment, columns control counter axis alignment.
Gap
Controls spacing between child elements. Enter a value to set the gap.
Padding
Control internal spacing around child elements:
| Icon | Tool | Description |
|---|---|---|
 | Horizontal Padding | Sets left and right padding simultaneously |
 | Vertical Padding | Sets top and bottom padding simultaneously |
Clip Content
Checkbox option to hide any child elements that overflow the frame boundaries. Useful for creating clean, contained layouts.