Stacks (Flexbox)

What Is a Stack?

A Stack is a special type of Group that defines the layout of its child Layers.

How to Stack?

To Stack layers or groups, select them and click the Stack button in Layout panel.

Stacks in the Anima Toolkit Panel

Stack Properties

A Stack has 3 properties:

  1. Direction: Defines if stacking of child Layers is Horizontal or Vertical
  2. Alignment: Can be Top/Center/Bottom/Spread
  3. Spacing: Defines the spacing between each child Layer


Defines if stacking of child Layers is Horizontal or Vertical.

Stacks Direction


Can be Top/Center/Bottom/Spread

Stacks Allignment


Defines the spacing between each child Layer.

Stacks Spacing


When you hide a layer, or override a symbol to ‘none’, the stack will ignore it while rearranging the other layers.

Notice how in the example below, the Body Layer replaces the space of the hidden Subtitle Layer when collpasing is checked in.

Collapsing stacks

Stack Nesting

Stacks can be nested within other Stacks.

Stack Nesting

Symbol Resizing

If you have a single Stack Group as a Symbol, it will resize the Symbol instance for Overrides. This is optional, but default for new Stacks is On.

Resize Symbol Stacks

Negative Spacing

You can use negative values. Main use-case here is overlapping border.

Scrubbing Spacing

Click the spacing label and drag it to the sides for easier use.

Negative Stack Spacing

Stack Examples

Scaling Text Background

Sample Sketch File: Download

Stacks example

Stack Tutorials

Note: Some of these tutorials use an older Anima interface.

Walkthrough Video (29:09) by Pablo Stanley

Sketch Together - Pablo Stanley

Questions? Join our Community