Measurement Tool

The Measurement tool allows you to measure distances, dimensions, and spacing between elements precisely. Essential for ensuring consistent spacing, verifying alignment, and providing accurate specifications for developers.

Activating the Measurement Tool

Access the Measurement tool from the toolbar.

• Click the Measurement tool icon in the toolbar
• Or select it from the toolbar dropdown menu

How to Measure

Measure Distance Between Two Points

1. Select the Measurement tool
2. Click the first point on the canvas
3. Move the cursor to the second point
4. Click to complete the measurement
5. The distance is displayed in pixels

Measure Between Elements

1. Select the Measurement tool
2. Click on the first element's edge or center
3. Click on the second element's edge or center
4. Measurement shows distance and direction

Measure Element Dimensions

Measure width and height of elements:

1. Select the Measurement tool
2. Click and drag across an element
3. Horizontal drag measures width
4. Vertical drag measures height
5. Diagonal drag measures both dimensions

Measurement Features

Display Options

• Pixels (px) - Default unit for web and UI design
• Points (pt) - Common in print design
• Percentage (%) - Relative to parent container
• Rem/Em - CSS relative units

Visual Indicators

• Measurement Lines - Red lines showing measured distance
• Distance Labels - Numeric values displayed inline
• Guides - Temporary guides for alignment
• Hover Preview - Live measurement preview before clicking

Snapping

Measurements automatically snap to:

• Element Edges - Top, bottom, left, right edges
• Element Centers - Horizontal and vertical centers
• Grid Lines - When grid is visible
• Guides - Manual and smart guides

Advanced Measurement

Multiple Measurements

• Hold Shift and click to add multiple measurements
• Each measurement remains visible on canvas
• Great for comparing multiple spacing values

Lock Measurements

• Click the lock icon to preserve a measurement
• Locked measurements persist across tool switches
• Useful for reference during design adjustments

Copy Measurements

• Right-click a measurement to copy the value
• Values copied to clipboard in current unit
• Paste into code, specs, or documentation

Use Cases

Spacing Verification

Ensure consistent spacing throughout designs:

• Measure padding inside containers
• Verify margin between sections
• Check button spacing in toolbars
• Confirm grid gaps are consistent

Developer Handoff

Provide accurate measurements for implementation:

• Element dimensions (width, height)
• Spacing between components
• Alignment distances
• Margin and padding values

Design System Compliance

Verify adherence to design system rules:

• Check spacing follows 8px grid
• Verify spacing tokens are used correctly
• Measure against design system specifications
• Validate component sizing

Quality Assurance

Catch alignment and spacing issues:

• Find inconsistent margins
• Detect misaligned elements
• Verify symmetry
• Check optical alignment

Measurement vs Dev Mode

Choose the right measurement approach:

Feature	Measurement Tool	Dev Mode
Purpose	Manual distance measurement	Automatic element inspection
Flexibility	Measure anything, anywhere	Element properties only
Speed	Manual, precise control	Instant automatic measurements
Best For	Custom measurements, QA	Developer handoff
Output	Visual measurement lines	Code snippets, specs

Keyboard Shortcuts

• Shift + Click - Add multiple measurements
• Alt + Click - Measure from element center
• Cmd/Ctrl + C - Copy measurement value
• Esc - Clear all measurements
• Delete - Remove selected measurement

Best Practices

• Use Snapping - Let measurements snap to edges for accuracy
• Lock Reference Measurements - Keep key measurements visible during work
• Measure Consistently - Always measure from the same reference points
• Document Findings - Copy measurements to annotations or notes
• Clear When Done - Remove measurements to avoid canvas clutter

Tips

• Hold Shift to constrain measurements to horizontal or vertical
• Use measurements to verify responsive breakpoint spacing
• Combine with grid view to ensure grid compliance
• Create a "Measurements" layer to organize locked measurements
• Take screenshots of measurements for design documentation

Related Features

• Dev Panel - Automatic element measurements
• Hand Tool - Navigate while measuring
• Grids & Guides - Visual alignment helpers
• Canvas Navigation - Zoom for precise measurement