When I was browsing the slides of auto layout (yeah, just exactly in Figma), I suddenly realized that people hardly requires very odd and complex layouts. Most layouts can be broke into smaller and basic layouts, i.e. layout primitives. Then I searched the term with Google. Guess what did I found? I found three interesting things that I can review later.
- Evergreen: a React UI framework. It seems very consistent, neat and clean. I’m gonna have a try.
- Pylon: To be honest this is not the first time I check it. It’s a mock up HTMl framework of SwiftUI.
- Every Layout: A set of e-Book that illustrates common layouts with respect to CSS. By the way, I like the minimalism design of this site.
OK, let’s get back to the topic. What’s Figma’s Auto Layout? In a programmer’s view, it’s a set of design tool that matches with CSS’s flex with flex-gap. It’s very easy and straightforward. I bet my dad can understand this in 5 minutes. But the most important thing is that this will be an end as they said in their developer blog.
In my opinion, the hardest part of introducing abstraction into a design tool is how you make the concepts be operated coherently and fluently rather than pursuing the completeness or the novelty of the concept.
The current auto layout in Sketch is a good counterexample. Most designers I know hardly know how to make good use of them because it acts counter-intuitively at most time. Figma did a good start. I guess Sketch will catch up later but maybe after a long period because they just announced that their focus in 2020 is collaboration.