Handoff 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.

How to handoff your designs with 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.

How to use Inspect

Showing Inspect tab for a design

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 will appear 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.
  • Under Inspect options, you can:
    • Toggle Highlight changed values to see what’s changed between versions. You’ll see a small blue triangle to the right of the changed values 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.

Linking From a Nested Symbol to the Master

The Inspect tool provides a clear path to easily navigate from a symbol instance to the symbol master. When a developer selects a symbol in the Inspect view, Abstract surfaces a clickable symbol master name in the layer properties panel, allowing the developer to go to the symbol master 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.

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)

Inspect Limitations

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 will always be disclosed 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.

Font WeightNumerical Weight
“Hairline”, “Extrathin”, “Ultrathin”, “Thin”100
“Extralight”, “Ultralight”200
“Light”, “Book”300
“Normal”, “Regular”, “Roman”, “Standard”, “Plain”400
“Medium”, “Demi”, “Semi”500
“Semibold”, “Semibld”, “Demibold”, “Demibld”600
“Bold”, “Bld”700
“Extrabold”, “Extrabld”, “Ultrabold”, “Ultrabld”800
“Black”, “Heavy”, “Fat”, “Poster”, “Extrablack”, “Extraheavy”, “Extrafat”, “Ultrablack”, “Ultraheavy”, “Ultrafat”900

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, we’ll display 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

Symbol instances with overrides that have not been defined the instance level will show Assets for the symbol master as it originally looked, without overrides. You’ll need to define Assets for the symbol instance if overrides have been used.

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 + Adobe XD

While we are in the public beta for Adobe XD file support, there are some aspects of Inspect that are not available for Adobe XD files, including:

  • Text Layer support
  • Assets
  • Shape paths: You can’t click on a shape on the Artboard in Inspect to locate it. You must instead locate the shape in the left panel tree structure.
  • Rotation: When a shape is rotated, the dimensions labeled for the shape may not be accurate.