Spacing and measurement tools in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard for your company.

📋 Request: Your manager wants you to ensure all dashboard elements have consistent spacing and alignment for a clean, professional look.

📊 Data: You have a Figma file with various dashboard components like charts, filters, and tables placed on the canvas.

🎯 Deliverable: A polished dashboard design in Figma with consistent spacing and alignment using Figma's spacing and measurement tools.

Sample Data

Component	X Position (px)	Y Position (px)	Width (px)	Height (px)
Sales Chart	40	60	600	300
Region Filter	660	60	200	50
Time Filter	660	120	200	50
Revenue Table	40	380	820	300

1

Step 1: Select the Sales Chart and Region Filter components in Figma.

Use the 'Measure' tool by holding Alt (Option on Mac) and hovering between the two components to see the horizontal spacing.

Expected Result

The horizontal spacing between Sales Chart and Region Filter is 20 pixels.

2

Step 2: Adjust the Region Filter's X position to ensure consistent spacing of 40 pixels from the Sales Chart.

Set Region Filter X position to Sales Chart X position + Sales Chart width + 40 = 40 + 600 + 40 = 680 px.

Expected Result

Region Filter moves to X=680 px, creating consistent 40 px spacing.

3

Step 3: Check vertical spacing between Region Filter and Time Filter using the Measure tool.

Hover between Region Filter bottom edge and Time Filter top edge while holding Alt (Option).

Expected Result

Vertical spacing is 10 pixels.

4

Step 4: Adjust Time Filter's Y position to maintain consistent vertical spacing of 20 pixels below Region Filter.

Set Time Filter Y position to Region Filter Y position + Region Filter height + 20 = 60 + 50 + 20 = 130 px.

Expected Result

Time Filter moves to Y=130 px, spacing is now 20 pixels.

5

Step 5: Verify the alignment of the Revenue Table with the Sales Chart horizontally.

Select both components and check their X positions.

Expected Result

Both Sales Chart and Revenue Table have X position 40 px, aligned vertically.

6

Step 6: Use the Measure tool to check vertical spacing between Sales Chart bottom and Revenue Table top.

Hover between Sales Chart bottom edge and Revenue Table top edge with Alt (Option) key.

Expected Result

Vertical spacing is 20 pixels.

7

Step 7: Adjust Revenue Table Y position to maintain consistent 30 pixels spacing below Sales Chart.

Set Revenue Table Y position to Sales Chart Y position + Sales Chart height + 30 = 60 + 300 + 30 = 390 px.

Expected Result

Revenue Table moves to Y=390 px with 30 px spacing.

8

Step 8: Review all spacing and alignment using Figma's alignment tools and measurement guides.

Use 'Align left' for components in the same column and 'Distribute vertical spacing' for vertical gaps.

Expected Result

All components have consistent spacing and alignment, creating a clean dashboard layout.

Final Result

Sales Chart

↓

Revenue Table

✓Consistent horizontal spacing of 40 pixels improves visual balance.

✓Vertical spacing of 20-30 pixels between components enhances readability.

✓Aligning components on the same X position creates a clean column structure.

✓Using Figma's measurement tools helps maintain precise spacing and alignment.

Bonus Challenge

Create a reusable Figma component with auto-layout that maintains consistent spacing automatically when adding or removing filters.

Show Hint

Use Figma's Auto Layout feature with defined padding and spacing values to automate consistent spacing.