Hand off designs with Inspect

Inspect gives you access to each design’s specs, styles, and code. Stakeholders and developers can access Inspect for any designs you’ve shared with them. You do not need an Abstract account to access Inspect.

Watch our YouTube videos on The Basics: Collaborating with engineers and Inspecting designs for development for a walkthrough of Inspect.

When you’re ready to handoff designs for implementation, make assets exportable in your designs and share your designs as outlined below.

To handoff your designs with Inspect:

1. Follow the instructions to share your designs. You can share a link to an artboard, layer, or collection.
2. Click Copy link to Artboard. The link is copied to your clipboard.
3. Share the link via email, Slack, or other means.

If your developer has not signed up for their free Abstract viewer account, you can still grant them access to Inspect for your designs by selecting Anyone with the link under the Share settings. Make sure to check the Inspect option.

Use Inspect

Inspect is always available under the Inspect tab for a layer or artboard. If you’ve received designs to review or implement, you can find exact specifications using Inspect, even if you don’t have an Abstract account.

To access Inspect:

1. Navigate to the artboard or layer you’d like to Inspect, either via the Abstract desktop or web app or by clicking on a link you’ve received from a designer.
2. Select the Inspect tab.

Within Inspect, you can:

• See a layer tree on the left. You can click a layer in the tree to highlight the layer in pink.

• Select a layer by mousing over the preview.

• Find exact specifications on the right.

• Click any specification to copy it to your clipboard. A confirmation appears in the bottom left.

• Click outside the artboard to reveal properties, colors, and typography.

• Select a layer and then hover over another to reveal the pixel distance between them.

• Export and download assets that the designer has made exportable.

• Select a linked library symbol to view and navigate to its source file in Abstract.

• Select a Sketch hotspot to view the animation specifications and navigate to the connected artboard.

Under Inspect options, you can:

• Toggle Highlight changed values to see what’s changed between versions. A small blue triangle indicates the changed values in in the left-hand navigation.

• Toggle Grid, Layout, or Guides to overlay Sketch’s canvas settings on your artboards. Please note, these canvas settings must first be enabled in Sketch under View > Canvas > check Show Grid, Show Layout, and Show Rulers.

• Change the Measurement units and Color format to match your development environment.

Link from a nested symbol to the main branch

The Inspect tool provides a clear path to easily navigate from a symbol instance to the main branch version of the symbol. When a developer selects a symbol in the Inspect view, Abstract surfaces a clickable version of the main branch symbol name in the layer properties panel, allowing the developer to go to the main branch symbol and inspect from there.

This improves the developer’s workflow by allowing them to identify the core component a designer is using in their designs. By being able to dive deeper into the core component, the developer understands how the designer is building variations with overrides.

Use the Inspect keyboard shortcuts

• Press ctrl + c to copy text, if a text layer is selected

• Press ctrl + g to toggle grids, if defined

• Press ctrl + l to toggle layout, if defined

• Press ctrl + r to toggle guides, if defined

• Press . to toggle sidebars

• Press space to temporarily hide the preview inspector/pink lines (allowing for easier access to pan and zoom)

• Press z to toggle the preview inspector (allowing for easier access to pan and zoom)

Limitations of Inspect

The dimensions of override text layers are estimated

Sketch does not store the dimensions of text overrides in the Sketch file. As a result, Abstract does not have access to the true dimensions of text layers with overrides. In this situation, we measure the text override using a locally available font and display estimated dimensions. Estimated dimensions are always marked with a ~ in front of the value.

The font weights for text layers are estimated

Font weight is determined by your font name, e.g. GTAmericaTrial-Regular.

We use the following table to map font names to numerical font weight values.

We display commonly named font weights, e.g. normal (for 400) or bold (for 700), when detected. If a font weight doesn’t map to a common name, Abstract displays the numerical value of the font weight, according to the table above.

No folder support for asset downloads

Assets are downloaded individually from the Inspect tab.

Limited support for symbol assets

If you've used overrides, define assets for the symbol instance. For any symbol instance with overrides that aren't defined on the instance level, the main branch shows the symbol as it looks without those overrides.

Missing layer and text styles

There are no known limitations with Inspect regarding missing layer and text styles. Please reach out to support for further help.

Inspect + Sketch's Smart Layout

Inspect does not currently support Sketch’s Smart Layout.

Inspect + Sketch prototyping

When a hotspot targets an artboard that is a symbol, the hotspot won't show in Inspect.