Figma Auto-Layout is perfect for Front-End Devs turned designers
It behaves exactly like HTML & CSS.
Figma — which has quickly become the interface design tool for much of the product design industry — has changed the game once again with it’s auto-layout feature.
The great thing about the auto-layout is that it enables you to create responsive and consistent designs, quickly. It takes a small amount of getting used to, but once you get the know-how, it supercharges your workflow.
The best thing about it for me is that it behaves in the same way HTML and CSS do. Auto-layout has the characteristics CSS framework flexbox. You decide which direction you’d like it to go (flex-direction, for the devs among you), the padding, margins, and the content justification, namely ‘packed’ and ‘space between’.
This has two key benefits:
- It allows you to create consistent designs.
- It will make design software more accessible for front-end developers.
Using auto layout allows you to create a ‘float’ based design rather than specifying the exact x & y coordinates of a component on a page (this is how most modern interface technologies work). This has the effect of making the design look more consistent, or rather, reducing the likelihood that the whitespace throughout your design is inconsistent, as you predefine contents margin and padding, instead of moving it 8px away from a border for example.
Floating means that the components on a page all exist relative to one another, this means they’re able to react to each other's relative position and allows the design to be responsive. The way that this manifests itself in the code is you tell the device ‘this button exists to the right of this container, with 32px of space between itself, and whatever is above it’. In code it would look something like this:
.button-container{
display: flex;
justify-content: flex-end;
}.button button{
margin-top: 32px;
}
all it is really doing is giving instructions about how a component should react to its environment, rather than saying it’s 300px from the right and 1000px from the top.
The auto-layout will be useful for front-end developers because they will be able to communicate with components in a manner that they’re used to, which is adding padding, margins, widths, alignments, and justifications, instead of manually placing components onto a page in a specific place.
It will serve as a bridge between playing around with code to come up with designs, to design software.
This also works the other way round. Designers who are used to auto-layout will be used to the way flexbox works, and therefore will most likely pick up front-end development more easily, it’s like all things, transferable skills matter.
I would strongly advise any new UI / UX Designers to learn how to use this tool, the sooner the better!
Enjoy!
