The Basics of Autolayout
These four attributes are the building blocks of autolayout. Before autolayout, designers manually defined the shape and size of components by grouping them together. This caused designers to overlook size inconsistencies that were not caught until development. Autolayout should be seen as a tool to limit the effort needed to consistently create consistent components to avoid development re-work during handoff.
Alignment
Alignment controls what anchor point the children elements will attach to in their container
Gap
This attribute controls the spacing between each child element. It applies a set px margin between each element
Padding
The spacing between the content and the container. This can now be applied as a combination of Top, Right, Bottom, Left just like CSS
Auto Responsiveness on Resizing
This attribute controls how the child’s width or height will adjust when the parent container is resized.
Fixed: the width will be the set value (300)
Hug Contents: the width will shrink wrap to the size of the children’s contents
Fill Container: the children’s container will stretch to the length of their parent, and the children will align to the anchor point based on their alignment value.
How I Use Autolayout
I use a combination of Atomic Design (Atoms, Molecules, Organisms, Templates, Pages) principles, and an understanding in CSS flexbox to use autolayout to group connected elements in order to reduce manual effort when designing figma components.
Breaking Down the UI
I approach designing with autolayout from an Inside-Out perspective, which means I design the lowest elements in the hierarchy and progressively move outward into each container layer.
Identifying Molecules
I break the design into organisms, then identify the molecules in them. How the molecules are spaced and arranged will dictate how you will implement autolayout.
I apply autolayout to the molecules (green boxes), and using the gap feature to apply spacing. I apply padding (orange spaces) which is usually determined by your design system.
Creating Organisms
Components with multiple children elements may require another level of autolayout to become more responsive. You don’t want to over-engineering your figma designs to a point where other designers cannot work in your file, but I find it helpful to use autolayout manage complexity within reason.
Finishing the Template
In this design, it made sense to combine the body content into one group, then create an autolayout around all the components.
I use the autolayouts to clearly identify components to the dev team in my handoff file.