Auto Layout: Introduction

Topics covered in this Figma tutorial:

Using Tidy Up for Even Spacing, Using Auto Layout, Alignment Constraints, Spacing, Rearranging, & Adding Items with Auto Layout

Exercise Preview

Exercise Overview

In this exercise, you’ll explore how to arrange, reorder, resize, and adjust the space around or between design elements using Auto Layout.

Opening the File

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class and double–click on Hawaii.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

Zooming Into Your Selection (Preference)

This is a very tall page, so being able to zoom in on a specific area will be extremely helpful. There’s a preference to zoom in to your selection, but it’s off by default. Let’s turn it on.

1. Click the Main menu button and in Preferences, if Keyboard zooms into selection does not have a check next to it, choose it to turn it on.

Using Tidy Up for Even Spacing

1. Select something at top of the page (the exact object doesn’t matter).
2. Zoom to 100% by hitting Shift–0.
3. If needed, scroll a bit so you can see the text in the navbar at the top.
4. Let’s even out the spacing between the text links in the navbar. In the navbar, click on Maui.
5. Hold Shift and click on the other 3 items (Oahu, Kauai, and Big Island).
6. Zoom to the selection by hitting Shift–2.

7. We want to add auto layout, but it does not show up in the Design panel yet. Let’s see how to make it appear.

   Hover over the selected text and click the Tidy Up button that appears at the bottom right of the text selection. You won’t see this button if you’re zoomed out too much. Another way to do this, is at the top right of the Design panel, click More options and choose Tidy up.

8. With the text still selected, hover over Oahu and drag the pink dot that appears to the right, moving Oahu to the right of Kauai.
9. That was cool, but undo that by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).
10. Hover of the space between any of the text and drag the pink line left or right to see all the spaces adjust (if you don’t see the link lines, zoom in).

11. Another great feature, but undo it by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).

Using Auto Layout

Now that the objects are evenly spaced, the Auto layout option now appears in the Design panel on the right.

1. In the Design panel, to the right of Auto layout click the Plus(+) button.
2. In the Design panel, under Auto layout, hover over the Spacing between items icon and drag left and right to change the spacing.
3. Undo that by hitting Cmd–Z (Mac) or Ctrl–Z (Windows).

Alignment Constraints

As you changed the spacing, the navbar grew from left to right. We really want the navbar to be anchored on the right so as changes it would grow from right to left.

1. In the Design panel, under Constraints click the right constraint as shown below:

   

2. In the Design panel, under Auto layout, hover over the Spacing between items icon and drag left and right to change the spacing.

   Notice that it now grows from right to left!

3. Let’s finish this by setting a specific amount of space. Set Spacing between items to 30.

Rearranging & Adding Items with Auto Layout

1. Double–click on Kauai to select the text block.

2. Drag it to the left so it’s between Maui and Oahu.

   Figma is smart enough to keep the same spacing!

3. With Kauai still selected, hit the Right Arrow key to move it back.

4. With Kauai still selected, hit the Left Arrow key to move it again.

5. Click on Big Island to select it. (If the group gets selected, double–click to go into the group and only select Big Island.)

6. Hit Cmd–D (Mac) or Ctrl–D (Windows) to duplicate it.

7. Let’s make one more copy, but a different way. Select Oahu.
8. Hold Option (Mac) or Alt (Windows) and drag a copy between the 2 Big Island pieces of text.
9. Change the last 2 items (on the right side) to Quick Facts and Travel Info by double–clicking on the text until it becomes editable.

10. The nav should now be: Maui, Kauai, Oahu, Big Island, Quick Facts, Travel Info.