The Current State of Adaptive Design

I dream of the day where I design an interface using systematic logic and never again have to push individual objects around different sized artboards. The day I dream of gets nearer and 2016 was an incredible year for adaptive design.

I thought I’d take some time to sample a few popular design tools to compare where they are at with their adaptive layout features.

Why Adaptive Design?

When the original iPhone apps were designed there was one screen size to design for. These days, there are six different iOS screen sizes with two orientations for each. If you want to support multi-tasking on the iPad, you can add four more layouts into the mix for a total of 16 different possible layouts for your view. Designing for Android has always been like this due to the variation of devices.

Developers needed a better way to build adaptive layouts since the process of hard-coding static values for different views wasn’t scalable or practical. Tools like Interface Builder’s Auto Layout in Xcode were developed to help easily program the layout constraints when adapting to different layouts.

This is what adding constraints and editing constraints looks like in Xcode’s Auto Layout

Before I was a designer, I was building responsive design websites and using tools like Auto Layout to build apps. These tools formed a way of thinking in my mind of how designs can use constraints to adapt to their containers. I continue to find that to be a useful mindset when I’m designing and I want access to that same logic in my design tools.

Sketch—Smart Symbol Resizing

Professional Digital Design for Mac

Since Sketch is my main static design tool, I was quite pleased when they added features for adaptive layouts in July 2016. They handled this by adding 3 additional options to the resizing tool over the default behavior of ‘stretching’. The three new options are:

• Pin to corner
  Automatically pins the layer to the nearest corner and does not resize if changes are made.
• Resize object
  Will resize the layer when its parent group is resized. This is optimal when you want the relationship between layers to stay the same, no matter the size, as in creating icons.
• Float in place
  The layer does not resize, but its position’s percentage is maintained.

This solution is good for the designer who might not be familiar with the way tools like Auto Layout or Flexbox work. It simplifies the types of constraints and tries to predict the behavior based on the position of the element within the enclosing element.

Check out this article on how these options work in detail plus some good tips for how to use them by Peter Nowell.

I find this solution works pretty well for simple layouts, like stretching some list items horizontally or resizing a tab bar, but it falls apart when I try to build a completely adaptive interface that can expand and contract in two dimensions.

For example, check out this chat client view. When I scale it horizontally it works great.

This setup works horizontally

But when I scale it vertically, it breaks.

It doesn’t work vertically

I can make changes to my resizing options to make it work vertically if I change all constraints for that behavior, but when I scale that new setup horizontally it still breaks. This is because in many cases I need different constraint properties for different dimensions.

With the current set of options I can’t create a fully adaptive layout using Sketch’s tool. It is a solid introductory step to working with constraints and simplifies the experience for someone new to adaptive design.

What Sketch gets right:

• Simplest of the tools
• Attempts to predict what you intend to do based on elements location
• Associate relationships with any parent element

What Sketch needs to work on:

• Additional manual controls which would unlock predictable complex adaptive layouts

Figma — Constraints

Figma: the collaborative interface design tool.

When I first saw Figma I said, ‘a web-based design tool… ya ok, nope,’ and went back about my professional day using natively built professional applications. My bad.

At some point in the past few months I was inspired to test Figma out. Upon using it for the first time, I thought, ‘oh my, this actually works really well.’ The pivotal step of my realization that Figma is a serious tool is when I tried to build a design that was genuinely complex and it didn’t buckle at all. I actually felt faster and more in control with Figma than I do with Sketch.

One of the ways Figma succeeds is how it handles constraints. The first time I played with its constraints system I got really excited because it was what I had been dreaming of for years. I could control each element’s relationship in both dimensions. At first, the interface looks a lot like how constraints are handed in Auto Layout.

Here’s what Figma’s constraints look like:

The element selected on the left is tied to the left side of the artboard and centered

There are many cases where this system works really well and it feels more mature to me than the Sketch implementation. There are still scenarios where I desire more out of the tool.

For example, I can form my constraints related to the artboard but I can’t create relationships with sister elements. In this example, I’d like to make sure that two rows never move more or less than 8dp away from each other, in Auto Layout I could set that relationship with a static value with a high priority so when the layout resizes that distance is retained. In Figma, I am forced to allow it to scale within the artboard, which will stretch or shrink the 8dp value to something larger or smaller when I adjust parent elements heights.

