Auto-Layout: Introducing Stacks — Flexbox for Sketch
Stacks changes everything you knew about responsive layout in Sketch
Update: Export HTML & CSS from Sketch with Anima ToolKit.
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.
💡 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.
- Alignment: Can be Top/Center/Bottom/Spread
- Spacing: Defines the spacing between each child Layer.
Stacks can be nested!
Solve this puzzle!
🔍 🔎 9 out of 10 designers get this wrong on the first time! 🔍 🔎
How many Stacks are in this picture:
The correct answer is 3:
- Small Red Horizontal Stack with 2 Inner Items: Stars and Review Count.
- Middle-sized Blue Vertical Stack with 4 Inner Items: App Name, Author, Category, and Stack Group 1.
- 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
He wrote a detailed explanation including a 10 minutes video. We highly recommend reading and watching this great tutorial. It’s mind opening.
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.
Auto-Layout Plugin Download: https://animaapp.github.io/Auto-Layout/
Guide & Documentation: https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html
From your friends at Anima App 👋
For discussion feel free to join our Facebook Group