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.
To access Inspect for your Studio prototype:
- After publishing your Studio prototype, sign in to InVision Cloud.
- Open your Studio prototype.
- At the bottom of the page, click the Inspect icon (), or use the keyboard shortcut I.
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:
- Android (XML)
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 display them 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:
- Line height
- Letter spacing
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.
To learn more about inspecting motion transitions and using the motion player, check out this article: Can I inspect motion transitions in Studio prototypes?
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.
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.
- Click Download.
The asset will download directly to your computer.
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
Open Inspect mode, and copy the URL directly from your browser. Use this URL to share with others in your organization or team.