Stack Layout

With Stacks, you can create anything from buttons that grow or shrink to fit their labels, to entire interfaces with nested layouts that adapt to container size or content.

Stack layouts can grow or shrink based on their contents, and adapt their contents to stay within a fixed size or fill out their container. You can choose the direction of layouts, whether layers within a stack wrap or not, how they fill the available space, how they align, and more.

Although not a 1:1 equivalent of CSS Flexbox, stacks and their sizing options are very similar. We include relevant properties when you copy CSS from stack containers and their contents — both in the Mac app or the web app’s Inspect mode.

Creating a stack

At their most basic level, stacks are frames with layout properties. You can add a stack to empty frames or groups, or create one from one or more layers.

There are a few different ways to create a stack:

• Select a frame or layer and press ⌘L or ⇧S.
• Select a frame, group, or multiple layers and click the Add Stack Layout button in the Layout section of the Inspector.
• Chose Arrange > Stack > Add Stack Layout in the menu bar.
• Open the Command Bar and search for Add Stack Layout.

When you create a stack, we call its topmost frame the container, and everything inside it items.

Setting up your stack

In the Stack section of the Inspector, you’ll find all the options to control how your stack and items within it appear and adapt. Here’s what you can change:

1. Additional stack settings controls whether your stack items’ outside and center borders are part of layout calculations, and also the order of overlapping items.

2. Direction can be vertical or horizontal. The vertical direction arranges layers in a column, and the horizontal direction in a row — great for things like lists or cards.

3. Wrap moves overlfowing content onto a new row or column. Wrap helps layouts adapt naturally as you resize, add, or remove elements.

   • Set the container to a Fixed Width (for horizontal wrap), or Height (for vertical wrap), so the content knows when it has reached its boundary and needs to wrap.

4. Alignment, Cross-axis alignment, and Distribution defines how layers are positioned within a stack.

   • On the vertical axis, you can align items to the Top, Middle or Bottom of a stack.
   • On the horizontal axis, you can align items to the Left, Center or Right of a stack.
   • Alignment and cross-axis alignment swap depending on whether you choose a vertical or horizontal layout.
   • The alignment control includes options to distribute items using: Space Between, Space Evenly, or Space Around.
   • The cross-axis alignment control includes a further option to stretch items to fill either the horizontal or vertical axis, depending on your layout direction.

5. Spacing defines the distance between layers in a stack.

   • If you choose to distribute items using Space Between, Space Evenly, or Spaced Around, the spacing field is non-editable and set to Auto.
   • Stacks can have negative spacing, so their items overlap — useful for things like a row of avatars or cards in a small space. Negative spacing also applies to the cross axis when wrap is on. There’s no limit to negative spacing, but push it far enough and you may see some unusual or undesired results.

6. Padding defines how much space is between the stack edges and its contents.

   • The number of padding fields you see here depends on if you toggle individual padding fields or pair padding values.
   • When you add a stack layout to group or frame that already has layers within it, we’ll use the position of those layers to set initial padding values.
   • Your stack’s sizing options affect padding adjustments — if your stack is set to Fit, the stack will shrink or grow when you change its padding, and if your stack is set to Fixed, your padding change within the stack’s existing dimensions.

7. Toggle individual padding switches between left/top/right/bottom padding fields and horizontal (left-right)/vertical (top-bottom) fields.

8. Pair padding values sets the same padding value for the horizontal and vertical padding fields.

   • When you pair padding values, the vertical padding field shows a placeholder that matches the horizontal field.
   • Typing into the paired vertical field unpairs it from the horizontal field.

Additional stack settings

Open the stack settings panel using the Stack settings button next to the Stack heading in the Inspector. Inside you’ll find:

1. Include borders in layout makes padding and gaps account for outside or centered borders that would otherwise eat into the spacing. The size fields in the Inspector still show a layer’s own size, not the size including borders add to it. Additionally, a relative layer with 100% height won’t visually fill the full height of the stack — it’ll be that minus the border(s).

2. Layering controls the order of overlapping stack items. Choose First on top (the default) or Last on top. This does not affect the order of layers in the Layer List.

Adjusting stack padding on the Canvas

You can also adjust padding on the Canvas by dragging on the handles that appear when you hover over a stack. What happens when you drag a handle depends on your Stack’s settings in the Inspector.

If you have toggled individual padding values, you can drag and set padding for each side’s handle individually. If you have paired horizontal and vertical values, dragging a handle on any side will affect all sides. For unpaired horizontal and vertical values, dragging the top handle will affect the bottom, and dragging the left handle will affect the right (and vice versa).

