Auto Layout: Introduction

Topics Covered in This Figma Tutorial:

Master the fundamentals of efficient layout management: Using Tidy up for Even Spacing, Auto Layout implementation, Alignment Constraints, dynamic Spacing controls, intuitive Rearranging, and seamlessly Adding Items with Auto Layout functionality.

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master one of Figma's most powerful features: Auto Layout. This intelligent system transforms how you arrange, reorder, resize, and adjust spacing around design elements, creating flexible layouts that adapt dynamically to content changes. By the end of this tutorial, you'll understand why Auto Layout has become indispensable for modern UI design workflows, enabling you to build responsive components that maintain consistent spacing and alignment across different screen sizes and content variations.

Opening the File

1. First, we need to access your Figma file browser. If you're not currently viewing the homescreen, navigate there using one of these methods:

   • In the Desktop app: Click the Home tab (Mac users can alternatively choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and select Back to files.
2. To import your local exercise file, click Import file (this appears as an icon near the top right of your interface).

3. Navigate to Desktop > Class Files > Figma Class and double-click on Hawaii.fig to select it.

   After the file uploads successfully, click Done and double-click on the file thumbnail to open it in the editor.

Zooming into Your Selection (Preference)

Before we dive into Auto Layout, let's optimize your workspace for this exercise. The Hawaii file contains a very tall page design, making precise selection work challenging without proper zoom controls. We'll enable a useful preference that automatically zooms to your selected elements, significantly improving your workflow efficiency.

1. Click the Main menu button and navigate to Preferences. If Keyboard zooms into selection doesn't show a checkmark, click it to enable this time-saving feature.

Using Tidy up for Even Spacing

Now we'll explore Figma's Tidy up feature, which serves as the foundation for Auto Layout. This intelligent tool automatically distributes spacing between selected elements, creating the uniform alignment necessary for Auto Layout to function optimally.

1. Select any object at the top of the page (the specific element doesn't matter for this step).
2. Reset your zoom to 100% by pressing Shift–0.
3. If necessary, scroll until you can clearly see the navigation text at the top of the page.
4. Focus on the navbar elements by clicking on Maui in the navigation bar.
5. While holding Shift, click on the remaining navigation items: Oahu, Kauai, and Big Island. This creates a multi-selection.
6. Zoom to your selection by pressing Shift–2.

7. Notice that Auto Layout doesn't yet appear in the Design panel. This is because the spacing between elements isn't uniform yet. Let's fix this.

   Hover over the selected text elements and click the Tidy Up button that appears at the bottom right of your selection. Note: This button only appears when zoomed in sufficiently. Alternatively, you can access this feature by clicking More options at the top right of the Design panel and choosing Tidy up.

8. With the text still selected, experiment with Figma's dynamic reordering: hover over Oahu and drag the pink dot that appears to reposition Oahu to the right of Kauai.
9. This demonstrates Auto Layout's flexibility, but let's undo this change by pressing Cmd–Z (Mac) or Ctrl–Z (Windows).
10. Now try adjusting spacing dynamically: hover over the space between any text elements and drag the pink line left or right. Notice how all spacing adjusts proportionally (zoom in if the pink lines aren't visible).

11. This showcases another powerful feature, but let's undo this as well by pressing Cmd–Z (Mac) or Ctrl–Z (Windows).

Using Auto Layout

With your elements now evenly spaced, Figma recognizes the potential for Auto Layout and displays the option in the Design panel. This is where the real power of modern layout systems becomes apparent.

1. In the Design panel, locate the Auto layout section and click the Plus (+) button to enable this feature.
2. Under the Auto layout section, hover over the Spacing between items icon and drag left or right to dynamically adjust spacing. Notice how all elements maintain their alignment while spacing changes uniformly.
3. Undo this adjustment by pressing Cmd–Z (Mac) or Ctrl–Z (Windows).

Alignment Constraints

Understanding constraints is crucial for creating layouts that behave predictably. Currently, your navbar expands from left to right when spacing changes, but for most navigation designs, right-anchored expansion provides better visual stability.

1. In the Design panel, locate the Constraints section and click the right constraint anchor as shown below:

   

2. Now test the constraint behavior: in the Design panel under Auto layout, hover over the Spacing between items icon and drag left and right to adjust spacing.

   Observe how the layout now expands from right to left, maintaining the right edge position—this behavior is essential for responsive design systems.

3. For precise control, set a specific spacing value: change the Spacing between items to exactly 30 pixels.

Rearranging & Adding Items with Auto Layout

This final section demonstrates Auto Layout's most impressive capabilities: intelligent reordering and seamless content addition. These features make Auto Layout indispensable for component-based design systems and rapid prototyping workflows.

1. Double-click on Kauai to select the individual text element within the Auto Layout container.

2. Drag Kauai to the left, positioning it between Maui and Oahu.

   Notice how Figma intelligently maintains consistent spacing while allowing flexible reordering—this is Auto Layout's core strength.

3. With Kauai still selected, press the Right Arrow key to move it back to its previous position using keyboard navigation.

4. Press the Left Arrow key to move Kauai forward again, demonstrating precise keyboard-based reordering.

5. Click on Big Island to select it (if the entire Auto Layout group becomes selected, double-click to target just the Big Island text element).

6. Press Cmd–D (Mac) or Ctrl–D (Windows) to duplicate the element, which Auto Layout automatically incorporates with proper spacing.

7. Let's create another copy using a different method: select Oahu.
8. While holding Option (Mac) or Alt (Windows), drag to create a copy and position it between the two Big Island text elements.
9. Transform the rightmost elements into proper navigation items: double-click to edit the text, changing them to Quick Facts and Travel Info respectively.

10. Your completed navigation should now read: Maui, Kauai, Oahu, Big Island, Quick Facts, Travel Info—a fully functional Auto Layout component ready for responsive behavior.