Auto Layout
Auto layout positions children automatically within a frame. It supports two modes: flex (horizontal/vertical flow) and grid (rows and columns with track sizing).
Enabling Auto Layout
- Select a frame and press ⇧A (Shift + A) to toggle auto layout on or off
- Select loose nodes (without a parent frame) and press ⇧A to wrap them in a new auto-layout frame
When wrapping a selection, nodes are sorted by visual position: left-to-right for horizontal layout, top-to-bottom for vertical.
Layout Direction
Choose how children are arranged:
- Horizontal — children flow left to right
- Vertical — children flow top to bottom
- Wrap — children wrap to the next row/column when they run out of space
Spacing
Gap
The space between adjacent children. Set a single value that applies between all children.
Padding
The space between the frame edge and its children. Set a uniform value for all sides, or expand to set each side independently (top, right, bottom, left).
Alignment
Justify (main axis)
Controls how children are distributed along the layout direction:
- Start — children pack to the beginning
- Center — children are centered
- End — children pack to the end
- Space between — children spread with equal space between them
Align (cross axis)
Controls how children are positioned perpendicular to the layout direction:
- Start — children align to the start
- Center — children are centered
- End — children align to the end
- Stretch — children stretch to fill the cross axis
Child Sizing
Each child in an auto-layout frame can have its own sizing mode:
- Fixed — uses the child's explicit width/height
- Fill — stretches to fill available space in the parent
- Hug — shrinks to fit the child's content
Drag Reordering
Within an auto-layout frame, drag a child to reorder it among its siblings. A visual insertion indicator shows where the child will be dropped.
Properties Panel
When an auto-layout frame is selected, the Layout section in the properties panel shows all auto-layout controls: direction, gap, padding, justify, and align.
Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|---|---|---|
| Toggle auto layout | ⇧A | Shift + A |
CSS Grid
Grid layout arranges children in rows and columns with explicit track sizing.
Enabling Grid
Select a frame with auto layout enabled and click the grid icon in the layout toolbar to switch from flex to grid.
Track Sizing
Define column and row tracks with three sizing modes:
- fr — fractional unit, divides available space proportionally
- px — fixed pixel size
- auto — sizes to fit content
Example: three columns of 1fr 200px 1fr creates a layout with a fixed center column and flexible sides.
Grid Gaps
Set separate horizontal (column) and vertical (row) gaps between cells.
Child Positioning
Children are placed into grid cells automatically in row order. You can override placement with column/row start and span values in the child's layout properties.
JSX and Tailwind Export
Grid layouts export to JSX with Tailwind classes: grid grid-cols-3, gap-x-4 gap-y-2, col-start-2 row-span-2.
Tips
- Auto layout recomputes immediately after creation, so the selection bounds update right away.
- Nest auto-layout frames for complex responsive layouts (e.g., a vertical frame containing horizontal rows).
- Use "Fill" sizing to make a child take up remaining space, like a flex-grow: 1 in CSS.
- Use grid for dashboard layouts, galleries, and forms — anything with a two-dimensional structure.
- See Drawing Shapes for creating the frames that auto layout applies to.
- See Components for using auto layout within reusable components.