Rulers and guides in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst creating a sales dashboard in Figma.

📋 Request: Your manager wants a clean, well-aligned dashboard layout using rulers and guides for precise placement of charts and text.

📊 Data: You have sales data visualizations and text boxes that need to be arranged neatly on the dashboard canvas.

🎯 Deliverable: A Figma dashboard file with rulers enabled and guides placed to align all elements consistently.

Sample Data

Element	Type	Width (px)	Height (px)	Position X (px)	Position Y (px)
Sales Chart	Chart	400	300	50	100
Revenue Text	Text	200	50	500	120
Profit Chart	Chart	400	300	50	450
Region Filter	Dropdown	150	40	500	470

1

Step 1: Enable rulers in Figma to see measurement lines on the canvas.

View menu > Show Rulers

Expected Result

Rulers appear on the top and left edges of the canvas showing pixel measurements.

2

Step 2: Create vertical guides at X=50px and X=500px to align left edges of charts and text.

Click on the top ruler and drag down to X=50px and X=500px positions.

Expected Result

Two vertical guides appear at 50px and 500px positions on the canvas.

3

Step 3: Create horizontal guides at Y=100px, Y=120px, Y=450px, and Y=470px to align top edges of charts and text.

Click on the left ruler and drag right to Y=100px, Y=120px, Y=450px, and Y=470px positions.

Expected Result

Four horizontal guides appear at 100px, 120px, 450px, and 470px positions on the canvas.

4

Step 4: Snap the Sales Chart and Profit Chart to vertical guide at 50px and horizontal guides at 100px and 450px respectively.

Drag charts until their top-left corners snap to guides at (50,100) and (50,450).

Expected Result

Sales Chart positioned at (50,100), Profit Chart positioned at (50,450) aligned perfectly.

5

Step 5: Snap Revenue Text and Region Filter to vertical guide at 500px and horizontal guides at 120px and 470px respectively.

Drag text and dropdown until their top-left corners snap to guides at (500,120) and (500,470).

Expected Result

Revenue Text positioned at (500,120), Region Filter positioned at (500,470) aligned perfectly.

6

Step 6: Check spacing between elements using rulers and guides to ensure consistent gaps.

Use ruler measurements and add additional guides if needed for spacing.

Expected Result

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

Final Result

Dashboard Layout with Guides

|-------------------------------------------------------------|
| Ruler: 0px                                                  |
|  |  Sales Chart (400x300)        | Revenue Text (200x50)    |
|  |  Positioned at (50,100)       | Positioned at (500,120)  |
|-------------------------------------------------------------|
|  |  Profit Chart (400x300)       | Region Filter (150x40)   |
|  |  Positioned at (50,450)       | Positioned at (500,470)  |
|-------------------------------------------------------------|

Vertical guides at 50px and 500px
Horizontal guides at 100px, 120px, 450px, 470px

✓Using rulers and guides helps align dashboard elements precisely.

✓Consistent alignment improves dashboard readability and professionalism.

✓Guides ensure equal spacing and clean layout without guesswork.

Bonus Challenge

Add horizontal and vertical grid guides every 50px to create a grid layout for future dashboard elements.

Show Hint

Use the ruler drag method repeatedly or set up a grid layout in Figma's layout grid settings.