×

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 works specifically with Sketch and Photoshop documents synced to prototypes via the Craft Sync plugin. You can also use Inspect with Studio files that have been synced to InVision as prototypes.

Accessing Inspect

  1. After syncing your Sketch, Studio, or Photoshop source file to InVision, sign in to your InVision account or open a prototype via the Craft Sync plugin.
  2. Open a prototype and select a screen.
  3. Click the </> icon at the bottom of the page.

Note: You must sync your screens with Craft Sync (or directly from Studio if it’s a Studio file) in order to access Inspect. 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 the Inspect for Studio guide.

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 screen’s dimensions, position, colors, fonts, code, asset preview, and asset download function.

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

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

layers_panel.png

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

Groups

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

To expand or collapse a group, click the drop-down arrow to the left of the group name. Layers that have assets available for download in Inspect are denoted with a download arrow in the lower-right corner of the layer’s icon.

download_asset_icon.png

Information panel

With a layer selected, the 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 (insert icon) 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 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.

Note: 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 % distance spacing.

position.gif

COLORS

Within the right-hand information panel is the Colors section where you can view Screen Colors and Document Colors. Screen colors are only those colors that are 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 will not see this palette.

Optionally, you can manually add document colors in Sketch. Click the color picker tool, and hover over your screen. Click the portion of your screen that contains the color you want, and it will be added to your document colors. Pressing Escape will deactivate the tool and bring you back to the selector tool.

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

sampled_colors.gif

Note: You can only delete document colors sampled from Inspect. If you need to remove an existing document color, you will need to remove it in the original Sketch file and sync your prototype.

FONTS

The Fonts section of the information panel lists the specific fonts used within the screen when you've selected the entire screen.

fonts_screen.png

If a text layer is selected, you can view the typeface, weight, style, and other properties of the text. You can also copy the text directly to your clipboard by highlighting the text in the Aa field, and clicking Command + C.

copy_text.gif

GRID

The Grid section of the information panel contains grid data synced through Craft Sync from the Layout Settings in Sketch.

grid_section.png

CODE

The code section of the information panel appears when you’ve selected a specific layer on the artboard or in the layers panel. It will display the visual attributes specific to the layer type in code form. To copy a single line of code, just click that line in the code. To copy the entire snippet, click Copy Code at the top right of the code section.

copy_code.gif

Note: When working with layer groups, select the specific element within the layer group, and then copy the generated code.

Selecting layers

You can access any layer in the layer hierarchy by navigating to the canvas and clicking the layer directly. All selections made on the canvas will be reflected in the layers panel. To deselect a layer, simply click outside of the screen’s bounds on the canvas or press the Escape key.

If you have a group selected, you can hover 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.

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

Measuring layer position

Selecting a layer will automatically display that layer’s position relative to the canvas.

layer_position.png

To display the relative distance between two layers, click the layer you want to measure and then hover over the layer you wish to measure it against (either on the canvas or in the layers panel).

relative_distance.gif

Sketch grid support in Inspect

The Grid feature is a dedicated area within the Inspect information panel where you can get data about the grid system. Grid only works with Sketch files that have been synced to InVision.

Enabling grid settings in Sketch

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

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.

layout_settings.png

In the layout settings modal, you can adjust your grid by changing the values.

layout_settings_grid_values.png

Accessing the grid panel in Inspect

If you’re using a grid in Sketch, we enable the grid by default in Inspect. When no elements are selected on the canvas, the grid section can be found in the right-hand information panel. Clicking any of the values in the grid section will automatically copy that value to your clipboard.

grid_panel.png

Selecting Show Grid toggles on the grid layout displayed on the Inspect canvas. When Show Grid Ruler is enabled, the grid ruler is positioned below the top toolbar. 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 an outer red border that matches the lines of the layer size. If you select a layer, the columns will stay highlighted as well.

Inspecting_grid.gif

Assets

Within Inspect you can view and quickly download assets by clicking the Assets tab at the top left of the page.

To get assets into Inspect, mark layers for export in Sketch 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 Inspect.

sketch_export.png

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

photoshop_export.png

Once layers have been marked for export and the source file (Sketch or Photoshop) has been synced to the prototype, you can access assets through the Assets tab in the top-left corner of Inspect.

Downloading assets in Inspect

DOWNLOADING INDIVIDUAL ASSETS

There are two different ways to download individual assets. They can be downloaded from the assets preview in the Inspect tab, or they can be downloaded from the Assets tab. We will describe both methods.

To download individual assets from the Inspect tab:

  1. At the top-left of the page, click the Inspect tab.
  2. Click the asset layer in the layers panel.
    Note: a layer containing an asset will have a folder icon with a download arrow.
    downloadable_asset.png
  3. In the right-hand information panel, the Assets preview should appear. Click the download icon (Image_2018-08-20_at_9.27.18_AM.png) next to the asset to begin the download.

asset_preview_download.gif

To download individual assets from the Assets manager:

  1. At the top left of the Inspect page, click the Assets tab.
  2. Hover over your desired asset and click the download icon (Image_2018-08-20_at_9.27.18_AM.png).

asset_tab_download.gif

DOWNLOADING MULTIPLE ASSETS

To download multiple different assets:

  1. At the top left of the Inspect page, 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, click Download Selected.

A .zip file will be generated and downloaded to your device.

multiple_asset_download.gif

DOWNLOADING ALL ASSETS

To download all assets from the prototype (every layer made exportable within Sketch):

  1. At the top left of the Inspect page, click the Assets tab.
  2. In the top-right corner, Click Download All.

A .zip file will be generated and downloaded to your device.

download_all_assets.gif

Note: It's not possible to adjust the export settings in Inspect. Manage your export settings within Sketch, and sync your prototype. Also, there's not a way to remove a layer from your assets within Inspect. You'll need to unmark the layer as exportable within Sketch and sync your prototype.

Generating 1x and 2x assets

In Sketch, you can generate both 1x and 2x asset exports by creating 1x and 2x export versions in the export panel.

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

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.
  • Inspect does not currently support public share links. To provide people access to Inspect mode, you will need to invite them to join the prototype, using these instructions: Adding Stakeholders
 

Getting Started: Feedback and Development (
)

Inspect for Craft Sync

Prev