Design EditorDocsUsing the editor
Auto layout
Auto layout stacks a frame's children in a row or a column and keeps the spacing as content changes.
1Direction, gap and padding
Choose Free, Vertical or Horizontal. Gap sets the space between children. Padding takes one to four values like CSS: 16, 16 24, or 8 16 8 16.
2Alignment and distribution
The 3 by 3 grid places children in a corner, an edge or the centre. Distribution is Packed, Space between or Space around.
3Sizing
Width and height are each Fixed, Fill (take the space the parent has) or Hug (shrink to the content). Clip content hides whatever spills out of the frame.
4Building layouts
Nest auto layout frames to build pages: a vertical page frame, horizontal rows inside it, cards inside the rows. Dragging a layer onto a frame in the Layers list moves it inside that frame.