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!
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).
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.
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.
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.
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:
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.
You can select an asset contained within a group using Command + Click. View the panel on the right
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
- Code: Displays the visual attributes specific to the layer type in code form
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.
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 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.
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). 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 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.
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.
If you select a layer, the columns will stay highlighted as well.
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.
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 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:
Marking layers for export in Photoshop by adding ".png" or any other file format to the end of the layer or group name:
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.
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:
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.
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.
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.
Generating both 1x and 2x assets
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, Layerfirstname.lastname@example.org.
In Sketch, you can generate both 1x and 2x asset exports by creating 1x and 2x export versions in the export panel.
- 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.