Sizing options for non-nested stacks

These are stacks that are not inside another stack — but they can be inside frames, groups, or graphics.

You have the following options for a non-nested stack’s height and width:

• Fixed stack takes on the size you set. This applies both when you set the size in the Inspector or when you resize the stack directly on the Canvas.
• Fit stacks automatically shrink or grow to fit their contents. If you resize a stack that was set to Fit, it will switch to Fixed.
• Relative. The stack will resize with its parent frame or group.

Sizing options for nested stacks

By nesting stacks, you can create complex designs that mix directions and adapt to different sizes. Each nested stack has its own layout and sizing settings, giving you full control over item positioning, resizing behavior, and how content fills the available space.

You have the following options for a nested stack’s height and width:

• Fixed nested stacks will take the size you set on the Canvas or in the Inspector.
• Fill nested stacks grow to take all the space available in their parent stack. If there are multiple nested stacks and all are set to Fill, each one will take an equal part of the space available.
• Fit nested stacks shrink or grow to fit their contents.
• Relative nested stacks resize to use a proportion of available space, relative to their percentage size. They behave in the same way as other stack items with relative sizing.

Working with stack items

Stack items are the layers inside a stack: shapes, text, or even nested stacks. You can apply sizing options to these items to control how they resize within the stack.

Sizing options for stack items

There are three sizing options for a stack item’s height or width:

• Fixed stack items will take the size you set on the Canvas or in the Inspector.
• Fill stack items take all the available space in their stack. If there are multiple stack items all set to fill, each takes an equal part of the available space.
• Relative stack items resize to use a proportion of available space (the total stack size minus the total size of any fixed-size items), relative to their percentage size. For example, in a 100-point-wide horizontal stack with a 50-point item, two relative items set to 50% would get 25 points each (50% of the 50 points left after the fixed item).

You cannot set a stack item to Fit, except text layers.

Minimum and maximum sizes

Stack items, and non-nested stacks themselves, can have a minimum and maximum size on each axis without a fixed size. Toggle the Constrain Size button in the Layout section of the Inspector to reveal the min/max height and width fields below the sizing options.

Min/max sizing is only available on an axis that doesn’t already have a fixed size, and only supports absolute values, not percentages.

Turning min/max sizing off clears any values you’d set. If you switch to a sizing option that doesn’t support min/max (like Fixed), the fields hide and the toggle switches off and disables — but we remember your values and reinstate them if you switch back to a compatible sizing option.

For stack items, when a max value constrains an item on the stack’s cross axis, use the alignment options at the top of the Inspector to control how it appears within that constraint. Otherwise, the item follows the stack’s cross-axis alignment.

Additional options for stack items

Stack items have two additional options in the Inspector:

1. Ignore stack layout lets you position an item anywhere you want within a stack. You can also right-click a layer on the Canvas and choose Ignore Stack from the menu, or use the Command Bar. Layers with this setting show in the Layer List.
2. Preserve space when hidden keeps a stack item’s space even when you hide it in the Layer List.

Adding stack items

You can add new items to a stack in different ways:

• Select any layer (including groups, frames, or other stacks), then drag and drop it into the stack.
• Copy any layer, select a stack or any item within it, then paste. The new layer will appear next to the selected item, or at the end if you selected the entire stack.

Resizing stack items

When you resizing or scale stack items, the result will vary depending on the sizing options you’ve set for them and the stack container:

• If the stack container is set to Fit, resizing its items will make the entire stack shrink or grow.
• If the stack container is set to Fixed, items will resize inside the entire stack’s dimensions and other layers may move completely depending on the resizing you apply.

Rearranging stack items

Select the stack item you want to move, then drag it over another to swap their positions. You can only reorder sibling items within the same stack. The order in the Layer List will update to reflect any moves you make.

Removing stack items

Select the item you want to remove and press ⌫. Alternatively, you can drag it outside the stack.

Removing a stack layout

When you remove a stack layout, we preserver its containing frame and all layers within it. In most cases, you’ll find their arrangement and layout remains exactly the same. The only exception to this is if overlapping layers use the “Last on Top” layering order.

You can remove a stack layout in a few different ways:

• Select a stack and press ⌥⌘L or ⌥⇧S.
• Select a stack and click the Remove Stack icon in the Stack section of the Inspector.
• Head to Arrange > Stack > Remove Stack Layout in the menu bar.
• Search for Remove Stack in the Command Bar.