Spacing between items in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants you to improve the readability of a sales dashboard by adjusting the spacing between visual elements.

📊 Data: You have a dashboard layout with charts, tables, and text boxes arranged vertically and horizontally.

🎯 Deliverable: A Figma design file with consistent and appropriate spacing between all dashboard items to enhance clarity and visual balance.

Sample Data

Item	Type	Current Spacing (px)
Sales Chart	Chart	8
Region Table	Table	8
Title Text	Text	4
Filter Dropdown	Control	6
Summary Box	Text	5
Legend	Chart Element	3

1

Step 1: Select all dashboard items that are arranged vertically.

Use Figma's selection tool to click and drag over vertical items or hold Shift and click each item.

Expected Result

All vertical items are selected for spacing adjustment.

2

Step 2: Apply consistent vertical spacing between selected items.

In the right panel, set the vertical spacing to 16px using the 'Tidy Up' feature or manual adjustment.

Expected Result

Vertical spacing between items is uniformly 16 pixels, improving readability.

3

Step 3: Select all dashboard items arranged horizontally.

Use the selection tool to select horizontal items or hold Shift and click each item.

Expected Result

All horizontal items are selected for spacing adjustment.

4

Step 4: Apply consistent horizontal spacing between selected items.

Set horizontal spacing to 24px using the 'Tidy Up' feature or manual adjustment in the right panel.

Expected Result

Horizontal spacing between items is uniformly 24 pixels, creating balanced layout.

5

Step 5: Check spacing around text elements for clarity.

Ensure at least 12px padding around text boxes using the padding settings or by adjusting frames.

Expected Result

Text elements have enough space around them to avoid crowding.

6

Step 6: Preview the dashboard layout in Figma's presentation mode.

Click the 'Present' button to view the dashboard as users will see it.

Expected Result

Dashboard items appear evenly spaced and visually balanced, enhancing user experience.

Final Result

Title Text

↓

Filter Dropdown

↓

Sales Chart

↓

Region Table

↓

Legend

✓Consistent vertical spacing of 16px improves readability between stacked items.

✓Horizontal spacing of 24px creates balanced separation between side-by-side elements.

✓Adequate padding around text prevents visual clutter and enhances clarity.

✓Overall spacing adjustments make the dashboard easier to scan and understand.

Bonus Challenge

Create a Figma component with auto-layout that automatically maintains consistent spacing when new items are added.

Show Hint

Use Figma's Auto Layout feature with defined spacing values and padding to build flexible, reusable dashboard sections.