Introducing Auto-Layout for Sketch

Responsive designs in Sketch

Try our now product: Launchpad for Sketch — Publish responsive websites directly from Sketch

Why do we need Auto-Layout?

We need a way to define and see how our design looks on ALL screen sizes, not just iPhone 7.

This great tutorial by Pablo Stanley was created the day of the release

What is Auto-Layout for Sketch?

A Sketch Plugin that integrates seamlessly into Sketch and enables defining and viewing different iPhone/iPad sizes including Portrait/Landscape.

As well as generate an overview of all screen sizes for all artboards at once:

How does one use it?

Download the free plugin: https://animaapp.github.io/Auto-Layout/
Open the .zip and double click “AutoLayoutPlugin.sketchplugin” to install
For each layer define its constraints
Generate overview to make sure your design looks awesome on all screen sizes
Go have a beer with your developer and celebrate all the time you saved back and forthing 🍻

Step 3 — Use simple pins or advanced constraints, it’s up to you!

Step 4 — Generating an overview allows to easily see how it looks on all screen sizes

Download the free Sketch plugin: https://animaapp.github.io/Auto-Layout/

If you want to learn more we had a live video tutorial

Update: Auto-Layout now supports Android and Web

Update 2: Guide: https://animaapp.github.io/docs/v1/guide/

Update 3: Stacks — Flexbox for Sketch

Our mission at Anima is to empower designers to own their design. We are creating a tool for designers 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.

From your friends at Anima App 👋

For discussion feel free to join our Facebook Group