Creating Stacks

Flexbox functionality in Sketch!

Or avatar
Written by Or
Updated over a week ago

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.

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

Direction

Defines if stacking of child Layers is Horizontal or Vertical.

Alignment

Can be Top/Center/Bottom/Spread

Spacing

Defines the spacing between each child Layer.

Collapsing

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 collapsing is checked in.

Stack Nesting

 Stacks can be nested within other Stacks.

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.

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.

❗️Please note:

  • Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.


Learn More

Get Started with Anima!

We’re super excited to have you trying it out and hearing your feedback.

Did this answer your question?