A Complete Guide to Figma Auto Layout with real examples and tips and tricks

Auto Layout is a Figma key feature, and it’s easy to learn

In addition to components and components properties, the Figma Auto Layout feature is an important feature of Figma that helps us create more accurate designs and work more efficiently.

I have seen many product designers struggle with this, and I believe this feature is essential, and every designer needs to know it very well. Therefore, I have written this article to explain in the simplest way how it works so that anyone can understand it and use it in the design process.

We’ll review how each feature option works and how you can use it in different components.

What is Auto Layout in Figma?

Auto Layout in Figma is a feature that allows you to automatically resize and reposition objects on their canvas.

What are the benefits of using Auto Layout in Figma?

Auto Layout in Figma is a useful tool to help you quickly position and resize objects on your canvas.

By using Auto Layout, you don’t have to manually adjust the size of each object. It will do it automatically according to your specifications. It saves you time and effort when working with UI Kits, responsive and complex designs.

How do you use Auto Layout in Figma?

Let us see how to use this feature and how it works.

How to add auto layout?

To add auto-layout in Figma, select the objects you want to auto-layout. Then, click the “+” beside the Auto Layout label on the right menu (Properties menu).

You can also use the shortcut Shift + A (Mac and Windows).

horizontal direction and vertical direction

You can click on these buttons to arrange the elements inside the frame vertically or horizontally.

Where can you use it?

  • Align the cards horizontally and vertically.
  • Manage avatar.
  • Organize button groups.
horizontal direction and vertical direction
horizontal direction and vertical direction

distance between objects

Using this option, you can adjust the spacing between elements inside Auto Layout. Keep in mind that you can also set a negative spacing.

Where can you use it?

  • Set the space between the cards.
  • Set the distance between text inside a button and an icon.
  • Set the spacing between rows in a table.
distance between objects
distance between objects

cushion

In this option, you can set different padding for right, left, top and bottom of Auto Layout.

If you want to set specific padding for each side, click the Independent Padding icon. This will open new inputs where you can adjust the padding for a specific side.

alignment

This option will allow you to align items inside Auto Layout. You can set the alignment to:

  • top left
  • top center
  • right top
  • left center
  • Centre Center
  • center-right
  • bottom left
  • bottom center
  • bottom right

This will allow you to organize the items and place them however you want. Please be aware that this option will affect all objects in Auto Layout.

Where can you use it? You can use it to place text on top of an image. For example, if you have an image on a card and you want to put text on it, you can use this option to do so.

auto layout alignment
auto layout alignment

Advanced Auto Layout Options

In addition to the basic Auto Layout, Figma has some advanced options to help you be more precise with your design.

Click on the three dots icon at the top right of the Auto Layout section to open advanced options.

Advanced Auto Layout Options

Vacancy Mode

This option lets you set the spacing between elements. It has two options:

  • middle space: This is the default, and as I mentioned above, you can set the spacing between elements, such as the space between cards.
  • Packaged: It will use all available space and automatically calculate the space between each element. For example, you can use it to calculate the space inside the lower menu bar on mobile.

strokes

In this option, you can set whether the stroke of an element will be inside or outside the box. For example, if you design a button with strokes, you can choose whether it will be inside or outside the frame.

auto layout stroke
strokes

canvas stacking

This lets you change the overlap if two or more elements are on top of each other. There are two options: first on top or last on top. This option is for very specific cases, such as showing multiple avatars in one place.

text baseline alignment

With Text Baseline Alignment, you will be able to set the alignment of an object and text to the baseline of the text or the center of the element. Typically, you use this when you place text and icons near each other and want them to align to the center or bottom.

nested auto layout

You will sometimes need to nest an Auto Layout frame inside another Auto Layout frame to create some advanced objects.

For example, if you want to create a bottom bar for a mobile app and you have four icons with text at the bottom, you’ll need to nest two Auto Layout frames.

First, you should create an auto layout frame for text and icons. They will be one on top of the other.

