Alignment within Auto Layout in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create clear and user-friendly reports.

📋 Request: Your manager wants you to design a sales dashboard with perfectly aligned charts and text using Auto Layout in Figma.

📊 Data: You have several chart frames and text labels that need to be arranged neatly in a vertical list with consistent spacing and alignment.

🎯 Deliverable: A Figma file with an Auto Layout frame that aligns all charts and labels vertically, with left alignment and equal spacing.

Sample Data

Element	Type	Size (px)	Content
Chart 1	Frame	300x200	Sales by Region
Chart 2	Frame	300x200	Monthly Revenue
Label 1	Text	300x30	Summary
Label 2	Text	300x30	Notes

1

Step 1: Create a new frame in Figma to hold all dashboard elements.

Select the Frame tool (F), draw a frame sized 320x700 px.

Expected Result

A blank frame named 'Dashboard Container' sized 320x700 px.

2

Step 2: Add all chart frames and text labels inside the 'Dashboard Container' frame.

Drag and drop Chart 1, Chart 2, Label 1, and Label 2 into the container frame.

Expected Result

All elements are children of the 'Dashboard Container' frame.

3

Step 3: Apply vertical Auto Layout to the 'Dashboard Container' frame.

Select 'Dashboard Container', click '+' next to Auto Layout in the right panel, set direction to vertical.

Expected Result

Elements stack vertically inside the container with default spacing.

4

Step 4: Set horizontal alignment of all child elements to left within the Auto Layout frame.

In Auto Layout settings, set 'Align horizontal' to 'Left'.

Expected Result

All charts and labels align to the left edge inside the container.

5

Step 5: Adjust spacing between elements to 20 px for consistent gaps.

Set 'Space between items' in Auto Layout to 20 px.

Expected Result

There is a 20 px gap between each chart and label vertically.

6

Step 6: Check that all elements maintain their original width and height.

Ensure 'Resize' options for child elements are set to 'Fixed width' and 'Fixed height'.

Expected Result

Charts remain 300x200 px and labels remain 300x30 px.

7

Step 7: Preview the dashboard layout to confirm neat vertical alignment and spacing.

Use Figma's Present mode or zoom out to view the full container.

Expected Result

Dashboard shows charts and labels stacked vertically, left aligned, with equal spacing.

Final Result

Dashboard Container Frame (320x700 px)
+--------------------------------+
| Chart 1 (300x200)              |
| Sales by Region                |
+--------------------------------+
| (20 px gap)                   |
+--------------------------------+
| Chart 2 (300x200)              |
| Monthly Revenue               |
+--------------------------------+
| (20 px gap)                   |
+--------------------------------+
| Label 1 (300x30)               |
| Summary                      |
+--------------------------------+
| (20 px gap)                   |
+--------------------------------+
| Label 2 (300x30)               |
| Notes                        |
+--------------------------------+

✓Auto Layout makes it easy to keep dashboard elements aligned and spaced evenly.

✓Left alignment ensures all charts and labels start at the same horizontal position.

✓Consistent spacing improves readability and visual balance in the dashboard.

Bonus Challenge

Modify the Auto Layout to center-align all elements horizontally and add padding inside the container frame.

Show Hint

Change 'Align horizontal' to 'Center' and set padding values in the Auto Layout panel.