Introducing Auto-Layout for Sketch

Responsive designs in Sketch

Update: Export HTML & CSS from Sketch with Anima ToolKit.
Download Auto-layout on our Home Page
Responsive design with Auto-Layout | Export HTML with Launchpad for Sketch | Animate with Timeline

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.

Defining Auto-Layout is a piece of cake

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

Generated overview of all screen sizes

How does one use it?

  1. Download the free plugin:
  2. Open the .zip and double click “AutoLayoutPlugin.sketchplugin” to install
  3. For each layer define its constraints
  4. Generate overview to make sure your design looks awesome on all screen sizes
  5. 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:

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.
Responsive design with Auto-Layout | Export HTML with Launchpad for Sketch | Animate with Timeline

From your friends at Anima App 👋

For discussion feel free to join our Facebook Group

Like what you read? Give Anima App a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.