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

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.

Enjoy an easier, more accurate, and less frustrating way to bring designers and developers together. No more long email threads and endless rounds of revision.



Inspect is available for Sketch and Photoshop documents synced via Craft Sync.

You can also inspect Studio files, but this article is specific to Inspect for Craft Sync. To learn more about inspecting Studio prototypes, check out this article instead: Inspect for Studio

Accessing Inspect

After you've synced your Sketch or Photoshop file to InVision, you can begin using Inspect.

To inspect a prototype, you must sync your screens with Craft Sync. 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.

To access Inspect:

  1. Sign in to your InVision Cloud account.
  2. Open a prototype and select a screen.
  3. At the bottom of the page, click the </> icon.
    If you're not signed in to the appropriate account, you may need to first sign in or request access to Inspect. To learn more, check out this article: How do I request access to Inspect for a prototype?

Inspect UI tour

The Inspect UI has a few different components:

  • Tools: At the top of the page you’ll find the selector, color picker, zoom, and hand tool. Use these to navigate and explore your prototype.
  • Layers panel: Browse the layers found within your artboard, selecting individual layers or groups for inspecting.
  • Information panel: Access your screen’s dimensions, position, colors, fonts, code, asset preview, and asset download function.


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






Use this to select artboards, groups, or layers to measure or inspect.

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

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

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

Conversely, clicking a layer in the layers panel will select the corresponding layer on your artboard.

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





Text element


Vector element


Raster image


Sketch symbol


To expand or collapse a group, click the drop-down arrow to the left of the group name. Layers that have assets available for download in Inspect are denoted with a download arrow in the lower-right corner of the layer’s icon.


Information panel

With a layer selected, the 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 between the following settings:


  • Pixels (Default for Web/Desktop)

  • Percentage

  • Points (Default for iOS)

  • DIP (Default for Android)


  • CSS (Default for Web)

  • LESS

  • SASS

  • SCSS

  • Stylus

  • Swift (Default for iOS)

  • Objective-C

  • Android (XML) (Default for Android)


  • Hex (Default for Web/Desktop)

  • RGBA

  • UIColor (Default for iOS)

  • ARGB (Default for Android)

If you change any format settings from the defaults, Inspect saves the settings so you don’t have to reset them after the page reloads.

Personal Inspect format settings do not currently update for your team or prototype collaborators. Other members will have to change their preferred format settings from the defaults.

Dimensions and position

At the top of the right-hand information panel, you can view the dimensions and position of a selected element relative to the artboard. If you click the Option key (or Alt on Windows), you can toggle between Pixels and % distance spacing.



Within the right-hand information panel is the Colors section where you can view Screen Colors and Document Colors. Screen colors are only those colors that are found on the current screen. Document colors are defined and synced from the original Sketch file. If you haven’t set any document colors in your original Sketch file, then you will not see this palette.

Optionally, you can manually add document colors in Sketch. Click the color picker tool, and hover over your screen. Click the portion of your screen that contains the color you want, and it will be added to your document colors. Pressing Escape will deactivate the tool and bring you back to the selector tool.

To delete a color you added, hover over the color in the Document Colors palette, and click the delete icon (Image_2018-08-20_at_9.00.47_AM.png).

You can only delete document colors sampled from Inspect. If you need to remove an existing document color, you will need to remove it in the original Sketch file and sync your prototype.


The Fonts section of the information panel lists the specific fonts used within the screen when you've selected the entire screen.


If a text layer is selected, you can view the typeface, weight, style, and other properties of the text. You can also copy the text directly to your clipboard by highlighting the text in the Aa field, and clicking Command + C.



The Grid section of the information panel contains grid data synced through Craft Sync from the Layout Settings in Sketch.



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



The code section of the information panel appears when you’ve selected a specific layer on the artboard or in the layers panel. It will display the visual attributes specific to the layer type in code form. To copy a single line of code, just click that line in the code. To copy the entire snippet, click Copy Code at the top right of the code section.

When working with layer groups, select the specific element within the layer group, and then copy the generated code.

Selecting layers

You can access any layer in the layer hierarchy by navigating to the canvas and clicking the layer directly. All selections made on the canvas will be reflected in the layers panel. To deselect a layer, simply click outside of the screen’s bounds on the canvas or press the Escape key.

