Spacing and measurement tools in Figma - Dashboard Guide

Dashboard Mode - Spacing and measurement tools

Goal

Understand how to use spacing and measurement tools in Figma to create well-aligned and visually balanced dashboards.

Sample Data

Element	Width (px)	Height (px)	X Position (px)	Y Position (px)
Title	600	50	100	20
KPI Card 1	180	120	100	90
KPI Card 2	180	120	300	90
Bar Chart	400	250	100	230
Data Table	600	200	100	500

Dashboard Components

• Title Text: Positioned at X=100px, Y=20px, width 600px, height 50px. Use Figma's alignment tools to center horizontally within the frame.
• KPI Cards: Two cards side by side with 20px horizontal spacing. Use Figma's smart guides and spacing measurement to keep consistent gaps.
• Bar Chart: Positioned below KPI cards with 20px vertical spacing. Use measurement tool to confirm vertical distance.
• Data Table: Placed below bar chart with 20px vertical spacing. Use Figma's ruler and measurement tools to verify spacing.

Dashboard Layout

+------------------------------------------------------------+
|                         Title (600x50)                     |
|                        (X=100, Y=20)                       |
+------------------------------------------------------------+
|  KPI Card 1 (180x120)  |  KPI Card 2 (180x120)              |
|  (X=100, Y=90)         |  (X=300, Y=90)                     |
+------------------------+-----------------------------------+
|                        Bar Chart (400x250)                  |
|                        (X=100, Y=230)                      |
+------------------------------------------------------------+
|                        Data Table (600x200)                 |
|                        (X=100, Y=500)                      |
+------------------------------------------------------------+

Interactivity

Use Figma's measurement and spacing tools interactively:

• Hover over elements to see distance guides between objects.
• Use the ruler tool to measure exact pixel distances horizontally and vertically.
• Snap elements to grid or smart guides to maintain consistent spacing.
• Adjust spacing by dragging elements and watch measurement tool update in real time.

Self Check

Add 10px padding around KPI Cards. Which measurements and spacing values update?

• The horizontal spacing between KPI Card 1 and KPI Card 2 decreases from 20px to 0px if cards are not moved.
• The overall width of each KPI Card increases by 20px (10px padding each side).
• Vertical spacing between KPI Cards and Bar Chart remains the same unless cards are moved.
• Use measurement tool to verify new distances and padding visually.

Key Result

A Figma dashboard layout demonstrating how to use spacing and measurement tools for precise alignment and consistent gaps between elements.