“Auto layout” or “Stack view”?
About a year ago I together with my team in FREE NOW switched from Sketch to Figma. Despite the fact that the transition itself took a lot of time and effort I can definitely say that I am incredibly glad we did it and I can hardly imagine a more convenient tool for interface design than Figma. And over the long 20 years of being a designer, I have managed to work with almost everything, from Corel (and Corel Xara) to Photoshop and Macromedia Flash.
Since moving to Figma, one thing has been bugging me — Auto layout.
To be honest, Auto layout was the main reason for me to switch from Sketch to Figma. Thanks to it now what before took hours, now can be done in a couple of minutes. However, since the beginning of the move (about a year) I’ve been confused by the name of this feature. Why Auto layout?
Those of you who are familiar with iOS development know that Auto Layout as a feature was first introduced by Apple in 2012. That year Apple introduced the iPhone 5 with a new 4-inch screen which was different from the previous model. And to help developers create apps that would work equally well across different screens, they needed a solution to make them responsive. Auto Layout was just that.
Auto Layout in iOS is an incredibly powerful tool, allowing developers to create interfaces that dynamically adjust for different screen sizes. Moreover, and this is very important, all the settings can be made visually in Interface Builder, which is why many designers at one time got a real opportunity to “draw” interfaces for iOS directly in Xcode. In the past I also had to create interfaces directly in Xcode, and the article UIStackView Tutorial for iOS: Introducing Stack Views by Ehab Yosry Amer helped me a lot.
However, as is often the case, the downside of the power of the tool was its complexity. One had to try to spend hours to make the interface work exactly as it should (and not get an error from the debugger that some Constraints were missing).
Despite all the complexity of Auto Layout for a long time Android community was looking at iOS-developers with envy, because they didn’t have anything like that before 2016. Google introduced its analog only at Google I/O in 2016 — ConstraintLayout. Meanwhile, Apple had already taken a big step forward by introducing Stack views in 2015.
For a long time designers had to look with envy at both of them, because even Sketch (which came out in 2010) did not have anything like that and everything had to be aligned “by eye”. The solution came not soon and from the outside in the form of Auto-Layout plugin (approximately in 2016). And only in 2019 it appeared as a built-in feature in Figma.
Auto Layout, ConstraintLayout, Stack views… what’s the difference?