×

Introduction to Inspect

Inspect makes your design-to-development process better—for everyone. Inspect gives your team access to measurements, colors, and assets from a designer’s prototype. Create stylesheets, get pixel perfect comps, discuss design challenges, export assets adaptively, and generate real code for any design element.

Enjoy an easier, more accurate, and less frustrating way to help designers and engineers come together around designs before development. No more long email threads and endless rounds of revision!

Getting Started with Inspect

 

Inspect for consumer plans only works with Sketch or Photoshop documents synced to prototypes via the Craft Sync plugin. All artboards from your Sketch or Photoshop document will be Inspect-ready.

Enterprise users and existing Inspect Public Beta users will be able to continue to use server-size extraction for Sketch documents (via drag and drop method, InVision sync, Dropbox or Box sync, and Craft Sync).

Accessing Inspect

Once you’ve synced your Sketch or Photoshop source file to a prototype via the Craft Sync plugin, you’ll be able to access Inspect in the footer of Build Mode:

Note: Inspect will always be available in the console footer, but will display a warning message for screens that were not generated from a Sketch or Photoshop file.

Inspect UI Tour

The Inspect UI is broken down into a few different components:

  • Tools (at the top): Here you’ll find a selector tool, an eyedropper tool, a magnifier glass for zooming, and a hand tool for dragging your screen.
  • Layers Panel (on the left-hand side): You can browse the groups and layers found within your artboard in your source file, selecting each individual element or group. The layers panel displays all the layers in the exact order, layer type and hierarchy found in the source Sketch file.
  • Information Panel (on the right-hand side): You can browse and access your screen’s dimensions: position, palette, typeface, fonts, code, asset preview, asset download function, and navigate to your configuration tool to adjust your export settings, as needed.

Tools

At the top of your screen, you’ll find the following tools:

  • A selector arrow: Use this to select artboards, groups, or layers to measure or inspect.
  • An eyedropper tool: Sample colors from any screen and add them to your Document Colors.
  • A magnifier glass: Use this to zoom in/out on your screen. By default, when you select the magnifying tool and click on your screen, it’ll zoom in. To zoom out, hold alt+click. You can also zoom in/out using the +/- signs at the top right of your screen.
  • A hand tool: Use this to pan across the canvas by click-dragging. You can also enable this tool by holding down the spacebar.

Layers Panel

On the left hand side of your screen, you’ll notice a full broken down list of your groups/layers generated from your design document.  The layers panel displays all the layers in the exact order, layer type and hierarchy found in the source Sketch file. Hovering over a specific group/layer on the screen will highlight the item in blue in the left hand panel.

Hovering over a specific group/layer on the screen will highlight the item in blue in the left hand panel.

Here’s a helpful icon key for the layers panel:

Groups
Text Elements
Vector Elements
Raster Layers
Sketch Symbols

To toggle a group’s expanded/collapsed state, click to the left of the group icon. Layers that were made exportable and thus are available for download in Inspect are denoted with an arrow icon in the lower-right corner of the layer’s icon:

Clicking on a layer in the Layers sidebar will select the corresponding element on your Canvas.

Information Panel

With no layers selected, the Information panel displays screen-contextual information. With a layer selected the panel displays layer-contextual information.

From the top of the panel to the bottom, you’ll see:

  • Asset Preview: A preview of what the selected group/layer would look like if saved as an asset (see screenshot below, under Chart at top right of image)
  • Dimensions & Position: The dimensions and position of the selected element relative to the artboard (read-only). 
    Pro Tip: If you hit the Alt/Option key, you can toggle between Pixels and % distance spacing.

  • Colors: Colors defined in "Document Colors" in the Sketch file when you've selected the entire screen (If selecting a specific element, the Colors section will show the colors for that specific element.) See more below on how to add a custom color.

  • Typeface: If a text layer is selected, you can view and/or copy the text (read-only).

  • Fonts: Lists the specific fonts used within the screen when you've selected the entire screen (read-only)
  • Code:  Displays the visual attributes specific to the layer type in code form
  • Download buttons: 
    Download all assets from the prototype - Every layer (in every format and size) made exportable within Sketch is available for download in the top toolbar.

    Download individual assets from a layer - Any layer in Inspect that has downloadable assets is marked with an icon in the Layers sidebar. 

    Clicking on the layer will display all downloadable assets in the Assets panel:

  • Asset Details: It's no longer possible to adjust the export settings in Inspect. Manage your export settings within Sketch; they will translate to Inspect.

  • Remove from Assets: There's no way to remove a layer from your Assets within Inspect; you'll need to unmark the layer at exportable within Sketch.

Selecting a Layer From the Canvas

You can access any layer anywhere in the layer hierarchy by clicking on the layer. All selections made on the canvas will be reflected in the Layers sidebar. You can use the Option/Alt key to layers below another.

To deselect your selected layer, simply click outside of the screen’s bounds on the Canvas or press the Escape key.

Selecting a Layer From the Layers Sidebar

Selecting layers from the Layers sidebar allows you to select any layer with a single click — regardless of whether it belongs in a group. All selections made in the Layers sidebar will be reflected on the Canvas.

To deselect your selected layer, simply click outside of the screen’s bounds on the Canvas or press the Escape key.

Taking Measurements for one Object Relative to Canvas

Selecting a layer will automatically display the layer’s position relative to the screen’s bounds.

Taking Measurements Between two Objects

To get the measurements between two objects select the object you wish to measure and then hover over the layer you wish to measure it against (either on the Canvas or in the Layers sidebar) to display the relative distance between the two objects.

Hold down the Command key to enable hovering over any layer, regardless if it exists in a group.

Adding New Document Colors

You can add custom document colors in the Colors panel with the color picker tool. The color picker tool is available in the top toolbar and allows you to sample colors from any screen to add to your Document Colors. Clicking the eyedropper icon will activate the tool. Once the color picker is activated, click on the area of the screen you wish to sample. The sampled color will show up in the Document Colors list. Pressing Escape will deactivate the tool and bring you back to the selector tool.

Deleting Sampled Colors

You can delete colors sampled with the color picker tool by hovering over the color you wish to delete and clicking on the trashcan icon in the top right corner of the color’s tooltip. You can’t delete Document colors pulled from the Sketch file — only colors added via the Color Picker tool.

A few things to note

  • Keep your file as small as possible to limit processing time. If needed, you can break your file up into separate, smaller files.
  • When working with layer groups, select the specific element within the layer group, and then copy the generated code on the right hand side under the “Code” section.