Inspect for Craft Sync

Inspect simplifies the design-to-development process. With Inspect, your team can access measurements, colors, and assets for desktop and mobile prototypes. Get pixel-perfect comps, export assets, and generate real code for any design element.

Inspect works specifically with Sketch documents synced as prototypes via Craft Sync. 

Accessing Inspect

Warning: The Inspect iconwill always be visible when viewing prototypes in InVision, but it will only work for screens you have uploaded via Craft Sync.

To access Inspect in InVision V7:

1. After syncing your Sketch document, sign in to your InVision V7 account.
2. Navigate to the Documents page and open your prototype.
3. At the bottom of the page, click the Inspect icon ().
   

As seen in the screenshot above, the Inspect UI has a few different areas:

• Canvas: Use the canvas—between the two pink borders we've added to the screenshot above—to hover over and/or click any elements you want to inspect.
• Layers panel: Select any groups or layers on the current screen.
• Information panel: Access your screen’s dimensions, colors, fonts, and more.

Layers panel

On the left-hand side of the page, you’ll notice a full list of groups and 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 design file.

Items with purple text contain DSM data. To learn more, check out this article: InVision V7: DSM in Inspect

The following is a list of items and their associated icons that you’ll notice in the layers panel:

To expand or collapse a group, click the drop-down arrow to the left of the group name. To expand or collapse all groups, navigate to the top of the layers panel and click the collapse icon () at the top of the layers panel:

Selecting layers

When hovering and clicking design elements on the canvas, Inspect selects the parent group by default. To select a nested group or layer, double-click the layer within that group.

Selecting a layer on the artboard will also select that layer in the left-hand layers panel, and vice versa. To deselect a layer, click the canvas outside the artboard or press the Escape key.

Measuring layer position

To display the relative distance between two layers, click the layer you want to measure and then hover over the layer you want to measure it against (either on the canvas or in the layers panel). To measure a layer's position relative to the artboard, select the layer and then move your cursor off the artboard:

If you're measuring from a text layer, hold Option to measure from the text baseline. Release Option to measure from the cap height:

Information panel

The information panel is on the right side of the page. With a layer selected, the information panel displays layer-contextual information. With no layers selected, the information panel displays screen-contextual information.

Format settings

To access the format settings, click the gear icon () at the top right of the page. Here you will find the unit, code, and color preferences for your prototype:

Each option will change the output of the properties found in the information panel. Choose among the following settings:

If you change any format settings from the defaults, Inspect saves those settings for you.

Dimensions and position

At the top right of the information panel, you can view the dimensions and position of a selected element relative to the artboard. When no elements are selected, you can view the dimensions for the artboard:

Colors

Within the right-hand information panel is the Colors section, where you can view the colors found on the current screen:

Fonts

When no layers are selected, the right-hand information panel will display the Fonts section. This section lists all fonts used on that particular screen:

With a text layer selected, you can copy the text itself by clicking the Copy icon () next to the Text () field in the information panel, or you can copy the font name under the Styles heading:

Layout

When no layers are selected, the Layout section appears in the right-hand information panel. This section contains grid data from Sketch's Layout Settings. Click any grid value to copy it to your clipboard.

You can use the toggle button next to the Layout heading to turn grid ()or off (). To learn more, check out this article: InVision V7: How do I use the layout grid in Inspect?

DSM

If any of your layers contain DSM data, a DSM section will appear in the right-hand information panel. In the left-hand layers panel, DSM layers are denoted with purple text. View information like library colors, text styles, and live components:

To learn more about using Inspect for DSM, check out this article: InVision V7: DSM in Inspect

Library

When you select a group or layer that contains data from a Sketch library, the Library section appears in the right-hand information panel. Depending on the layer type, the Library section shows the name of the Sketch symbol, text style, or layer style that's used as well as the name of the Sketch library that's referenced:

Styles

If you select a specific layer, the right-hand information panel will display the Styles section:

Depending on the layer type, this section will include information like color, alignment, and more. For example, if you select a text layer with multiple properties, you can view the different properties applied to each part of the text.

Code

When you select a layer, you'll see the Code section of the information panel right next to the Styles section. Once you click Code, you'll see the layer's visual attributes in code form. To copy the snippet, click Copy Code:

Assets

With Inspect you can view and download individual or multiple assets.

First, mark layers for export in Sketch and sync your prototype to InVision. If you don't complete these actions, the assets won't appear in Inspect.

To enable asset download for layers within a symbol, the layers within the symbol must be marked for export in Sketch. To learn more, check out this article: How do I enable asset download for layers within a symbol in Craft Sync?

Once you've marked layers for export and synced the prototype, you can view the assets by navigating to the top-right corner of Inspect and clicking the Assets tab.

Downloading individual assets

There are two different ways to download individual assets while working in Inspect: Download the asset from a specific layer or use the Assets tab to download one or more assets for the entire screen.

To download an asset from a specific layer:

1. Click the desired layer—either in the layers list or on your prototype screen.
2. Below the thumbnail in the information panel, click Download.
   
   If there are multiple formats available, this button will say Download all formats.
   

 To download one or more assets for the entire screen:

1. Ensure that the screen itself, rather than individual layers, is selected.
2. At the top of the information panel, click the Assets tab.
3. Hover over an asset and click the Download icon (), or download all the assets on the screen by clicking Download assets.
   

The asset/s will download directly to your computer.

Generating 1x and 2x assets

In Sketch, you can generate 1x and 2x assets by creating 1x and 2x export versions in the export panel. After doing so, sync your prototype.

Things to note

When using Inspect, here are a few things to keep in mind:

• To limit processing time, keep your file as small as possible. If necessary, you can save your Sketch document as multiple smaller files.
• To provide access to Inspect mode, you will need to invite others to join the prototype. For more information, check out this article: InVision V7: Sharing Documents