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 Inspect icon (v6-inspect-icon.png).
    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 dimensions, position, colors, fonts, code, and asset previews.
v6-inspect-ui-tour.png

Tools

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

Tool

Icon

Description

Selector

Image_2018-08-20_at_7.41.29_AM.png

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

Color picker

Image_2018-08-20_at_7.43.14_AM.png

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

Zoom

Image_2018-08-20_at_7.45.11_AM.png

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

Image_2018-08-20_at_7.46.30_AM.png

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

When using Sketch, if you have multiple groups or layers at the same level that have the same name, InVision will automatically append unique numbers to the end of the file names. This allows you to more easily distinguish between similar groups and layers. For example, if you have two layers in Sketch named rectangle, they will be renamed rectangle-1 and rectangle-2 in InVision. The layer names in your original Sketch file will remain unchanged.

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

Items with purple text contain DSM data. To learn more, check out this article: DSM in Inspect
v6-inspect-layer-list.gif

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:

Item

Icon

Group

group_icon.png

Text element

text_icon.png

Vector element

vector_icon.png

Raster image

raster_image_icon.png

Sketch symbol

sketch_symbol_icon.png

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

download_asset_icon.png

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

v6-inspect-collapse-all-groups.gif

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.

select-nested-layer.gif

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.

v6-inspect-measure-layer-relative-to-artboard.gif

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

v6-inspect-measure-layer-relative-to-another-layer.gif

Information panel

With a layer selected, the panel displays layer-contextual information. With no layers selected, the information panel displays information for the entire artboard.

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.

v6-inspect-format-settings.png

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

Units

  • Pixels (Default for Web/Desktop)

  • Percentage

  • Points (Default for iOS)

  • DIP (Default for Android)

Code

  • CSS (Default for Web)

  • LESS

  • Sass

  • SCSS

  • Stylus

  • Swift (Default for iOS)

  • Objective-C

  • Android (XML) (Default for Android)

Color

  • 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 percent.

v6-inspect-percent-pixels-toggle.gif

Colors

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__1_.png), and hover over your screen. Click the portion of your screen that contains the color you want.

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

add-delete-document-color.gif
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.

Fonts

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.

fonts_screen.png

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 (Ctrl + C for Windows).

v6-inspect-select-text-layer.gif

Grid

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.

grid_section.png

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

v6-inspect-dsm.png

Appearance

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.

v6-inspect-appearance-section.png

Code

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.

v6-inspect-copy-code.gif
When working inside groups, select the desired layer within the group before copying the 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 Cloud V7. If you don't complete these actions, the assets won't appear in Inspect.

sketch_export.png

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?

When using Sketch, If you have multiple groups or layers at the same level that have the same name, InVision will automatically append unique numbers to the end of the file names. This allows you to more easily distinguish between similar items available for download. For example, if you have two layers in Sketch named rectangle, they will be renamed rectangle-1 and rectangle-2 in InVision. The layer names in your original Sketch file will remain unchanged.

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
photoshop-export.png

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.

For each artboard in Photoshop, 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 properly in Inspect.

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. Its folder icon will have a download arrow.
    asset-layer.png
  3. In the right-hand information panel, the Assets preview should appear. To begin the download, click the download icon (download-icon__1_.png).
v6-inspect-download-individual-asset-from-inspect-tab.gif

To download individual assets from the Assets tab:

  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__1_.png).
v6-inspect-download-asset-from-assets-tab.gif

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.

v6-inspect-download-multiple-assets.gif

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.

v6-inspect-download-all-assets.gif

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.

generate-2x-assets-sketch.png

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]”). Afterward, sync your prototype.

generate-2x-assets-photoshop__1_.png
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

  • 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 or request 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