Figma updates its auto-layout alignment features. Now you can align your auto-layouts by two methods Packed and Space-between. Let’s see how these alignment options make a difference in auto-layouts.
Then vs Now:
Auto-layout features are being updated by Figma over the course of time. Many designers started using more complex auto-layouts which made Figma rethink auto-layout alignments. Earlier these alignments are connected with the component which restricted components to stretch. In the recent update, these alignment options are connected with containers which enabled the creation of responsive components. To learn about how to make responsive components, read this article.
What’s New?
The new auto-layout alignments are Packed and Space-between. These alignments can be applied to 9 targets. Horizontally, an auto-layout can be aligned by left, center, and right. Vertically, it can be aligned by the top, center, and bottom. So therefore 3*3 variations provide 9 target points for aligning your auto-layouts.
Packed Layouts
As the name suggests, they are packed into the containers. You can align your components in top or center or bottom and left or center or right directions. The frames inside the components are aligned to the container, not with the other frames.
As the above example, you can have center&top, center¢er, center&bottom, right&top, right¢er, and right& bottom. When you resize or “stretch” your component, they tend to move based on the alignment you provide. Remember, these are fixed in width and height. When you make them fill containers, they act differently. To learn about fill containers, read this article.
In a similar way, vertical auto-layouts can also be aligned with 9 variants. When you stretch vertically they act based on the alignment properties they are bound to.
Space Between Layouts
Space between alignments acts like a flex-box. They spread evenly in the container and based on “fix/fill container”. Let’s see the example.
In the above example, the rectangle inside (black rectangles) are given as fixed width and alignment property is set to pace between. Thus, inner rectangles align themselves while resizing by giving space between them and doesn’t change their size.
In the above example, the rectangle inside (black rectangles) is given as fill container and alignment property is set to pace between. Thus, inner rectangles resize themselves to fill the container while resizing.
Earlier, designers try to achieve packed alignment through constraints along with alignment options, and space-between is achieved through layout grids and stretch alignment. Now with this feature, auto-layouts can be aligned and resized easily.
This is the very first attempt of mine to use this feature in Figma and I try to make much more complex components with these awesome features and share them with you. Cheers!!
Reference article from the Figma team.
