Overview of all specs available in the Inspect Panel

 

Redlines

View the distance between two layers

Measuring the distance between two edges requires an extra step to select where the measurement should start.

  1. Hover over a layer and click anywhere to select it. 
  2. Using the same layer, click the edge of the layer where the measurement should start. The selection line will appear thicker after the second click. 
  3. Move the cursor to a different layer. The measurement will change instantly based on where the cursor is placed.

View the dimensions of a layer

While viewing your artboard in Inspect Mode, click on any layer on your artboard. Two things will appear:

  • The dimensions will appear as an overlay on the image
  • The layer properties will populate in the Inspect Panel

 

Convert units to dp, pt, or px

The unit measurements in Gallery are tied to the device type that is selected in the Inspect Panel.
  1. In the top right corner of the Inspect Panel, click the context selector dropdown menu Down Arrow.
  2. Click the context selector that matches the desired unit measurement.
  • Android: dp 
  • iOS: pt
  • Flutter: dp
  • Web: px

Typography

View typography details 

Click on a layer that contains text to view Typography details in the Inspect Panel. Fields will include:
  • Content
  • Typeface
  • Size
  • Color
  • Line Spacing
  • Character Spacing
  • Horizontal Alignment
  • Vertical Alignment

Color

Display HEX, RGB, and other color values in the color field

Click on the color palette to switch from HEX to RGB values and other options. 
 
Google apps
Main menu
15291723108424217531
true
Search Help Center
true
true
true
true
true
1635640
false
false