Rulers and guides in Figma - Dashboard Guide

Dashboard Mode - Rulers and guides

Dashboard Goal

This dashboard helps you understand how to use rulers and guides in Figma to align and organize your design elements precisely.

Sample Data: Guide Positions and Element Coordinates

Element	X Position (px)	Y Position (px)	Guide Type	Guide Position (px)
Button	120	200	Vertical	100
Button	120	200	Horizontal	180
Title	50	50	Vertical	50
Title	50	50	Horizontal	40
Image	300	150	Vertical	280
Image	300	150	Horizontal	140
Text	200	300	Vertical	190
Text	200	300	Horizontal	290

Dashboard Components

• KPI Card: Number of Guides Used
  Formula: Count distinct guide positions (vertical + horizontal) = 8
• Chart: Element Positions vs. Guide Positions
  Scatter plot showing each element's X and Y positions with vertical and horizontal guides as lines for alignment reference.
• Table: Elements and Their Closest Guides
  Shows each element with its X, Y coordinates and the nearest vertical and horizontal guide positions.

Dashboard Layout

+----------------------+-----------------------+
|      KPI Card        |    Scatter Plot       |
|  (Number of Guides)  | (Element & Guide Pos) |
+----------------------+-----------------------+
|          Table: Elements and Closest Guides          |
+-----------------------------------------------------+

Interactivity

Use a filter to select an element (e.g., Button, Title, Image, Text). When you select an element:

• The scatter plot highlights the selected element's position and its guides.
• The table filters to show only the selected element's data.
• The KPI card remains constant as it shows total guides used.

Self Check

If you add a filter to select the element "Image", which components update?

• The scatter plot highlights the Image's position and guides.
• The table shows only the Image row.
• The KPI card stays the same.

Key Result

Dashboard showing how rulers and guides align design elements in Figma with positions and counts.