Auto-Layout: Introducing Stacks — Flexbox for Sketch

Stacks changes everything you knew about responsive layout in Sketch

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

Just like Flex Box in CSS, UIStackView in iOS, and FlexboxLayout in Android - Auto-Layout’s with its new Stacks feature is, once again, changing the game.

For the very first time, Sketch app users are able to apply Flexbox technology directly in Sketch, without using CSS.

We believe that making powerful design concepts accessible to designers is key to advance the design ecosystem.

Flexbox has changed the game and although it’s been around a few years, to use it you need to use CSS in a browser and therefore inaccessible to many designers.

Stacks is a very simple and intuitive version of Flexbox while powerful just the same. It enables designers to think and design in terms of Columns, Rows, and Grids — making designs more consistent.

What is a Stack?

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

A Stack Group icon has a special Blue color and an indicator of its Direction.

To Stack layers — select them and click the Stack button in Auto-Layout panel.

💡 Pro Tip:

- Using Stacks leads to Consistency.

- Consistency leads to Clarity.

- Using Stacks leads to Clarity.

A Stack has 3 properties:

• Direction: Defines if stacking of child Layers is Horizontal or Vertical.

Direction

• Alignment: Can be Top/Center/Bottom/Spread

Alignment

• Spacing: Defines the spacing between each child Layer.

Stacks can be nested!

Nested Stacks

Solve this puzzle!

🔍 🔎 9 out of 10 designers get this wrong on the first time! 🔍 🔎

How many Stacks are in this picture:

Scroll down to reveal the answer

The correct answer is 3:

A Stack icon has a special Blue color and an indicator of its Direction.

1. Small Red Horizontal Stack with 2 Inner Items: Stars and Review Count.
2. Middle-sized Blue Vertical Stack with 4 Inner Items: App Name, Author, Category, and Stack Group 1.
3. The Biggest Green Horizontal Stack with 2 Inner Items: App Icon and Stack Group 2.

👊 Some interesting facts regarding Stacks:

• Stacks are a great way to define layout constraints between sibling Layers.
• Adding or removing Layers inside a Stack realigns its child Layers.

• Text Layer can push siblings Layers when expanded. Download

• Dragging and dropping is an easy way to rearrange child Layers.

Walkthrough Video Tutorial by Pablo Stanley

Flex Grid using Stack

☝️ Alan Roy, a prolific member of our beta program, has created a Flex Grid system using Stack.

He wrote a detailed explanation including a 10 minutes video. We highly recommend reading and watching this great tutorial. It’s mind opening.

Responsive Flex Grid in Sketch using AutoLayout and Stacked Groups

Our mission at Anima is to empower designers to own their design. We are creating a workflow that enables designers to define, specify and architect all of the bits and pieces that encompasses User Interface/Experience and in the end automatically generate native code that is 1:1 to the original definition. This allows designers to be independent on other parties of the team such as engineering who sometimes have different priorities than the design team.

Get Anima Plugin (Auto-Layout is now Anima Layout)

Guide & Documentation

Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

From your friends at Anima App 👋

For discussion feel free to join our Facebook Group