Rulers and guides in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of rulers in Figma

What is the main purpose of using rulers in Figma when designing a dashboard?

A To measure distances and align elements precisely on the canvas

B To add color gradients to shapes

C To create interactive buttons automatically

D To export the design as a PDF file

💡 Hint

Think about how you keep things neat and organized on paper.

Rulers help designers measure and align objects accurately, ensuring a clean and professional layout.

❓ visualization

intermediate

Using guides to align dashboard elements

You want to align multiple charts horizontally in your dashboard. Which action correctly uses guides in Figma?

A Drag a vertical guide from the ruler to the desired position and snap charts to it

B Draw a rectangle around the charts and group them

C Change the background color of the canvas

D Use the text tool to label each chart

💡 Hint

Think about how a straight line helps you line things up.

Dragging a guide from the ruler creates a visual line to snap elements for perfect alignment.

❓ data_modeling

advanced

Setting up consistent spacing using rulers and guides

You want to maintain consistent spacing of 20 pixels between all dashboard widgets. How can rulers and guides help achieve this?

A Export the dashboard and adjust spacing in Excel

B Use the paint bucket tool to fill widgets with 20% opacity

C Add shadows to widgets to create visual separation

D Place horizontal and vertical guides spaced 20 pixels apart to snap widgets accordingly

💡 Hint

Think about marking equal distances before placing objects.

Guides spaced at fixed intervals help snap widgets to maintain uniform spacing.

🔧 Formula Fix

advanced

Troubleshooting guide snapping issues

You notice that your dashboard elements are not snapping to guides as expected in Figma. What is the most likely reason?

A The text tool is active instead of the move tool

B The canvas background color is set to white

C Snap to grid or snap to pixel grid is disabled in the view settings

D You have too many layers grouped together

💡 Hint

Check the snapping options in the view menu.

If snapping options are off, elements won't align to guides automatically.

🎯 Scenario

expert

Designing a responsive dashboard layout with rulers and guides

You need to design a dashboard that looks good on both desktop and tablet screens. How can you use rulers and guides effectively to prepare for responsive design?

A Design only for desktop and resize the canvas later without guides

B Set up multiple sets of guides for different screen widths and design within those boundaries

C Use only horizontal guides and ignore vertical alignment

D Export the design as an image and adjust responsiveness in PowerPoint

💡 Hint

Think about planning for different screen sizes before designing.

Using multiple guide sets helps create layouts that adapt well to various screen sizes.

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