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 for Studio 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.
To access Inspect for your prototype:
After publishing your Studio prototype to InVision, sign in to your InVision account.
Navigate to the Projects page.
Locate your Studio prototype, and click to open it.
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 () 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 as well as a thumbnail preview of the selected item. Just below that, you can reveal the format settings by clicking the Settings icon (). Choose from a variety of unit, code, and color types for inspecting your screen.
The following are all available formatting options:
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.
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 as well as reveal the layer visibility icon (), which you can click to show or hide the layer. If you click a group or layer on the prototype screen, it will be highlighted blue in the layers list (and reveal the visibility icon), 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 ().
The following is a list of items and their associated icons that you’ll notice in the layers list:
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.
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.
When an artboard, group, or layer is selected, the information panel in the right sidebar will display screen-contextual information such as the artboard name, dimensions, colors, and layout.
When an artboard is 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.
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
If the artboard you have selected contains any color/s, the right sidebar will display Colors. If the layer you have selected contains any color/s, the right sidebar will displaythem next to Fill or Border.
Remember, you can click the Settings icon () in the information panel to select your preferred color data format: Hex, RGBA, UIColor, or ARGB.
Click any of the color swatches to preview, and then click the color value to copy it to your clipboard.
When an artboard is 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?
If you click a specific layer, the right sidebar will display details about appearance. For example, this section contains the fill color info. If you click a text layer in your prototype screen, that area will also display the following attributes:
Click any of the appearance attributes to copy them to your clipboard.
If you click a text layer, at the top of the right sidebar you'll see a text field—the field name is based on the content in the given text layer. To copy the text to your clipboard, click the Copy icon ().
In the left-hand layers panel, layers with interactions are denoted with a lightning bolt (). In the Interactions section of the right-hand information panel, you can reveal hotspots by clicking the toggle on.
This feature is in beta and is subject to change. If you have any questions or feedback, let us know.
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.
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 settings icon ().
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:
Click the desired layer—either in the layers list or on your prototype screen.
In the upper-right corner of the information sidebar, click the Download icon ().
In the Export asset module, click each dropdown arrow and select a file type (JPG, PNG, or SVG) and pixel density (.5x, 1x, or 2x).
To enter an optional suffix for the file name, click into the Suffix field.
The asset will download directly to your computer.