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


Inspect for Studio

This article addresses Inspect for Studio only. To learn more about using Inspect with Sketch and Photoshop, check out the Inspect for Craft Sync Getting Started Guide.

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.

Accessing Inspect

To access Inspect for your prototype:

  1. After publishing your Studio prototype to InVision, sign in to your InVision account.
  2. Navigate to the Projects page.
  3. Locate your Studio prototype, and click to open it.
  4. To open Inspect mode, click the </> icon at the bottom of the page, or use the keyboard shortcut I.
You must sync your screens directly from Studio 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 in Studio.

Inspect UI tour

In Inspect mode, the center of the page displays a canvas containing your current prototype screen. At the bottom right of the canvas, use the zoom buttons (studio-inspect-zoom-controls.png) to adjust your view of the current screen.

To go to the previous or next screen, use the Left and Right Arrow keys. The left sidebar contains the screen name and a list of all layers on the screen. The right sidebar contains all the other information about your current screen or selected layer.

At the top right of the page, you can view the selected screen, group, or layer name. Also at the top right of the page, you can reveal the format settings by clicking the settings icon (studio-inspect-settings-icon.png). Choose from a variety of unit, code, and color types for inspecting your screen.

studio-inspect-format-settings.png

The following are all available formatting options:

Units

  • Pixels
  • Percentage
  • Points
  • DIP

Code

  • CSS
  • LESS
  • SASS
  • SCSS
  • Stylus
  • Swift
  • Objective-C
  • Android (XML)

Color

  • Hex
  • RGBA
  • UIColor
  • ARGB

Layers panel

In the left sidebar, you’ll notice the layers panel. This panel displays a list of all layers for the current screen with the exact order, layer type, and hierarchy found in the source Studio file. At the top of the layers panel, you’ll see the name of the current screen.

studio-inspect-layers-panel.png

When you hover and click, Inspect will select the top-level group by default. To select the most deeply nested layers, hold Command while you hover and click.

Hovering over a specific group or layer in the prototype screen will highlight the item in light gray in the layers list. If you click a group or layer on the prototype screen, it will be highlighted blue in the layers list, and the layer group folder will expand. Conversely, clicking a layer or a group in the layers list will select that layer or group in the prototype screen.

To collapse all expanded groups in the layers list, navigate to the top of the layers panel, and then click the collapse icon (studio-inspect-collapse-layers-icon.png).

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

Item

Icon

Group

studio-inspect-folder-icon.png

Font

studio-inspect-text-icon.png

Shape

studio-inspect-rectangle.png or studio-inspect-oval-icon.png

Path

studio-inspect-path-icon.png

Component

studio-inspect-component-icon.png

Raster image

studio-inspect-image-icon.png

Measuring and layer position

To measure a layer’s position relative to the screen, click the layer—either in the prototype screen directly or in the layers list—and move the cursor into a blank space on the canvas. Pink guidelines with position dimensions will overlay the screen.

studio-inspect-measure-layer-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 in the prototype screen or in the layers list). The same pink guidelines with position dimensions will overlay the screen.

studio-inspect-measure-distance-between-layers.gif

Information panel

When no layers are selected, the information panel in the right sidebar will display screen-contextual information such as the artboard name, dimensions, colors, and layout.

studio-inspect-info-panel-no-layers-selected.png

Dimensions

When no layers are selected, the right sidebar will display Dimensions for the entire artboard. When a specific layer or group is selected, their corresponding dimensions are shown. Click any of the dimensions to copy them to your clipboard.

studio-inspect-artboard-dimensions.png

The following is a breakdown of what the available dimensions represent:

  • X and Y: Beginning coordinate points, relative to the artboard
  • Width and Height: Dimensions of the selected element

Document colors and screen colors

When no layers are selected, the right sidebar will display Screen colors. These are the colors used on the particular screen you’re viewing.

Click any of the color swatches to preview, and then click the color value to copy it to your clipboard.

studio-inspect-screen-colors.png

Layout

When no layers are selected, the Layout section appears in the right information panel. To show the layout columns on the artboard, toggle this feature on. Within the Layout section, you can click to copy values for the width, columns, gutter, and margin. For more information, check out this article: How do I show the layout columns in Inspect for Studio?

studio-inspect-toggle-layout.gif

Appearance

If you click a specific layer, the right sidebar will display the Appearance section. This section contains a layer’s fill color. If you click a text layer in your prototype screen, the following attributes will also display:

  • Family
  • Weight
  • Alignment
  • Size
  • Line height
  • Letter spacing

Click any of the appearance attributes to copy them to your clipboard.

studio-inspect-appearance-section.png

Content

If you click a text layer, the right sidebar displays the Content field. Click within that field to copy the text to your clipboard.

studio-inspect-content-section.png

Interactions

In the left-hand layers panel, layers with interactions are denoted with a lightning bolt (motion-transition-lightning-bolt__1_.png). In the Interactions section of the right-hand information panel, you can reveal hotspots by clicking the toggle on.

studio-inspect-transitions.gif

To learn more about inspecting motion transitions and using the motion player, check out this article: Can I inspect motion transitions in Studio prototypes?

This feature is in beta and is subject to change. If you have any questions or feedback, let us know.

Code

Clicking any layer or group will expose a code section in the right sidebar. This section will display the code snippet for the selected layer or group. To copy the code, hover over the code block and click the Copy button.

studio-inspect-copy-code.gif
The code that is displayed depends on which code type is selected in format settings. To access the format settings, navigate to the top right of the page and click the click the settings icon (studio-inspect-settings-icon.png).

Assets

With a layer or group selected, the Assets section will appear in the right sidebar.

Unlike Sketch or Photoshop files, downloading assets from Studio prototypes does not require you to mark items as exportable. All layers, groups, and components are exported to Inspect when you publish a Studio prototype to InVision Cloud.

To download an asset:

  1. Click the desired layer—either in the layers list or on your prototype screen.
  2. In the right sidebar, click the Assets drop-down arrow.
  3. Under Export Assets, choose a file type (JPG or PNG) and pixel density (.5x, 1x, or 2x).
  4. Click the Suffix field and type an optional suffix for the file name.
  5. Click Download.

The asset will download directly to your computer.

studio-inspect-download-asset.gif

Inspecting motion transitions

We now have a beta feature where you can inspect motion transitions created in Studio. To learn more, check out this article: Can I inspect motion transitions in Studio prototypes?

Sharing Inspect for Studio

Currently, only Team or Enterprise plans can share access to Inspect.

To give access to Inspect mode for your Studio prototype, you must first add someone as a Team member (if on a Team plan), or you must add them to your organization (if on an Enterprise plan).

Open Inspect mode, and copy the URL directly from your browser. Use this URL to share with others in your organization or team.


Learn something new

Getting Started Guides