Enable Auto Layout

Auto Layout turns a frame or group into a layout container that keeps its children aligned, spaced, and sized from one shared rule set.

Basic Flow

1. Select a frame or group on the canvas.
2. In the right panel, open Auto Layout and toggle Enable Auto Layout. The panel uses the same geometry suggestion path as Shift + A, so freeform frames/groups inherit suggested direction, spacing, and padding defaults when possible.
3. Choose a direction (Horizontal or Vertical).
4. Adjust spacing, padding, alignment, and sizing modes.
5. Use Shift + A to toggle Auto Layout on the current selection, or Ctrl + Shift + A to remove Auto Layout from the current container.

If you select multiple freeform layers and press Shift + A, use Add Auto Layout in the right panel, or choose Add Auto Layout from the context menu, the editor suggests a direction and spacing from the current geometry, creates a new frame around the selection, and enables Auto Layout on that new frame.

If you select a freeform frame or group and press Shift + A or toggle Enable Auto Layout in the right panel, the editor suggests direction and spacing from the current child positions before enabling Auto Layout.

Both flows now route through one shared command path (selection preview + conversion command), so panel actions, shortcuts, and API calls keep the same validation and history behavior.

The /docs/api/managers/auto-layout page includes a dedicated demo for this single-container path. It starts from one freeform frame with existing children, lets you enable or disable Auto Layout through public API buttons, and keeps the real Shift + A shortcut active on the same selected frame.

When Auto Layout is enabled, the frame label shows a direction arrow: → for horizontal flow and ↓ for vertical flow. Freeform frames do not show a left-side layout icon.

Flow Modes

• Use Flow to switch between one-dimensional Stack and two-dimensional Grid layout.
• Grid controls expose column count, row count, per-track mode/value, flow direction, and track alignment in the same property panel.
• Grid item controls expose column/row placement, span, and per-item alignment overrides.
• The focused Grid docs page lives at /docs/api/managers/auto-layout-grid, with dedicated demos for track editing and stack ↔ grid conversion.
• Use Wrap to break stack children into multiple tracks when the main axis runs out of space.
• Vertical wrap remains available as an extension path, but standard wrapped track behavior keeps the same spacing and ordering rules.

Wrapped Tracks

When Wrap is enabled, Auto Layout now treats each row or column as a track instead of only breaking lines.

• Row Gap / Column Gap still control item spacing inside the wrapped layout.
• Track Distribution controls how tracks are placed on the cross axis.
  • Packed keeps tracks tightly packed from the start edge.
  • Space Between spreads tracks across the available cross-axis space.
• Track Gap Mode controls whether wrapped tracks reuse the main gap or use an explicit cross-axis gap.
• Explicit track gaps are deterministic across fixed, hug, and fill layouts.

Overlap Order

Negative spacing is supported for intentional overlap stacks.

• Reverse Flow changes layout order.
• Canvas Stacking changes visible paint order and pointer pick order without changing the frame child list.
• Undo, redo, and history jumps restore the same overlap result.

Alignment and Sizing

• In horizontal stack flow, Align by text baseline aligns mixed text rows consistently.
• Strokes in Layout lets you include stroke width in measurement.
• Main Size and Cross Size control how the container grows or fills.
• Canvas resize handles only appear on axes whose size mode is fixed. hug and fill axes stay content-driven or parent-driven instead of accepting direct resize.
• Fixed-size axes also clamp opposing padding sides so the total padding never exceeds the current container width or height.
• Resizing a container also reflows nested auto layout descendants whenever their resolved size changes.
• The same nested reflow pass runs after undo, redo, and history jumps, so restored layouts settle back to the saved container widths and child sizes.
• Frame-level Min/Max size constraints apply to hug, fixed, and fill sizing and are editable from the Auto Layout panel.
• Direct children also respect min/max constraints, and the same values are editable from Auto Layout Item in the property panel.

Absolute Children

• Absolute children stay inside the frame but do not participate in normal stack flow.
• On the default path, absolute children do not affect parent hug size.
• The optional absolute-in-hug behavior remains an extension path and stays off unless enabled explicitly.

Instance Overrides

Component instances allow container-level spacing overrides only.

• Allowed overrides: spacing, gap, padding, wrapped track spacing fields.
• Structural layout controls stay locked on the instance container.

Fixed-Size Text

• Fixed-size text uses ellipsis by default when content overflows its measured box.
• Auto Layout relayout updates that truncation result as container width changes.