3. Responsivity and Auto Layout

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.

How to use Auto Layout

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

Adding absolute positioning on Auto Layout

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