Scaling the rows changes the padding in between, because I am scaling in relation to the artboard

My other option would be to align the rows to the artboard instead of scaling them.

Aligning the rows doesn’t allow me to let them interact with each other

Neither of these options give me my desired effect. Something else that bothers me is the inability to relate an element to the parent group layer. In a desktop chat window we have two panes: the conversations and the currently selected conversation. I can’t relate the left bubbles to the conversation group in Figma, I can only relate them to the artboard.

There is no way to predict where those bubbles should be positioned in relation to the conversation view when I resize the entire view without using ‘scale’. If I use ‘scale’ the bubbles themselves will scale their width and become distorted which is not ideal.

The left set of bubbles are unable to recognize where they should be positioned in relationship to ‘conversation’ group

Changing the size of the artboard vertically gives us the expected behavior!

Update: There is a way to actually accomplish this in Figma! I was not aware of it, but you can put frames insides of frames. Those sub-frames will act as containers which the enclosing constraints will respond to. Thanks a lot to Anjo Cerdeña for pointing this out. You can see how this works here: https://vimeo.com/146967683

What Figma gets right:

• Advanced constraints which work in many scenarios
• Clear interface, feels like a simplified developer tool

What Figma needs to work on:

• Relationships need to be accessible to parent elements other than the artboard
• Relationships need to be accessible to sister elements
• Priority of conflicting constraints would be nice

Subform — Responsive Design

Subform | A modern tool for digital product designers.

Subform is the newest contender listed here. They come to the game with a somewhat different mentality than the previous tools.

1. Subform doesn’t support traditional graphic design, it’s exclusively about interface design
2. It’s not meant to be a beginner tool, this is a tool designed for professionals

They have built the tool with components and constraints at the core of their layout engine.

Subform ran a successful Kickstarter and has been working towards a launch ever since. I’ve been testing the app and although it is still in development, it really does come about as close to solving adaptive layout as anything I’ve used. That being said, it’s not without a price and it’s not yet perfect.

You probably can’t just jump in and start using Subform at its full potential if you are used to using tools like Sketch and Figma. The design process can be substantially different and Subform has been creating sessions on how to use to the tool. Be prepared to do some research.

Now let’s take a stab at my ‘8dp static padding between rows’ example I tried to pull off in Figma. Subform doesn’t allow direct sister relationships of elements but it does provide other tools to pull it off. By adding vertical margins to the rows I can use the child layout tool on the parent container to group the rows together vertically. Then, because the rows are set to scale to be a percentage of the parent element, the insides of the rows will scale. The margins holding the rows together will stay a static distance apart. Pretty cool, but definitely not immediately intuitive.

No matter what I do, the vertical padding between the rows stays the same

Subform is very promising. Many designers don’t have the experience in development that I do and I wonder how many of them will be willing to learn to operate this tool and how hard it will be for them. Regardless, this feels like a strong direction forward.

What Subform gets right:

• Most robust set of features to create adaptive layouts
• Predictable results from constraints

What Subform needs to work on:

• Not immediately intuitive to newcomers
• Not necessarily a tool for play, designing in Subform works the best when you have clear intentions

Wrap Up

Although there has been so much work done in this space this year, I still don’t feel any of these tools are where they need to be to create fully adaptive designs. If I use Interface Builder to create a layout, I know what will happen to that layout in any situation. Other than Subform, I don’t feel that level of control with these design tools.

I’m surprised at how pleased I am with Sketch’s implementation when I compare them all. It seems very basic but it ends up being really useful in practical applications. If Sketch also allowed advanced features and manual overrides similar to what Figma is doing, I believe I could build completely adaptive layouts in Sketch because of it’s ability to associate the constraints with the parent group.

Update: Now that I have learned I can use frames within frames in Figma to create parent-child relationships, I do believe Figma has a slight advantage over Sketch. Being able to control both dimensions of the constraints allows me most of the control I would need to create fully adaptive designs.

Update May 16th, 2017: Sketch released a major update today to resizing controls. This is now a powerful solution.

Thanks for reading! Please recommend this or share with a friend if you found it useful. If you’d like to talk about this stuff more, hit me up on Twitter @charliedeets. Cheers!