https://uxplanet.org/figmas-brand-new-auto-layout-feature-nov-2020-a-responsive-design-heaven-d1ebc9b597f5
The original Figma auto layout was released in 2019. Already a nice feature but to be honest, I did not use it too much in my everyday work except on the obvious button or main menu. My main reason was that it went a bit crazy with responsive constraints which I use a lot. Now, this has changed for sure with the latest release in November 2020.
So to recap, auto-layout basically it lets you create dynamic frames that react and resize according to their content. I am sure you have seen the classic button example. Create a frame, add content and convert the frame into an auto-layout (either via the right hand-properties panel or press Shift +A ). The auto-layout frame will now adapt to changing content. Auto-layout can be nested vertically and horizontally to create refined components and even whole pages.
The whole auto-layout menu was re-designed and became just so much more powerful, especially as you can combine the new features into endless possibilities in combination with constraints (which is called resizing in auto-layout frames). Let me run you through the changes. You can download Figma’s official auto-layout playground file here. I highly recommend it!
You can now adjust the padding either equally for all or individually for the left, right, top and bottom. Really nice detail!
Individual Padding
💡 A little trick: You can also type the values as you would in CSS, separated by commas, e.g. 10, 25, 15, 20 (top right bottom left padding) or 10, 20 (top/boom, left/right). Much faster!
Objects can be aligned horizontally or vertically as in the previous version. However, a very nice add on is that you can now also align children of an auto-layout frame within the frame with the new alignment tool. The great thing is that they keep their set padding. This is basically the slow death of the alignment tool as we knew it (still there at the very top of your right-hand properties panel).
align
Hidden below the individual padding, you find distribution. This one takes a second to get your head around, especially as you can mix and match so much here. Distribution basically lets you choose how to align child objects within an auto-layout frame.
Packed → define the space between them yourself
Space between → automatically defines the space distributing them evenly.
Resizing defines how an object behaves when the parent frame or content changes size. If you used constraints before this sounds familiar, however now auto-layout and constraints (called resizing in an auto-layout frame) go hand in hand, which is a real game-changer.
There are three options and you can mix and match them for height and width with one another!