Rulers and guides in Figma - Step-by-Step Guide

Introduction

Rulers and guides help you align and position objects precisely on your design canvas. They make it easier to create neat, organized layouts by showing measurement lines and allowing you to place visual markers.

When you want to align charts or tables evenly on a dashboard.

When you need consistent spacing between visual elements like icons and text.

When designing a report layout that requires exact margins and padding.

When you want to check the size of a visual element quickly.

When you want to snap objects to specific positions for a clean look.

Steps

Step 1: Show rulers

- View menu

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

💡 You can toggle rulers on and off anytime from the View menu

Step 2: Create a guide

- Click and drag from the ruler area onto the canvas

A guide line appears where you release the mouse, either horizontal or vertical depending on the ruler dragged

💡 Drag from the top ruler for horizontal guides and from the left ruler for vertical guides

Step 3: Move a guide

- Select the guide line on the canvas and drag it to a new position

The guide line moves to the new location, updating its position on the ruler

💡 Hold Shift while dragging to move the guide in larger increments

Step 4: Remove a guide

- Drag the guide line back onto the ruler area

The guide disappears from the canvas

💡 You can also right-click a guide and select Delete

Step 5: Snap objects to guides

- Move objects near a guide on the canvas

Objects snap to the guide line for precise alignment

💡 Ensure Snap to Geometry is enabled in the View menu for snapping to work

Before vs After

Before

Canvas shows objects placed roughly with no measurement lines or alignment aids

After

Canvas shows rulers on top and left edges, with guides placed to align objects precisely

Settings Reference

Show Rulers

📍 View menu > Show Rulers

Toggle the visibility of rulers on the canvas edges

Default: Off

Snap to Geometry

📍 View menu > Snap to Geometry

Enable or disable snapping objects to guides and other geometry

Default: On

Guide Color

📍 Preferences > Guides and Grids

Change the color of guides for better visibility

Default: Blue

Common Mistakes

Not enabling rulers before trying to create guides

Guides can only be created by dragging from visible rulers

First enable rulers from the View menu, then drag guides onto the canvas

Trying to snap objects without Snap to Geometry enabled

Objects will not snap to guides if snapping is off

Turn on Snap to Geometry in the View menu to enable snapping

Dragging guides off the canvas instead of back onto the ruler to delete

Guides remain on canvas if not dragged back to ruler area

Drag guides back onto the ruler area or right-click and delete them

Summary

Rulers and guides help you measure and align objects precisely on your canvas.

You create guides by dragging from visible rulers on the top or left edges.

Remember to enable Snap to Geometry to make objects snap to guides for neat layouts.

Practice

1. What is the main purpose of rulers in Figma?

easy

A. To show measurements on the edges of the canvas

B. To create color palettes automatically

C. To add text labels to designs

D. To export designs as images

Solution

1. Step 1: Understand what rulers display

   Rulers show measurements along the top and left edges of the canvas to help with spacing.

2. Step 2: Identify the main function

   They help designers measure and align objects precisely on the canvas.

3. Final Answer:

   To show measurements on the edges of the canvas -> Option A

4. Quick Check:

   Rulers = Measurements [OK]

Hint: Rulers measure edges, guides align inside [OK]

Common Mistakes:

• Confusing rulers with guides
• Thinking rulers create colors
• Assuming rulers export files

2. Which of the following is the correct way to add a guide in Figma?

easy

A. Double-click the canvas edge

B. Click on the canvas and press Ctrl+G

C. Right-click the canvas and select 'Add Guide'

D. Drag from the ruler onto the canvas

Solution

1. Step 1: Recall how guides are created

   Guides are created by dragging from the ruler area onto the canvas.

2. Step 2: Match the correct action

   Dragging from the ruler is the standard method to add guides in Figma.

3. Final Answer:

   Drag from the ruler onto the canvas -> Option D

4. Quick Check:

   Guide creation = Drag from ruler [OK]

Hint: Drag from ruler, not click or shortcut [OK]

Common Mistakes:

• Using keyboard shortcuts incorrectly
• Right-clicking expecting guide options
• Double-clicking edges does nothing

3. If you drag a vertical guide from the left ruler to 150 pixels, where will it appear on the canvas?

medium

A. 150 pixels from the top edge

B. 150 pixels from the left edge

C. 150 pixels from the right edge

D. 150 pixels from the bottom edge

Solution

1. Step 1: Understand ruler orientation

   The left ruler measures horizontal distance from the left edge of the canvas.

2. Step 2: Determine guide position

   A vertical guide dragged from the left ruler at 150 pixels will be 150 pixels from the left edge.

3. Final Answer:

   150 pixels from the left edge -> Option B

4. Quick Check:

   Left ruler = horizontal distance [OK]

Hint: Left ruler measures horizontal distance [OK]

Common Mistakes:

• Confusing vertical guide position with top edge
• Thinking left ruler measures vertical distance
• Assuming right or bottom edges are reference

4. You tried to add a guide by dragging from the ruler, but no guide appeared. What is the most likely reason?

medium

A. Rulers are not visible/enabled

B. You dragged from the canvas, not the ruler

C. The guide color is set to transparent

D. You need to restart Figma

Solution

1. Step 1: Check ruler visibility

   Guides can only be dragged from visible rulers; if rulers are hidden, dragging won't create guides.

2. Step 2: Confirm ruler status

   If rulers are off, dragging from canvas won't add guides, so enabling rulers fixes the issue.

3. Final Answer:

   Rulers are not visible/enabled -> Option A

4. Quick Check:

   Rulers must be visible to add guides [OK]

Hint: Enable rulers before dragging guides [OK]

Common Mistakes:

• Dragging from canvas instead of ruler
• Assuming guide color affects visibility
• Restarting app unnecessarily

5. You want to align three objects evenly between two vertical guides at 100px and 400px. How can you use guides to help?

hard

A. Add guides at 100px, 250px, and 400px but ignore snapping

B. Add one guide at 250px only

C. Add two more guides at 200px and 300px to mark equal spaces

D. Remove all guides and use snapping instead

Solution

1. Step 1: Understand spacing between guides

   The distance between 100px and 400px is 300px; dividing into three equal parts requires two intermediate guides.

2. Step 2: Place guides at equal intervals

   Adding guides at 200px and 300px divides the space into three equal sections for aligning objects evenly.

3. Final Answer:

   Add two more guides at 200px and 300px to mark equal spaces -> Option C

4. Quick Check:

   Equal spacing needs intermediate guides [OK]

Hint: Divide space with guides at equal intervals [OK]

Common Mistakes:

• Adding only one intermediate guide
• Ignoring guides and relying on snapping alone
• Placing guides unevenly