The Power of Auto Layout: Say Goodbye to Manual Adjustments

By Akshay Sen

The Power of Auto Layout: Say Goodbye to Manual Adjustments1

It is now easier to design responsive components. With this fantastic and key tool known as Auto Layout, designing with Figma becomes even more interesting and remarkable. By automatically altering the position and dimension of objects depending on their relationships to other elements and the size of the screen, it is a constraint-based layout system that makes the process of designing user interfaces more simple. It also reduces the amount of time spent on manual adjustments.

Manual adjustments in design are the act of manually resizing and placing objects on a design artboard. By dragging and resizing design elements like text boxes, photos, buttons, and other UI elements on the artboard, designers may adjust the size, location, and spacing of these items.

Importance of auto layout

Problems of manual adjustment

Five cool properties of auto layout in Figma

#1 Apply auto layout

Auto Layout

In the properties window on the right side, select a frame, then click the + sign to the right of the auto layout. What’s more, you may use the shortcut shift + A.

#2 Packed and space between

Packed and space between

The behavior may be changed from packed to spaced out using the advanced menu. When putting up navigation or nested layouts where you want objects to stay on each side of the frame, for example, you will need this quite a bit.

#3 Padding


You may adjust the padding for the right, left, top, and bottom of the auto layout in this option. Click on the independent padding icon to create separate padding for each side. You’ll be given access to additional inputs where you may change the padding for a particular side.

#4 Absolute positioning

Absolute Pointing

At the top of the right menu, choose the item and then click Absolute Position. This will make this element’s auto layout meaningless, allowing you to position it wherever you choose.

#5 Alignment


You may align your components directly along the horizontal or vertical axis using this property. You may decide whether to arrange them to the top, bottom, center, left, or right.


Auto layout has many different advantages which it has been widely used currently. Some of the advantages are — Auto layout ensures consistency and accessibility in designs while reducing mistakes and saving time. Consequently, to enhance productivity and produce better designs, designers should utilize this powerful feature.

References & further reads

Explore Related Podcasts

SHOW MORE arrow-img
S3-E13 - Thursday Sep 7, 2023
Amplifying Diversity in Design: A Discussion with Jonelle Chandler

In this episode, we are joined by Jonelle Chandler - Partner and Chief Creative Officer at Qualified Digital. A dynamic design leader dedicated to empowering diverse design thinkers and bridging the gender and ethnic gap in tech. She actively mentors through programs like Built By Girls, ADPList, Women in Wireless, Blacks Who Design, and the Invision Design Leadership Forum, excelling in crafting innovative digital experiences by harmonizing business objectives, technology, data, and creativity.

S3-E12 - Thursday Aug 31, 2023
Crafting Immersive Experiences: The Role of Storytelling in CX & UX Design – Hans Forsman

In this episode, we are joined by Hans Forsman, an award-winning Creative Director known for his "can do" attitude and strategic brand expertise. With a remarkable track record, he's transformed goals into unforgettable results, crafting brand stories and cutting-edge campaigns. From Reebok to HBO Now, Hans has left his creative mark across diverse industries.