How to design for all screen sizes at once

Defining dynamic layout constraints using Anima

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

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.

One of these bits and pieces that make apps design is called Dynamic Layout. When we design a screen for an app in Sketch or Photoshop, we only design it as one size (for example iPhone 6 screen size) and once we export the assets and hand-off to engineering — it’s up for the engineer to best guess how it should look on other screen sizes and implement it by applying constraints in code or in Xcode’s Interface Builder.

Sketch screens are designed as one screen size

Anima allows designers to import a Sketch file (or create a design from scratch using assets from PS, AI, etc..), and define layout constraints that will make the design look perfect on all screen sizes. There is no magic here (ok maybe a little bit of magic.. 😉) as when exporting to code, Anima translates these into XCode’s native Auto Layout constraints.

Problem:

iPhone 4s users will not be happy 🤔

Solution:

Now let’s dig in into the details of how to define these constraints and how to verify them on multiple screen sizes.

Figure 1

On Figure 1:

1. We pick the element we want to define constraints for.
2. Define the spacing from the top.
3. Define the spacing from the right.
4. We don’t define bottom since the other constraints cover all the case.
5. Define the spacing from the left.

We define the spacing constraints by combining an absolute value in points and a relative value in percent, which gives us a way to specify a dynamic layout. The layout is dynamic since it is changing depending on the screen size.

We now verify the layout by viewing it in different screen sizes:

Finally we can run on different simulators or real iOS devices:

Running your design on iOS Simulator is easy

iOS Simulator is running native code on the right

If you would like to try Anima join our waitlist at www.animaapp.com 👋