Designful Launch editor

Auto Layout API

All Tags /LayoutAPIFrames

Use the EditorCore Auto Layout methods when you need scripting, panel integration, or collaboration replay to share the same behavior.

The /docs/api/managers/auto-layout page includes an interactive direction/baseline/padding/size-mode demo, an existing-children toggle demo that switches one freeform frame into Auto Layout through API buttons or the real Shift + A shortcut, and a side-by-side wrap comparison demo. The wrap comparison keeps one horizontal frame at wrap = false and one at wrap = true with the same fixed width, shared add/remove and width controls keep both examples aligned while you compare layout changes, and a duplicate button exercises duplicateAutoLayoutChild() against the first item in both examples. Grid flow now also has a dedicated page at /docs/api/managers/auto-layout-grid with focused demos for track editing, item placement, and stack ↔ grid conversion.

Preferred Entry Points

  • enableAutoLayout() and disableAutoLayout() turn a frame or group into a managed layout container. Use computeAutoLayoutSuggestionFromSelection() when you need inferred direction, spacing, and padding defaults explicitly. The right panel, context menu, and Shift + A shortcut already do that for you.
  • setAutoLayoutDirection(), setAutoLayoutSpacing(), setAutoLayoutPadding(), setAutoLayoutAlignment(), setAutoLayoutWrap(), and setAutoLayoutSizeMode() update container rules, including frame minSize and maxSize constraints through setAutoLayoutSizeMode().
  • setAutoLayoutItemLayout(), setAutoLayoutItemAbsolute(), setAutoLayoutItemAbsoluteConstraints(), reorderAutoLayoutChild(), and duplicateAutoLayoutChild() update direct children. Item minSize and maxSize constraints are part of the same setAutoLayoutItemLayout() command path.
  • getAutoLayoutPanelState() and applyAutoLayoutPanelChange() use the same command path as the property panel.
  • computeAutoLayoutSuggestionFromSelection() previews inferred direction, spacing, order, and bounds for the current selection. The same suggestion drives right-panel add, context-menu add, and Shift + A.
  • convertSelectionToAutoLayout() wraps the current multi-selection in a new Auto Layout frame using the same heuristics as the keyboard shortcut. setAutoLayoutFromSelection() is an alias for the same shared command path. The wrapper defaults to zero padding so the new frame stays tight to the original selection bounds unless code passes an explicit padding override.
  • applyRemoteAutoLayoutChange() replays remote changes with last-write-wins behavior.

Supported Containers

  • Frames
  • Groups

Groups use the same rules as frames as long as direct children are linked through the group hierarchy.

History and Sync

  • Container and item mutations record history.
  • setAutoLayoutPadding() uses the same normalization as the canvas padding handles, including non-negative clamping and fixed-axis limits so opposite sides cannot exceed the container width or height.
  • Canvas padding drags stream transient layout updates but collapse to one final history entry when the drag ends.
  • Canvas resize handles are only available on axes whose container size mode is fixed. hug and fill axes remain layout-driven and cannot be resized directly from the canvas.
  • relayoutAutoLayoutFrame() refreshes layout without creating a history entry.
  • Interaction resize on a fixed axis uses the same relayout path as API-driven size changes, so fill descendants update immediately.
  • Local broadcastable updates emit autoLayout:changed.
  • Newer remote updates emit autoLayout:collaboration-overwrite after replay.

Restrictions

  • Property-panel style updates on component instances only allow spacing and padding style overrides.
  • Structural changes on instance containers are rejected through applyAutoLayoutPanelChange().

See /docs/api/managers/auto-layout for the complete Auto Layout reference, and /docs/api/managers/auto-layout-grid for Grid-specific demos and API notes. The Grid conversion demo on that page uses the shared convertAutoLayoutFlow() command, so the grid result keeps the wrapped stack geometry instead of applying a separate docs-only track preset.