Arrange responsive Design Layers

Select two or more Layers to see Align and Distribute in the Inspector. Align lines up the left, horizontal centre, right, top, vertical centre, or bottom edges. Distribute places equal space between the outer Layers and needs at least three.

While you drag, the selection snaps to nearby Layer edges and centres and to Page guides, and a red line shows what it lined up with. Hold Shift to keep the movement to one axis, or Alt to turn snapping off. Arrow keys nudge the selection by 1 px, or 10 px with Shift. Cmd/Ctrl+] and Cmd/Ctrl+[ move a Layer forward or back; add Alt to send it to the front or back.

Constraints describe how a child responds when its parent changes size: pin to an edge, stretch between both edges, stay centred, or scale. Select the child and use Horizontal constraint and Vertical constraint under Responsive layout. Position and size values in the Inspector are relative to the parent Layer.

Choose Add Auto Layout in the Layer section of a Frame or Component, or press Shift+A, to arrange its children. Set horizontal, vertical, wrap, or grid flow; padding; gaps; alignment; and distribution in the Inspector. Select a child to set Fixed, Hug Contents, or Fill Container independently for width and height. Hug Contents measures nested Auto Layout containers. Fill Container divides the available space; when several children fill the same axis, Width weight or Height weight sets their relative shares. Minimum and maximum sizes limit the result. An absolute-position child keeps its own position and does not take a place in the flow. Choose Remove Auto Layout to keep the current positions without the layout rule.

A Grid uses a space-separated Column tracks value. Use 120px for a fixed track, 1fr for one share of the remaining width, or auto for a track sized from its content. For example, 120px 2fr 1fr creates three columns. Row tracks uses the same format; leave it empty for content-sized rows. Select a Grid child to set its column and row spans. Items are placed in Layer order in the first available cells.

Reordering an Auto Layout parent's children in Layers updates the flow. Editing text, changing a nested Hug container, or resizing a parent reflows the affected nested layout. The calculation stops after a fixed number of passes if the dimensions do not settle; the editor then reports that the layout reached its limit.

If a nested layout produces unstable dimensions, Contact support.