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


Inspect for Craft Sync

Follow

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.

Accessing Inspect

The Inspect icon (Inspect-V7-icon.png) will always be visible when viewing prototypes in InVision, but it will only work for screens you have uploaded via Craft Sync (or published via Studio).

To access Inspect in InVision Cloud:

  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).
invision-cloud-inspect-tour.png

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

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

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

ITEM

ICON

Group

invision-inspect-layer-group-icon.png

Text

invision-inspect-text-icon.png

Vector

invision-inspect-vector-layer-icon.png

Raster image

invision-inspect-raster-image-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 collapse icon (invision-inspect-expand-collapse-groups-layers.png) at the top of the layers panel:

invision-inspect-expand-collapse-layers.gif

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. To access the most deeply nested layer, hold the Command key (Control for Windows) while hovering and clicking:

invision-inspect-selecting-layers.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 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:

invision-inspect-measuring-layer-position.gif

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

invision-inspect-measuring-text-from-baseline-or-cap-height.gif

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 (invision-inspect-format-settings.png) at the top right of the page. Here you will find the unit, code, and color preferences for your prototype:

invision-inspect-format-settings-options.png

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

UNITS

  • Pixels

  • Percentage

  • Points

  • DIP

CODE

  • CSS

  • LESS

  • SASS

  • SCSS

  • Stylus

  • Swift

  • Objective-C

  • Android (XML)

COLOR

  • 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. When no elements are selected, you can view the dimensions for the artboard:

invision-inspect-artboard-dimensions.png

Colors

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

invision-inspect-colors.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 lists all fonts used on that particular screen:

invision-inspect-fonts.png

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

invision-inspect-copy-text-or-font.gif

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.

invision-inspect-layout.png

You can use the toggle button next to the Layout heading to turn grid on (invision-inspect-layout-grid-toggle-on.png) or off (invision-inspect-layout-grid-toggle-off.png). To learn more, check out this article: InVision Cloud 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:

invision-inspect-dsm-component.gif

To learn more about using Inspect for DSM, check out this article: InVision Cloud 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:

invision-inspect-sketch-library-section.png

Styles

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

invision-inspect-styles-section.gif

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.

If you synced your prototype via Craft Sync for Photoshop, you won't be able to view multiple properties applied to different parts of the same text layer.

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:

invision-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 InVision Cloud. If you don't complete these actions, the assets won't appear in Inspect.

mark-for-export-sketch.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?

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
mark-for-export-photoshop__1_.gif

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.

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

    invision-inspect-download-asset-from-layer.gif

 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 (inspect-for-studio-download-asset-icon.png), or download all the assets on the screen by clicking Download assets.
    invision-inspect-assets-tab.gif

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.

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

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

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