Auto layout 101: Stop Crying About Your Broken Layouts
What is Auto Layout?
‘Auto layout’ is a feature in figma that allows you to automatically resize & reposition objects on their canvas as their frame resizes.
Auto Layout in Figma allows you to create responsive UI elements that adapt to various screen sizes and orientations.
Auto Layout frame : Parent
Each Item : Child
If you understand this one simple thing👆everything becomes much easier!
Auto Layout Properties
The different properties in Auto Layout are,
Direction : Defines the direction of an auto layout. i.e. Vertical, Horizontal or Wrap. ‘Wrap’ lets element flow onto the new line when they don’t fit in the space you give them.
Space Between Items : Creates empty space between each item in the auto layout. It is packed if you provide specific number & it distributes space (space between) if you choose auto.
Padding : Padding is the space between element’s border and element’s content. You can give Horizontal & Vertical padding or individual padding to all sides.
Strokes: It is Advanced layout property. Has two values Excluded & Included. Excluded- doesn’t consider strokes. Included- consider strokes.
Canvas Stacking: It is Advanced layout property. Has two values First on Top & Last on Top.
Text Baseline Alignment: It is Advanced layout property. Can be enabled if you want items to be aligned by their baseline.
Resizing
When you add auto layout to a frame or component , you can’t add constraints to them, instead you can use the resizing properties.
Parents & Children both have their own resizing properties.
Resizing Properties are,
Fixed : Keeps content’s original size intact regardless of changes to the frame. Any time you manually adjust the frame it’s resizing property automatically changes to Fixed width.
Fill : Relatively maintains content items within the frame size. As you resize the frame, content with fill property will grow or shrink proportionally.
Hug : The frame will hug content inside without leaving any additional space.
(Note: Whenever you change something in Auto layout properties & if it’s not reflecting in your design, check your resizing properties. (i.e. change it to fill from fixed.)
Absolute Positioning
‘Absolute Positioning’ is a feature in figma that allows you to precisely position an object without affecting the layout of other elements within an auto layout frame.
To do this you must add the element you want in an auto layout frame and select this absolute positioning icon as shown in the image below.
It allows you to place an element on the frame wherever you want, without following the rules of auto layout.
Keyboard Shortcuts for Auto Layout
Tips & Tricks for Auto Layout in Figma
Hover & click twice between the items in an auto layout frame to adjust the space between.
Double click on the edge of an auto layout frame to set it’s resizing to hug contents.
Alt + Double click on the edge of an auto layout frame to set it’s resizing to fill container.
Fixed width for Parents and Fill container for the child is most often used combo.
Min/ Max properties for Height & Width
Min/Max Width & Height properties allow you to control the minimum & maximum size of the frame.
If you set a minimum width or height, the frame will never be smaller than that value. If you set a maximum width or height, the frame will never be larger than that value.
You can also set minimum and maximum dimensions for the children of an auto layout frame. This can be useful for ensuring that certain elements in your design never become too small or too large.
Examples of using min/max properties,
Create a button that is always at least 100px wide.
Create a modal dialog that is always at least 300px wide and 200px high.
Create a navigation bar that is always at most 500px wide.
Remember this- If there are any issues in your auto layout frames, do not try to resolve them on the canvas. Look for solution in the Auto layout properties panel.
Auto Layout Examples
Let’s Learn Auto Layout by Examples! It is better to understand the concept by observing someone doing it.
Create a Full width button for a mobile screen
Let’s Understand how to do it using Auto-layout.
First create a Text Layer to set text on the button.
Add an Auto layout frame to the text using ‘Shift + A’ on keyboard & Give it a Fill color.
Padding is Space inside an element, around its content. Margin is Space outside an element.
To give this button 16px margin on both the sides, add another auto layout frame to the button & give it 16 px horizontal padding.
(Note: Generally 16px padding on both sides is a common recommendation for mobile interfaces in both Material Design and Human Interface Guidelines.)
Now, Select the button inside parent auto layout frame and set it’s Resizing property to ‘Fill container’ & here you get a full width button having 16 px margin on both sides using auto layout. Great!
2. Create a List Item using Auto Layout
Here is the second example where I create a List Item using Auto layout.
For an example consider this list item,
To create this,
First get a text layer for title as Style Maven. Then get another text layer for the subtext style.maven@email.com
Select both and give them a Vertical auto layout.
Sounds clear? Now take the icon you want to put beside this Title.
Select the “icon” and vertical auto layout frame we’ve just created. Add both in Horizontal auto layout using Shift + A.
Select the “Unfollow” button and the horizontal auto layout frame, then add both elements in horizontal auto layout using shift + A.
Now give the parent frame a White fill.
Give the parent frame horizontal padding as 16 px & vertical padding as 16px.
Yay! Your List Item is ready.
(Pro tip: Don’t forget to design list headings as component as well.)
From all of thing you’ve read till now you must understand,
Why to use Auto Layout?
It simplifies the process of making design changes or iterations.
It fosters consistency in design by ensuring proper alignment and spacing between UI elements.
It facilitates easy updates and maintenance of designs.
Finally, it’s a time-saving marvel — once you use it, you won’t believe how you managed without it.
Last but not the least, all the things jotted down in my notes are learnt from one of the best resources available on the internet which are following:
Additionally, check out the Figma Auto layout playground by Figma community.
Keep this article saved so you can revise the basics whenever you need.
If you read it till here, You’re a rockstar for being so patient. Thank you!
Originally poste at medium by Shruti Madhuri Patil