Stacks

A stack is a layout container. Instead of positioning each element by hand, you put elements into a stack and it lines them up for you in a row or a column, with even spacing and consistent alignment. Think of a button with an icon and a label, a row of logos, a list of bullet points, or a stat with its caption.

Stacks work like auto layout in design tools and like flexbox in CSS. The stack decides where each child sits, so you no longer align elements by hand.

#Creating a Stack

Select two or more elements in the same block and press CTRLL, or click "Stack" in the floating toolbar. You can also stack a single element, which is handy when you want to give it padding and a background as one unit.

The new stack takes the place of the selected elements, starting at their top-left corner. Children are ordered top to bottom, the way they were on the canvas.

To add an element to an existing stack, select the stack (or any element inside it) and add a new element - it goes into the stack instead of the block. You can also drag elements into, out of, and between stacks in the layers list.

#Layout Controls

With a stack selected, the "Layout & Size" group shows:

• "Content Direction" - "Row" places children side by side, "Column" places them one under another.
• "Content Gap" - the space between children, in pixels.
• "Content Position" - how children align inside the stack, both along the direction and across it.

To change the order of children, drag them in the layers list.

Children can still be moved inside a stack. X/Y on a stack child is an offset from its place in the stack, applied as a transform: the element shifts, but its neighbors stay where they are. Use it for small optical nudges without breaking the layout.

#Styling and Animating

A stack is an element like any other. Move, scale, and rotate it on each pane, give it a fill, border, corner radius, padding, and shadow, and apply an entrance animation - everything inside moves and animates together. Fill plus padding plus a large corner radius turns a stack into a pill or button with its content always centered.

#Unstacking

Select a stack and press CTRLL again, or click "Unstack" in the toolbar. Children go back to being free elements in the block, exactly where they appeared inside the stack. A stack left with a single child after you remove the others unstacks automatically.

#Limits

• Stacks can't be nested - a stack can't contain another stack or a group. A stack can go inside a group, though.
• Background images and background videos can't go into a stack.

Want elements to move and animate together but keep their own positions, without any layout? Use a group instead.

#Next

• Groups - move and animate elements together without a layout
• Elements Overview - shared controls and sizing
• Working With Blocks - the containers stacks live in
• Keyboard Shortcuts - every shortcut in one place