Stacks

A stack of pancakes is a bunch of pancakes on top of each other. In layout you also often need things “on top of each other” or “next to each other”. That’s where the stack comes in (and the name comes from).

Before we dive in, let’s look at a little show reel of what the stack can do. Don’t worry, we’re going into all these settings later. I just want you to get an idea of what a stack is.

Let’s look at some common things peoples make with stacks.

Stacks are great for almost everything except for tables. If all the rows and columns need to be the same width or height, the stack is almost too flexible and you’re better off with a grid.

For technical people: you likely guessed it but Stack is just Flexbox with an interface on top.

Creation

You can create a new Stack from the Layout menu in the toolbar, or by selecting any Frame and converting it into a Stack using the Layout header in the property panel.

Stack Settings

A stack can be horizontal or vertical, not much to explain here. If you want something grid like, you can nest stack inside other stacks.

The stack has two global types of settings that allow you to express any layout with a set of options:

• The Distribute: Start, Center, End allow you to place the elements inside that stack in every corner, with an optional gap in between.

• The Distribute: Space Between, Space Around, Space Evenly allow you to “spread out” the elements across the stack.

Padding, Margin and Spacing

You can control the padding for the stack itself in total or per side:

If you have Distribute: Start, Center, End enabled, you get a canvas control to adjust the spacing between the elements inside the stack:

If you need margin for a specific element, you can use a frame as a spacer. Just insert a new transparent frame and size it to your liking:

Wrapping

Stack wrapping works like text wrapping. If the elements don't "fit" they wrap to a next line. This is excellent for making responsive layouts.