Stack

A Stack is a Frame with its Stack layout enabled.

To create a Stack, click on the Stack tool in the toolbar, then click and drag on the canvas to create the Stack.

You can also create a Stack around any selected layer(s) by right clicking and selecting Add Stack, or by pressing ⌘ + Enter for Mac or Ctrl + Enter for Windows..

You can add a layer to the Stack by dragging it onto the Stack. To re-order the layers in a Stack, click the layer you want to move and drag it to its new position.

Toggling

To enable the stack layout for a selected Frame, click on the Stack heading in the Properties Panel. Click this heading again to disable the stack layout.

When you enable a Frame's stack layout, any existing child layers will be positioned automatically according to the Frame's Stack properties. When you disable a Frame's stack layout, all of the Frame's child layers will remain in their stacked positions.

Property Controls

Direction

A Stack can be in the horizontal or vertical direction. A stack in the horizontal direction will "start" at the left and "end" at the right, while a stack in the vertical direction will start at the top and end at the bottom.

Distribute

A Stack's distribution controls where layers are placed along its main axis: left-to-right for a Stack in the horizontal direction or top-to-bottom in the vertical direction. You might also think about distribution as determining where the Stack puts its empty space.

You can select from six distribute options:

  • Start will distribute layers from the left or top sides, depending on its direction. Empty space will be moved to the end of the Stack.
  • Center will distribute layers at the center of the Stack's main axis. Empty space will be split between the start and end of the Stack.
  • End will distribute layers from the right or bottom sides, depending on its direction. Empty space will be moved to the start of the Stack.
  • Space Between will distribute layers so that an equal amount of empty space exists between each layer in the Stack. The Stack's first layer will touch the start of the Stack and the last layer will touch the end of the Stack.
  • Space Around will distribute layers so that each layer is surrounded by an equal amount of space. The amount of space between layers will be double that of the amount of space between the first and last layers and the edges of the Stack.
  • Space Evenly will distribute layers so that an equal amount of space exists between each layer, as well as between the start of the Stack and the first layer, and between the last layer and the end of the Stack.

Gap

The Gap property controls the amount of space between layers in the Stack. Only Stacks that Distribute from the start, center, or end will display the Gap property.

Align

A Stack's alignment controls where layers are placed along its cross axis: top-to-bottom for a Stack in the horizontal direction or left-to-right in the vertical direction.

Padding

Padding controls the amount of space to insert between the Stack's edges and its content. This space is added before the Stack's calculations for its distribution.

To set separate Padding values for each of the Stack's sides, click on the Padding per Side button.

Fraction Units

When a layer is the child of a Frame with Stack enabled, you can set its dimensional properties (height and width) in Fraction units.

To set a layer's height or width to a Fraction unit, ensure that the layer is the child of a Frame with Stack enabled, then click on the unit dropdown next to the property in the Properties Panel and select Fraction.

Note: Fraction units are an advanced layout feature. You may need to experiment with Fraction units before it clicks.

A Fraction unit defines a dimension as a fraction of how much of the Stack's "fraction space", or empty space along the relevant axis, that the layer should take up.

For example, if a Stack in the horizontal direction had two layers, one with a 2fr width and one with a 3fr width, then the first would take up two fifths of the Stack's available fraction space and the second would take up three fifths.

The eventual size of the layer will be determined three factors:

  1. The Stack's fraction space along the relevant axis
  2. The total number of Fraction units shared between layers in the Stack
  3. The individual layer's number of Fraction units

Calculating Sizes

To calculate a Stack's fraction space along a given axis, begin with the relevant dimension of the Stack, then subtract its relevant paddings, the total size of the stack's gaps (if any), and the relevant sizes of all other layers in the Stack that do not use Fraction units.

To calculate the size of a single Fraction unit in a given dimension, divide the Stack's fraction space in that dimension by the total number of Fraction units used in that dimension by all layers in the Stack.

To calculate the dimension of a layer that uses Fraction units, multiply the size of the Stack's Fraction unit in that dimension by the layer's number of Fraction units in that dimension.