From Chaos to Order

How Figma’s Auto Layout Can Revolutionize Your Design Projects

It is based on Figma v116.6.3

Cover

Auto layout in Figma is a must-have tool for any designer. It saves hours of work by automatically adjusting the alignment and spacing of design elements. Its functionality is similar to Flexbox in CSS, making it easy to create dynamic, responsive designs.

Adding auto layout to your components takes your design workflow to the next level. It not only saves time but also helps maintain consistency throughout your designs. Developers will also appreciate it, as it makes their job easier and faster. If you haven’t already started using auto layout in Figma, now is the time to start.

How to Make It Work for You in Figma

Step 1: Frame it

Group to Frame

• Say goodbye to Groups. Seriously, they’re so last season. Switch to frames by pressing Shift+A. It’s time to embrace the power of frames and never look back.
• Take a pledge. “I solemnly swear to never group anything again. Frames only, baby!” If you need some extra motivation, read up on the benefits of frames vs groups.
• Convert your mistakes. If you’ve already made the grave mistake of using groups, don’t worry — you can quickly convert them to frames by selecting the “Frame” option from the dropdown menu.
• It’s go time. Hit that Shift+A button and watch the magic happen. Auto layout has been applied, and you’re officially on your way to designing like a pro. Tan-tanaaaaaa!

Add auto layout to frame

Step 2: Understand Height and Width modifier properties

Horizontal & Vertical Resizing

• Fixed: As the name suggests, the size of this frame will be fixed and it will not resize automatically. For example, when designing a button, if we need the size of the icon to be fixed at, say, “18px” and it should not change in any case, then we use the Fixed property.
• Hug Contents: This property is used to make the frame hug/fit the content inside it. For instance, when changing the label of the button from “Contact” to “Follow me at design@haxsh.in”, we need the size of the button to auto-adjust, and Hug Contents helps us to do just that.
• Fill Container: As the name suggests, this property fills the available space in the container. For example, when designing two buttons vertically aligned in a mobile UI, and we need them to fill the total horizontal available space, we use Fill Container.

Button Resizing Properties

Step 3: Flow Direction

Change Flow Direction

Go Vertical or Go Horizontal, there is nothing in between.
You can set direction for your auto layout elements to flow in either of the 2 directions by using these icons here.

Step 4: Auto Layout Alignment

Set Button Alignment

By default, if you haven’t specified a position for your elements, they will be aligned to the left. However, you can easily move elements around by using the box below.

Step 5: There is no room in the button we created.

Let’s create some space! In Auto Layout, there are two ways to add space: Padding and Gap.

Padding is the space inside the container, which we use to adjust the size of elements such as buttons. You can apply padding to all sides of the container, or individually to each side.

Gap, on the other hand, is the space between two elements. For example, if you want to add space between an icon and a label inside a button, you can use gap. The gap is unidirectional, meaning that if you apply it in a horizontal direction, it will only affect the horizontal space between elements. If you apply it with a vertical direction, it will only affect the vertical space. You can also use negative values to make elements overlap each other.

Adding Padding and Gap

Bonus Step:

The Absolute Position in Auto layout. It is the latest addition to auto layout and it eliminates 0.001% reasons that we had for not using auto layout.

Make It Look Like A Button

You’re ready to revolutionize the way you work! Let’s get started 🏎️ 🏁

Absolute Position in Auto Layout. This is the latest addition to Auto Layout and it addresses the remaining 0.001% of reasons why we may have hesitated to use it. With Absolute Position, you have even more flexibility and control over the placement of your elements. You can position an element anywhere you want, without the restrictions of Auto Layout, yet still keep it within the layout container. Give it a try and experience the enhanced design freedom that comes with Absolute Position.

Here are some helpful shortcuts to get you started:

Shift + A: Add Auto Layout
Alt + Shift + A: Remove Auto Layout
Ctrl + Click on the padding field: Add padding to all four sides
Ctrl + Alt + G: Frame the selected element
Ctrl + Shift + G: Remove the frame and Auto Layout, just like ungrouping
Enter: Select the child container
Shift + Enter: Select the parent container

These shortcuts can help you work more efficiently and streamline your design process. Give them a try and see how they can benefit your workflow

That’s it, folks! We’ve covered all the advanced features of Auto Layout. If you want to learn more about Auto Layout or related topics, feel free to reach out to me at design@haxsh.in. I’m always happy to connect and help in any way I can.