×

Inspect

Inspect makes your design-to-development process better—for everyone. Inspect gives your team access to measurements, colors, and assets from a designer’s prototype. Get pixel perfect comps, discuss design challenges, export assets adaptively, and generate real code for any design element.

Enjoy an easier, more accurate, and less frustrating way to help designers and engineers come together around designs before development. No more long email threads and endless rounds of revision!

+
GETTING STARTED WITH INSPECT

 

Inspect for consumer plans only works with Sketch or Photoshop documents synced to prototypes via the Craft Sync plugin. All artboards from your Sketch or Photoshop document will be Inspect-ready.

Enterprise users and existing Inspect Public Beta users will be able to continue to use server-size extraction for Sketch documents (via drag and drop method, InVision sync, Dropbox or Box sync, and Craft Sync).

+
ACCESSING INSPECT

Once you’ve synced your Sketch or Photoshop source file to a prototype via the Craft Sync plugin, you’ll be able to access in the footer of your screen detail page:

Note: Inspect will always be available in the console footer, but will display a warning message for screens that were not generated from a Sketch or Photoshop file.

+
INSPECT UI TOUR

The Inspect UI is broken down into a few different components:

  • Tools (at the top): Here you’ll find a selector tool, an eyedropper tool, a magnifier glass for zooming, and a hand tool for dragging your screen.
  • Layers Panel (on the left-hand side): You can browse the groups and layers found within your artboard in your source file, selecting each individual element or group. The layers panel displays all the layers in the exact order, layer type and hierarchy found in the source Sketch file.
  • Information Panel (on the right-hand side): You can browse and access your screen’s dimensions: position, palette, typeface, fonts, code, asset preview, and asset download function. Specific asset export settings will need to be set in Sketch prior to syncing your screens.
+
TOOLS

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

  • A selector arrow: Use this to select artboards, groups, or layers to measure or inspect.
  • An eyedropper tool: Sample colors from any screen and add them to your Document Colors.
  • A magnifier glass: Use this to zoom in/out on your screen. By default, when you select the magnifying tool and click on your screen, it’ll zoom in. To zoom out, hold alt+click. You can also zoom in/out using the +/- signs at the top right of your screen.
  • A hand tool: Use this to pan across the canvas by click-dragging. You can also enable this tool by holding down the spacebar.
+
LAYERS PANEL

On the left hand side of your screen, you’ll notice a full broken down list of your groups/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 Sketch file. 

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

Here’s a helpful icon key for the layers panel:

Groups
Text Elements
Vector Elements
Raster Layers
Sketch Symbols

To toggle a group’s expanded/collapsed state, click to the left of the group icon. Layers that were made exportable and thus are available for download in Inspect are denoted with an arrow icon in the lower-right corner of the layer’s icon:

Clicking on a layer in the Layers sidebar will select the corresponding element on your Canvas.

+
INFORMATION PANEL

With no layers selected, the Information panel displays screen-contextual information. With a layer selected the panel displays layer-contextual information.

From the top of the panel to the bottom, you’ll see:

  • Asset Preview: A preview of what the selected group/layer would look like if saved as an asset (see screenshot below, under Chart at top right of image)
  • Dimensions & Position: The dimensions and position of the selected element relative to the artboard (read-only). 
    Pro Tip: If you hit the Alt/Option key, you can toggle between Pixels and % distance spacing.

  • Colors: Colors defined in "Document Colors" in the Sketch file when you've selected the entire screen (If selecting a specific element, the Colors section will show the colors for that specific element.) See more below on how to add a custom color.

  • Typeface: If a text layer is selected, you can view and/or copy the text (read-only).

  • Fonts: Lists the specific fonts used within the screen when you've selected the entire screen (read-only)
  • Grid: The grid data is the data synced through Craft Sync from the “Layout settings” in Sketch
    Screenshot_2017-03-02_15.41.28.png
  • Code:  Displays the visual attributes specific to the layer type in code form
  • Download buttons: 
    Download all assets from the prototype - Every layer (in every format and size) made exportable within Sketch is available for download in the top toolbar.

    Download individual assets from a layer - Any layer in Inspect that has downloadable assets is marked with an icon in the Layers sidebar. 

    Clicking on the layer will display all downloadable assets in the Assets panel:

  • Asset Details: It's no longer possible to adjust the export settings in Inspect. Manage your export settings within Sketch; they will translate to Inspect.

  • Remove from Assets: There's no way to remove a layer from your Assets within Inspect; you'll need to unmark the layer as exportable within Sketch.

+
SELECTING LAYERS

SELECTING A LAYER FROM THE CANVAS

You can access any layer anywhere in the layer hierarchy by clicking on the layer. All selections made on the canvas will be reflected in the Layers sidebar. 

To deselect your selected layer, simply click outside of the screen’s bounds on the Canvas or press the Escape key.

SELECTING A LAYER FROM THE LAYERS SIDEBAR

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

+
Sketch Grid Support

The Grid feature is a dedicated area within Inspect where you can get data about the grid system. Grid only works with Sketch files in newly created prototypes or prototypes that have been synced since we released Grid support.

