Frame layout
Configure how a frame arranges its children using freeform, stack, or grid layout modes.
Layout modes
A frame can use one of four layout modes to control how its children are positioned:
| Mode | Behavior |
|---|---|
| None (Freeform) | Children are placed manually anywhere inside the frame. No automatic arrangement. Default. |
| Horizontal stack | Children are arranged in a single row from left to right. |
| Vertical stack | Children are arranged in a single column from top to bottom. |
| Grid | Children are arranged in rows and columns. See Grid layout. |
Switch between modes using the layout mode selector in the Frame layout section of the right inspector.
Stack layout settings
When a frame uses Horizontal or Vertical stack mode, these settings appear:
Padding
Internal spacing between the frame edges and its children.
- Uniform — a single value applies to all four sides.
- Individual — set top, right, bottom, and left padding separately. Click the padding field corners to expand to individual controls.
Gap
The space between children in the stack direction. Set a single value for consistent spacing between all items. Negative gap values allow items to overlap.
Alignment
Controls how children align on both axes:
- Main axis — along the stack direction (horizontal or vertical): Start, Center, End, or Space between.
- Cross axis — perpendicular to the stack direction: Start, Center, or End.
Wrapping
When Wrap is enabled, children that exceed the frame's dimension on the main axis wrap to a new line (horizontal) or column (vertical). This produces a CSS flex-wrap equivalent.
Children sizing
Each child in a stack frame can use Fill container to expand and take up remaining space. Select a child and switch its W or H sizing mode to Fill to use this. See Dimensions.
Common settings (all modes)
| Setting | What it controls |
|---|---|
| Clip content | Whether children that extend outside the frame boundary are hidden (clipped). |
| Fit to content | Resizes the frame to wrap its children tightly. Equivalent to setting dimensions to Fit content. |
Tips
- Stack layout is equivalent to CSS flexbox. Vertical stack =
flex-direction: column, Horizontal stack =flex-direction: row. - Use Space between alignment on the main axis to evenly distribute children like a nav bar.
- Enable Clip content for frames that should act as scroll containers or viewports.
- Combine padding and gap instead of using invisible spacer layers — this keeps the layer hierarchy clean.