If you have a group selected, you can hover over a child element within that group, and press the Command key to highlight that specific element in the screen as well as in the layer list on the left.

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

Measuring layer position

To measure a layer’s position relative to the canvas, click the layer and then move the cursor to a blank area of the canvas.


To display the relative distance between two layers, click the layer you want to measure and then hover over the layer you wish to measure it against (either on the canvas or in the layers panel).


Sketch grid support in Inspect

The Grid feature is a dedicated area within the Inspect information panel where you can get data about the grid system. Grid only works with Sketch files that have been synced to InVision.

Enabling grid settings in Sketch

To get grids into Inspect, you’ll need to turn on grids within Sketch. To display a grid system on the artboard, click the View menu in Sketch, and then click Show Layout.

Sketch refers to a grid system as Show Layout while Show Grid functions as a block grid (horizontal and vertical lines). If an artboard is selected when applying the grid settings, only that artboard will display the grids in Inspect. If you want to apply the grids to all screens, the artboards in Sketch should be deselected when applying the settings.

In Sketch, you can also customize the grid settings by selecting Layout Settings.


In the layout settings modal, you can adjust your grid by changing the values.


Accessing the grid panel in Inspect

If you’re using a grid in Sketch, we enable the grid by default in Inspect. When no elements are selected on the canvas, the grid section can be found in the right-hand information panel. Clicking any of the values in the grid section will automatically copy that value to your clipboard.


Selecting Show Grid toggles on the grid layout displayed on the Inspect canvas. When Show Grid Ruler is enabled, the grid ruler is positioned below the top toolbar. The layout of the grid ruler is based upon your grid system.

Inspecting layers with the grid ruler

If the grid ruler is on and you hover over a layer on the artboard, columns on the grid ruler will be highlighted; the first and the last column have an outer red border that matches the lines of the layer size. If you select a layer, the columns will stay highlighted as well.



Within Inspect you can view and quickly download assets by clicking the Assets tab at the top left of the page.

To get assets into Inspect, mark layers for export in Sketch and sync your prototype to InVision Cloud. If no layers have been marked for export and synced to the prototype, the assets will not show 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.

Mark layers for export in Photoshop by adding ".png" or any other file format to the end of the layer or group name.


Once layers have been marked for export and the source file (Sketch or Photoshop) has been synced to the prototype, you can access assets through the Assets tab in the top-left corner of Inspect.

Downloading assets in Inspect

There are three ways to download assets in Inspect:

  • Download individual assets
  • Download multiple assets
  • Download all assets

Download individual assets

There are two different ways to download individual assets. They can be downloaded from the assets preview in the Inspect tab, or they can be downloaded from the Assets tab. We will describe both methods.

To download individual assets from the Inspect tab:

  1. At the top-left of the page, click the Inspect tab.
  2. Click the asset layer in the layers panel.
    a 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. Click the download icon (Image_2018-08-20_at_9.27.18_AM.png) next to the asset to begin the download.

To download individual assets from the Assets manager:

  1. At the top left of the Inspect page, click the Assets tab.
  2. Hover over your desired asset and click the download icon (Image_2018-08-20_at_9.27.18_AM.png).

Download multiple assets

To download multiple different assets:

  1. At the top left of the Inspect page, 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, click Download Selected.

A .zip file will be generated and downloaded to your device.


Download all assets

To download all assets from the prototype (every layer made exportable within Sketch):

  1. At the top left of the Inspect page, click the Assets tab.
  2. In the top-right corner, Click Download All.

A ZIP file will be generated and downloaded to your device.

It's not possible to adjust the export settings in Inspect. Manage your export settings within Sketch, and sync your prototype. Also, there's not a way to remove a layer from your assets within Inspect. You'll need to unmark the layer as exportable within Sketch and sync your prototype.

Generating 1x and 2x assets

In Sketch, you can generate both 1x and 2x asset exports by creating 1x and 2x export versions in the export panel.

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

Things to note

  • Keep your file as small as possible to limit processing time. If needed, you can break your file into separate, smaller files.
  • Before inspecting a prototype, you must sign in to an account that has been given access. To learn more about requesting access to Inspect, check out this article: How do I request access to Inspect for a prototype?

Learn something new

Getting Started Guides