GETTING THE GRID LAYOUT IN INSPECT

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

NOTE: Sketch refers to a grid system as “Show Layout” while “Show Grid” functions as a block grid (horizontal and vertical lines).

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

Screenshot_2017-02-28_16.38.00.png

In the Layout Settings modal, you can adjust your grid by changing the values.

Grid-LayoutSettings.png

ACCESSING THE GRID PANEL IN INSPECT

If you’re using a grid in Sketch, we turn the grid on by default, so when you enter Inspect mode, you’ll see the grid displayed on the artboard. Your grid data can be found in the Information sidebar on the right side of Inspect mode.

Grid-3.png

grid-4.png

Copying values: All values within the Grid panel can be copied with one click by selecting the input field.

Show Grid: Selecting or deselecting Show Grid turns on/off the grid layout displayed on the Inspect canvas.

Show Grid Ruler: Show Grid Ruler is a functionality intended to better support your workflow.

The grid ruler is positioned below the toolbar and persists there until it's turned off. 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 a outer red border that matches the lines of the layer size.

grid-5.png

If you select a layer, the columns will stay highlighted as well.

grid-6.png

grid-7.png

 

 

+
TAKING MEASUREMENTS 

TAKING MEASUREMENTS FOR ONE OBJECT RELATIVE TO CANVAS

Selecting a layer will automatically display the layer’s position relative to the screen’s bounds.

 

TAKING MEASUREMENTS BETWEEN TWO OBJECTS

To get the measurements between two objects select the object you wish to measure and then hover over the layer you wish to measure it against (either on the Canvas or in the Layers sidebar) to display the relative distance between the two objects.

+
DOCUMENT COLORS

ADDING NEW DOCUMENT COLORS

You can add custom document colors in the Colors panel with the color picker tool. The color picker tool is available in the top toolbar and allows you to sample colors from any screen to add to your Document Colors. Clicking the eyedropper icon will activate the tool. Once the color picker is activated, click on the area of the screen you wish to sample. The sampled color will show up in the Document Colors list. Pressing Escape will deactivate the tool and bring you back to the selector tool.

 

DELETING SAMPLED COLORS

You can delete colors sampled with the color picker tool by hovering over the color you wish to delete and clicking on the trashcan icon in the top right corner of the color’s tooltip. You can’t delete Document colors pulled from the Sketch file — only colors added via the Color Picker tool.

+
Asset Manager

Asset Manager is a dedicated area within Inspect to view and quickly download assets made available. Asset Manager is an extension of Inspect and is accessible only through Inspect.

GETTING ASSETS INTO ASSET MANAGER 

We run a screen migration process which allows customers to use Asset Manager on all prototypes (old and new) without the need to re-sync source files.

To get new assets into Asset Manger, you’ll need to mark layers for export within Sketch or Photoshop and sync the source file to your prototype in InVision. If no layers have been marked for export and synced to the prototype, the assets will not show in Asset Manager.

Marking layers for export in Sketch:

AsstMgr1.png

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

AssetMgr2.png

ACCESSING ASSET MANAGER

Once layers have been marked for export and the source file (Sketch/PSD) document has been synced to the prototype, you can access the Asset Manager through the top navigation bar within Inspect.

AsstMgr3.pngAssetMgr4.png

If you have not yet marked layers for export and synced your source files, Asset Manager will display this warning message to select assets for export:

AssetMgr5.png

INDIVIDUAL ASSETS

An individual asset is an asset marked for export. When viewing an individual asset, you’ll see:

  • A preview of the asset in the top part of the card
  • The name of the asset
  • The number of files
  • A download button to download this asset only (Note: If an asset is marked for export in .SVG format, you’ll be able to download the asset file, but we do not support previewing SVG files in web at this time.)

When you hover over an individual asset, you can select the bubble on the top left of the asset card. Once selected, the number of files displayed will switch to the dimensions of the asset. If the asset includes different files with different dimensions, we’ll display the default size within the source file.

AssetMgr7.png

DOWNLOADING ASSETS

Downloading individual assets
To download an individual asset, click the download button on the lower right side of the individual asset tile.

Downloading all assets from a prototype
To download all assets from the prototype, click on the Download All button. This generates a .ZIP file.

Downloading all assets from a screen
To download all assets from a specific screen, hover over the area with the screen title, then select the bubble on the the right. Then click Download Selected, which will generate a .ZIP file.

AssetMgr8.png

AssetMgr9.png

Downloading multiple assets from multiple screens

You can also select and deselect multiple assets from a prototype by hovering and selecting all assets you want to download, then clicking the download button. The toolbar displays the number of assets and files selected as well as the button to download selected assets as a .ZIP file.

AssetMgr10.png

 

+
A FEW THINGS TO NOTE
  • Keep your file as small as possible to limit processing time. If needed, you can break your file up into separate, smaller files.
  • When working with layer groups, select the specific element within the layer group, and then copy the generated code on the right hand side under the “Code” section.
  • If you have a group selected, you can mouse 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.