Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.

InVision Cloud V7: Inspect for Craft Sync

This article provides answers for InVision Cloud V7. If you’re on V6 of InVision, read this article instead. Not sure which version you're using? Find out now.

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 and Photoshop documents synced as prototypes via Craft Sync. You can also use Inspect for Studio documents that have been synced to InVision Cloud V7.

Accessing Inspect

To access Inspect, you must sync your screens with Craft Sync (or directly from Studio if it’s a Studio file). Inspect will always be available in the console footer, but it will display a warning message for screens that were not generated or updated from Craft Sync or Studio.
  1. After syncing your Sketch, Photoshop, or Studio document, sign in to your Cloud V7 account.
  2. Navigate to the Documents page and open your prototype.
  3. At the bottom of the page, click the Inspect icon (Inspect-V7-icon.png).

Inspect UI tour

This UI tour is for prototypes synced via Craft Sync. If you synced your prototype via Studio, check out this article: InVision Cloud V7: How do I view Studio prototypes in Inspect?

The Inspect UI has a few different components:

  • Tools: Use the selector, color picker, zoom, and hand tool to explore your prototype.
  • Layers panel: Select any groups or layers on the current screen.
  • Information panel: Access your screen’s dimensions, colors, fonts, and more.


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






Use this to select artboards, groups, or layers to measure or inspect. By default, this tool will select the outermost group. To select the most deeply nested layer, hold the Command key (Control for Windows) when hovering and clicking.

Color picker


Sample colors from any screen and add them to your document colors.



With this tool selected, just click your screen to zoom in. To zoom out, hold Option + click (Alt + click for Windows). You can also zoom using the + and - icons at the top right of the Inspect page.

Hand tool


Use this to move across the canvas by clicking and dragging. You can also enable this tool by holding down the spacebar.

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 Cloud V7: DSM in Inspect

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









Raster image


If the layer or group has downloadable assets, the icon will have a small download arrow.


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 (collapse-all-groups-icon.png).


Selecting layers

When hovering and clicking, Inspect selects the parent group by default. To select a nested group or layer, double-click the layer within that group. To access the most deeply nested layer, hold the Command key (Control for Windows) while hovering and clicking.


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 measure a layer's position relative to the artboard, select the layer and then move your cursor off the artboard.


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


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 (gear-icon.png) 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:


  • Pixels

  • Percentage

  • Points

  • DIP


  • CSS

  • LESS

  • SASS

  • SCSS

  • Stylus

  • Swift

  • Objective-C

  • Android (XML)


  • Hex

  • RGBA

  • UIColor

  • ARGB

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

Any changes made to the format settings won't affect your collaborators. They can set their own preferred formats when viewing.

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. If you hold the Option key (Alt for Windows), you can toggle between your current format and percentage spacing.



Within the right-hand information panel is the Colors section, where you can view Screen Colors and Document Colors. Screen colors are the colors found on the current screen. Document colors are defined and synced from the original Sketch file. Inspect will also analyze the source file and add any colors it finds to the palette.

To manually add document colors to Inspect, navigate to the top of the page, click the color picker icon (color-picker.png), and hover over your screen. Click the portion of your screen that contains the color you want.

To delete a color, hover over the color in the Document Colors palette and click the delete icon (delete-icon.png).

You can't delete document colors synced from Sketch. You will need to remove those colors in the original Sketch file and re-sync your prototype.


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


If a text layer is selected, you can copy the actual text by highlighting the text in the Aa field and using the keyboard shortcut Command + C (Control + C for Windows).



When no layers are selected, the Grid 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 toggle the layout grid and ruler by checking the boxes Show Grid and Show Grid Ruler. To learn more, check out this article: InVision Cloud V7: How do I use the layout grid in Inspect?


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, check out this article: InVision Cloud V7: DSM in Inspect



If you select a specific layer or group, the right-hand information panel will display the Appearance section. Depending on the layer type, this section will include information like color, alignment, typeface, and more.



When you select a layer, the code section of the information panel appears, displaying the layer's visual attributes in code form. To copy a single line of code, click that line in the code. To copy the entire snippet, click Copy Code.

When working inside groups, select the desired layer within the group before copying the code.


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

First, mark layers for export in Sketch and sync your prototype to Cloud V7. 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?

For each artboard, we recommend giving a unique name to every group, nested group, and layer that you want to export as assets. If multiple layers or groups share the same name, it can prevent assets from being generated in Inspect.

With Craft Sync for Photoshop, you can generate assets for export by adding one of the following extensions to the end of the layer name:

  • .png
  • .gif
  • .jpg

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

Currently, there's not a way to remove assets within Inspect. To remove an asset, unmark the layer as exportable within Sketch and re-sync your prototype. In Photoshop, remove the extension from the file name and re-sync your prototype.

Downloading individual assets

There are two different ways to download individual assets. You can download them from the assets preview in the Inspect tab or from the Assets tab.

To download individual assets from the Inspect tab:

  1. While in Inspect mode, navigate to the top-left corner and click the Inspect tab.
  2. In the left-hand layers panel, click the asset layer.
    Any layer containing an asset will have a folder icon with a download arrow.
  3. In the right-hand information panel, the Assets preview should appear. To begin the download, click the download icon (download-icon.png).

To download individual assets from the Assets manager:

  1. While in Inspect mode, navigate to the top-left corner and click the Assets tab.
  2. Hover over your desired asset and click the download icon (download-icon.png).

Downloading multiple assets

To download multiple assets:

  1. While in Inspect mode, navigate to the top-left corner and click the Assets tab.
  2. Hover over each asset and click the circle in the top-left corner of the asset card. To select all assets on a particular screen at once, hover over the screen title and click the circle to the right.
  3. Once you’ve selected all your desired assets, navigate to the top-right corner and click Download Selected.

Inspect will generate and download a ZIP file to your device.


Downloading all assets

To download all assets from the prototype:

  1. While in Inspect mode, navigate to the top-left corner and click the Assets tab.
  2. In the top-right corner, Click Download All.

Inspect will generate and download a ZIP file to your device.


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.


To generate an asset in Photoshop, add a file format extension to the name of the layer you want to export. All layer assets are exported at 1x by default. If you want to export the layer at 2x, add “@2x” to the end of the layer name (for example, “[email protected]”). Afterwards, sync your prototype.

It's not possible to adjust assets in Inspect. Manage your export settings within Sketch, and then re-sync your prototype. For Photoshop, change the file name and sync again.

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 or Photoshop 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 Cloud V7: Sharing Documents

Was this article helpful?

Still have a question?

Contact Us