Introduction
Before I begin, let’s be honest: how many of you found Figma’s auto layout difficult? Please let me know in the comments. It took me a bit to get my head around the concept of auto layout. Nevertheless, if you understand the fundamental principle, you’ll think, “Oh god! How did I miss this? This makes my life so much easier!”. Lastly, The best way to master the auto layout is by practising what has been taught to you since practice is the only way to master it.
Get Started:
How to add an Auto layout to an element?
To create an element in an auto layout, select two or more items and click the “+” button in the right side toolbar, as shown in the video. You can also add a coloured background by clicking the fill button.
The Directions
In auto layout, there are two directions: horizontal and vertical. When adding, removing, or rearranging items, utilise the two arrows to indicate whether the arrangement will flow horizontally or vertically. The current functionality only allows for the use of one direction at a time.
Spacing
The auto layout allows you to regulate the spacing between items. Existing items and newly added items will maintain the same spacing value.
Paddings
The auto layout allows you to create horizontal and vertical boundaries using padding. You can also apply padding to each side independently, such as the top, bottom, right, and left. Even when introducing a new element, the padding will remain unaffected.
Alignment and Distribution
You can choose the desired alignment in the “alignment and padding” box (For instance, top and left). The distribution will be “packed” by default, with the given spacing between each item maintained.
You change the distribution to “space between” to make items distribute themselves evenly throughout their horizontal or vertical orientation. Thus, the space between them will update as “auto”. So, it will be dynamic and change as necessary.
Nested Components in auto layout
Nested components mean that you may create an auto layout for an item within an item with an auto layout. Assume you have a card where you need to arrange elements both horizontally and vertically. Remember that the auto layout only works in one direction. You must add an auto layout for the necessary items in the card. Add auto-layout to the card after placing all the items in it. So, the card here is the “parent,” and the items inside the card are the “child.” Commonly known as nested components.
Parent resizing
The right-side toolbar provides a dropdown menu for changing the width and height resizing of the parent frame. In a “hug contents” behaviour, the parent frame will dynamically adjust to fit all its children within its space.
Children Resizing
Change the resizing behaviour for each object’s width and height using the dropdown choices. If “fill container” is selected as the behaviour, the object size is dynamic and will stretch to either end of the parent frame. Especially beneficial for items such as text boxes and photos. They will enlarge to fill the available area.
Setting the behaviour to “fixed width/height” means that the object’s dimensions will remain constant regardless of the size of its parent frame. Especially beneficial for items such as icons and buttons. They will hold the same size despite the available space.
Conclusion
To conclude, like I previously stated, practise whatever you learned today since you can master anything if you practise. I believe you understood the auto layout. Thank you for taking the time to read my blog. Check out my profile for more such blogs. I’ll see you all again in my next blog! Please leave any blog topic recommendations in the comments section till then. Bye! ;)
