Using Inspect with Layer Details

We want to help improve collaboration between developers and designers, and Inspect is the beginning of Abstract’s process for sharing assets between the two teams.

Inspect gives Viewers and Contributors subscribed to Business and Enterprise plans access to an asset’s properties and styles in order to implement it exactly to the designer’s specifications.

To access Inspect from a Branch or Master:

  1. Select a layer or artboard in a file.
  2. Navigate to the Inspect tab at the top. This may be done in web or desktop, with desktop offering offline functionality.

Here, there are several options you may use to take a closer look at the design specifications:

  • On the left is the layer tree. Click a layer name in the tree to highlight the layer in pink.
  • On the right you’ll find the proxies. Currently, only CSS is displayed here.
  • Click on a property to copy to the clipboard. A toast notification will appear in the bottom left confirming the copy action.
  • Clicking outside the artboard reveals properties, colors used, and typography.
  • Clicking a layer and then hovering over another reveals the pixel distance between them.

Use the Highlight changed values toggle for visual emphasis on changed worked, indicated by a small circle to the right of the changed values in the left-hand navigation.