A Guide to Figma Auto Layout in 4 Mins

Learn how Auto Layout can make your life (and the devs’) easier.

If you’re not using Auto Layout, you’re making things harder than they need to be. In this short guide, I’ll cover everything you need to understand about Auto Layout.

Auto layout allows you to make frames dynamically respond to their contents. It allows you to configure layouts and contents automatically based on defined rules, such as spacing, padding, alignment, and stacking direction.

Check out the following example of a website I created:

The right side is how I dissected the page using autolayout into smaller chunks that themselves contain further smaller blocks of elements. These elements can be anything—images, vector graphics, texts, icons, other autolayout frames, whatever you want.

Let’s get to the basics; a parent is a frame (or group, or component) that contains other layers, a child is an object that is contained within a parent layer. If a parent layer has multiple children, the child layers are called siblings.

Width and Height

These are pretty self-explanatory; they define the dimension of the frame. The size properties are used to control how the frames adapt to their children or parents, which are:

• Fixed: Set to a specific value in pixels.
• Fill: Fill its parent’s layer width or height. You can only set a layer to “fill” if it has a parent.
• Hug: Hug its children layers width or height. This will only work if the layer has at least 1 child layer.
• Min & Max Width/Height: Set maximum and minimum values for width/height.

Layout Direction

This is where you set the layout direction. The wrap option “curved arrow” allows you to wrap elements so that there can be more than 1 row.

Alignment

This panel is where you set the alignment of the child layers.

Gap

This is where you set the spacing between siblings. Setting it to “Auto” will equally distribute the child layers across the parent’s width or height.

Padding

This defines the white space between the children and the edges of the parent layer. You can set different values for horizontal and vertical padding, or even for all 4 sides using the right-most icon.

More Settings

• Clip Content: Decide if you want overflowing content to be visible or hidden.
• Strokes: If the child layers have strokes that are “centered” or “outside” positioned, choosing exclude will ignore the stroke width for the children’s width and height and vice versa.
• Canvas Stacking: “First on Top” will order layers from front to bottom and vice versa. This only affects the appearance if either you have negative value for the gaps or the children are components that have overflowing variants (like a dropdown).

• Align text baseline: Decide if you want to align texts based on their line height or the actual baseline of the font. This is a feature that I very rarely use.

Hope this mini guide helped you understand how to use autolayout in your design projects. Comment your thoughts and please do point out anything I might have missed or should consider.

Subscribe to my articles here on Medium and follow me on Instagram and LinkedIn.