In addition, you should create an auto layout frame for the menu bar where icons and text frames are arranged horizontally.

Double-click or move the handle to resize the spacing.

You can change the spacing between elements and padding by doing the following:

  • Move the handle between objects.
  • Double-click the handle, and you can type inside the input that opens.
Double-click or move the handle to resize Auto Layout Spacing
Double-click or move the handle to resize the spacing.

More features that support auto layout

absolute position
You sometimes want Auto Layout to ignore an element because it doesn’t need to align with it.

Imagine you have a card that has a tag. The tag is a separate element that has nothing to do with card auto layout. In that case, Auto Layout would not need to affect the tag.

Select the object and click Absolute Position at the top of the right menu. It will ignore auto layout for this element so you can place it wherever you want.

Ignore Auto Layout
If you want to place an element on top of Auto Layout but don’t want to include it inside, simply drag it up with the space bar. This will position the element outside the frame layer.

My personal use of this is to add a note above the Auto Layout frame, but no more.

Ignore Auto Layout
Ignore Auto Layout

resizing horizontally and resizing vertically
These two options affect Auto Layout, and you may have to play with them to set certain values ​​for some elements. You will find them on the right menu when you select Auto Layout Frames.

Here’s what each of these options do:

  • fixed width: Your auto layout frame will have a fixed width. If you add elements that exceed the frame size, they will fall out of frame.
  • Hug Material: The size of the frame will increase as the objects inside. Imagine you have 3 objects inside an auto layout frame. Each object in the frame has a width and height of 100px, so the total size is 300px width and 100px height. If you add another object of the same size, the frame will expand to 400px in width and 100px in height.
  • Fill container: You can fill all the space in the frame with this option, but this option is not available when AutoLayout is applied. If you want to fill a container with the same effect, you should choose it from the advanced options (I explained how to do this above).
resizing horizontally and resizing vertically

Examples of creating some components with Auto Layout

Here’s how you can create some components with Auto Layout. I will show you two components, a button and a card. I will show it in mobile size because it is easier to show in real size, but you can apply it to any platform like web, ipad or tv.

How to make auto layout button in Figma?

  • Create an artboard with 120px width, 48px height, and 8px radius.
  • Create a text layer with the text “Create”.
  • Add a plus icon.
  • Place text and icons inside the artboard.
  • Select the artboard and click “Add Auto Layout”.
  • Add padding of 16px.
  • Set the space between the icon and the test to 8px.

As you change the text, the button will widen, and the spacing between the elements will automatically adjust.

Button with Figma Auto Layout
Button with Figma Auto Layout

How to create nested auto layout cards in Figma?

  • 375px X 285px. make a frame of shape
  • Add an image inside.
  • Create a text layer with 24px and write “Product Title”.
  • Create a 16px text layer and write “Product Description”.
  • Select two layers and create an auto layout.
  • Click on the vertical direction and set the spacing to 4px. set on
  • give it 16px horizontal padding
  • Set width to 375px with fixed horizontal size.
  • Select the two layers of text and set the horizontal size to “Fill container”.
  • Select two frames and create an auto layout. (now you have nested auto layout)
  • Click on the vertical direction and set the spacing to 16px. set on
  • Set the parent frame’s bottom padding to 16px. set on
  • Mark the clip content and set the radius to 16px.
  • Add white color to the card.
  • Set a stroke to 1px.

You now have a card with nested auto layout. The card will automatically resize as you type any text.

Card with nested Figma Auto Layout
card with nested auto layout

for summary

In this guide, I have covered everything you need to know about Auto Layout in Figma.

  • First, I explained what Auto Layout is and why it is useful.
  • Next, we saw how to add Auto Layout and its basic and advanced options.
  • I showed you some tricks, like moving the handle from the interface and some features that support Auto Layout.
  • Finally, I shared some examples of creating some components with Auto Layout.

want to know more? take a look at this article

Leave a Comment