Introducing Auto-Layout for Sketch

Responsive designs in Sketch

Anima App's medium blog
Design + Sketch
3 min readDec 28, 2016

--

Update: Export HTML & CSS from Sketch, Adobe XD, and Figma with Anima

Download Auto-layout on our Home Page
Create Responsive and Interactive High-Fidelity Prototypes, All Inside 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.

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 “AnimaPlugin.sketch plugin” to install
  3. For each layer define its constraints
  4. Generate an 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
Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

Updates:

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.

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

--

--