Auto layout
Auto layout is a tool in Figma that enables you to stack elements in your design with equal proportions. To apply auto layout to your design, follow these steps: select all the elements you want to nest together and then press Shift + A. You can make adjustments to your auto layout frame in the auto layout section of on the properties panel on the right side of your Figma canvas.
What you can do with Auto layout (AL)
You can do all kinds of cool things with auto layout. While the limit is your imagination, here are a few standard AL practices to get you started:
<aside> ???? Grouping
</aside>
- Nest elements
To group elements, select all the objects you want to nest together and press Shift + A. Yes, you can nest multiple AL frames into a entirely new AL frames.
- Duplicate objects
To duplicate an object within an AL frame, select the object and press Ctrl + D.
- Remove objects from nest
If you need to remove an object from a nest, select the object you want to remove and either drag it out of the AL frame or press the Delete key on your keyboard.
<aside> ???? Spacing
</aside>
- Equally space items
To evenly space items, select an auto layout (AL) frame and enter a value in the “Vertical [Horizontal] gap between items” input field in the auto layout section in the properties panel.
- Place padding around elements
To include padding around elements, choose an AL frame and specify a value in either the “Horizontal Padding” or “Vertical Padding” input field in on the auto layout section in the properties panel. The former will create left and right padding, while the latter will add top and bottom padding. If you require different left and right padding values, enter them as follows: left padding value, right padding value, e.g., 0,12. This same approach applies to vertical padding.
Horizontal Padding
Vertical Padding
<aside> ↔️ Layout
</aside>
- Stack objects horizontal or vertically
To stack objects either horizontally or vertically, select an auto layout (AL) frame and click the “Vertical Layout” or “Horizontal Layout” icon in the AL section on the properties panel.
- Wrap Objects
This feature automatically repositions an element in an AL frame to a new row when the vertically arranged objects within the frame exceed the fixed width of the frame. This helps maintain the layout’s structure and prevents it from stretching beyond its defined width.
To wrap a frame, select the frame and define its width. To enable wrapping for a frame, select the frame, specify its width, and then click the “Wrap” icon in the auto layout panel.
<aside> ???? Alignment
</aside>
- Packed Alignment
To align the elements with an AL frame, select the frame and click your preferred position on the alignment box in the auto layout panel
- Auto Alignment
This feature automatically adjusts the spacing between elements in an AL frame to ensure they fill the frame whenever it is resized.
It’s particularly useful when designing responsive websites that require frame resizing. To activate this feature, select the frame and enter Auto on the “Vertical [Horizontal] gap between items” input field on the auto layout panel. You’ll notice a change in the alignment box accordingly.
<aside> ???? Resizing
</aside>
- Fixed Dimensions
This feature enables you to set a fixed width and height for an AL frame. After selecting the frame you want to lock to fixed dimensions, click the Horizontal Resizing or Vertical Resizing dropdown and choose “Fixed Width” or “Fixed Height”.
Alternatively, manually inputting values in the Width or Height input field will also automatically apply corresponding fixed dimensions to your AL frame.
- Max and Min Dimensions
This feature is valuable for situations where a frame should not exceed specific size limits, such as when designing a responsive website. When implemented, a frame cannot be resized beyond its set minimum or maximum values. To utilize this feature, select a frame, click the Width or Height dropdown and choose “Add min height…” or “Add max height…” as needed and input your desired value.
- Hug contents
This function adjusts the width and/or height of an AL frame to match the size of the elements it contains. To apply this, select a frame, click the Horizontal Resizing or Vertical Resizing dropdown, and select “Hug contents”.
- Fill Container
This works when an AL frame is nested in another AL frame. As the parent frame is resized, the embedded one adapts its dimensions to match it. To use this feature, select a frame, click the Horizontal Resizing or Vertical Resizing dropdown and choose “Fill container”.
<aside> ☘️ Other AL tweaks that make your work easier
</aside>
There are other advanced auto layout setting that you can use to make your designs look more organised. Learn how to use them:
Heading out…
It’s important to use the automation tools available in Figma, as they make you work faster and more efficiently. Figma has recently added cool new features like Variables, Advanced Prototyping, and Dev Mode, so give them a try. Also, it’s good practice to name your layers while designing, and I’ve got a handy naming system that can help you become a pro at it
Author
<aside> <img src=”https://prod-files-secure.s3.us-west-2.amazonaws.com/8cfb3804-b287-4ed3-bc64-b72b3a51f6ad/1bf13300-fde6-457d-ace8-958813f0e743/LW.png” alt=”https://prod-files-secure.s3.us-west-2.amazonaws.com/8cfb3804-b287-4ed3-bc64-b72b3a51f6ad/1bf13300-fde6-457d-ace8-958813f0e743/LW.png” width=”40px” /> Lami Williams
</aside>
Published
Sept 8th 2023
Last Edited
Sept 10th 2023