×

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 the Craft Sync plugin. You can also use Inspect with Studio documents that have been synced to InVision Cloud V7.

Accessing Inspect

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

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

Inspect UI tour

Note: 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?

inspect-UI.png

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.

Tools

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

Tool

Icon

Description

Selector selector.png 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 color-picker.png Sample colors from any screen and add them to your document colors.
Zoom zoom.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 hand-tool.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 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.

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 text-icon.png
Vector vector-icon.png
Raster image raster-image-icon.png

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

asset-layer.png

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

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.

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

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

distance-between-layers.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 (gear-icon.png) at the top right of the page. Here you will find the unit, code, and color preferences for your prototype.

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

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

percentage-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. If you haven’t set any document colors in your original Sketch file, then you won't see this palette.

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

If you want to delete a color you sampled, hover over the color in the Document Colors palette, and click the delete icon (delete-icon.png).

add-delete-document-color.gif

Note: You can only delete document colors sampled from Inspect. To remove an existing document color, you will need to remove it 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-section.png

APPEARANCE

If a text layer is selected, the Appearance section will show in the right-hand information panel. Here you can view the typeface, weight, style, and other properties of the text. Click any of the properties to copy the value to your clipboard. You can also copy the actual text by highlighting the text in the Aa field and using the keyboard shortcut Command + C (Control + C for Windows).

copy-text.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: InVision Cloud V7: How do I use the layout grid in Inspect?

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.

code-section.gif

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

mark-for-export-sketch.png

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-left corner of Inspect and clicking the Assets tab.

Note: 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.
    Note: Any layer containing an asset will have a folder icon with 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.png).

download-individual-asset.gif

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

download-individual-assets-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.

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

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, “layer-name@2x.png”). Afterwards, sync your prototype.

generate-2x-assets-photoshop.png

Note: 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.
  • Inspect does not currently support public share links. To provide access to Inspect mode, you will need to invite others to join the prototype. For more information, check out this article: Adding Stakeholders

Getting Started: InVision Cloud v7 (
)

InVision Cloud V7: Inspect for Craft Sync

Prev