3. Responsivity and Auto Layout
Last updated
Last updated
One of the core benefits of using Frames is their ability to support Figma’s Auto Layout feature. Simply put, Auto Layout is a way that lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.
It enables the creation of dynamic frames that automatically adjust in size to preserve the established layout structure based on the content added. This is especially beneficial for elements like cards containing icons or text, as well as maintaining the layout of these cards within the main frame.
You can add auto layout to a frame or a selection of objects. This includes:
New or empty frames
Frames with existing content
Components and component sets
Groups or other selections of layers and/or objects
There are a few ways to add auto layout to a selection:
Use the keyboard shortcut ⇧ Shift A
In the right panel, click next to Auto layout
Right-click on a frame or object and select Add auto layout
Layout direction - allows your layout to be structured in columns (horizontal) or rows (vertical)
Spacing - controls the spacing between your objects
Padding - determines the whitespace around your objects
Alignment - describes how the children elements are aligned within the parent frame
Resizing - lets you have a dynamic (hug) or fixed width(you can learn more on this video)
Distribution - determines how objects are distributed within the frame
You’ve set up your auto layout, but now you need to place an element outside its boundaries without disrupting the layout. This is where absolute positioning shines!
Absolute positioning is a recent update to auto layout that allows you to you exclude an element from the auto layout settings without needing to remove it from the frame
Once you’ve added the elements to an auto layout frame, just select the ones you want to exclude from the auto layout rules and activate absolute positioning by clicking the button located in the top-right of Figma’s Design panel, just beneath the alignment options.
There's a detailed video around Auto Layout by Figma that you can watch here
