×

Inspect for Studio

Note: 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.

Note: 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 (zoom-buttons.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 ••• (more) icon. Choose from a variety of unit, code, and color types for inspecting your screen.

inspect-format-settings.png

The following table displays 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.

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 click the collapse icon (collapse-icon.png).

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

Item Icon
Group Image_2018-08-17_at_9.38.56_AM.png
Font Image_2018-08-17_at_9.39.40_AM.png
Shape Image_2018-08-17_at_9.40.02_AM.png or oval-icon.png
Path Image_2018-08-17_at_9.40.47_AM.png
Component Image_2018-08-17_at_9.39.24_AM.png
Raster image Image_2018-08-20_at_11.11.29_AM.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.

measure-position-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.

relative-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, fonts, and layout.

inspect-information-panel.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.

inspect-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 both Document colors and Screen colors. Document colors in Inspect are defined as all the colors used in the prototype. Screen colors are 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.

inspect-colors.png

Note: If you have added colors to the document colors palette in Studio, they will not necessarily appear as document colors in Inspect. Only the colors actually used in the layers will appear in Inspect.

FONTS

When no layers are selected, the right sidebar will display the Fonts section. This is a list of all fonts used in the prototype.

inspect-fonts.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?

inspect-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.

inspect-appearance.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.

inspect-content.png

CODE

Clicking any layer or group will expose the Code section in the right sidebar. This section will display the code snippet for the selected layer or group. To copy the code, click the Copy Code icon (Image_2018-08-20_at_11.34.33_AM.png).

inspect-code.png

Note: 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 ••• button.

Assets

With a layer or group selected, the Assets section will appear in the right sidebar. If any assets are available for the selected layer or group, you will see a preview of the asset.

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.

download-asset.gif

Sharing Inspect for Studio

Inspect does not currently support public share links. 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 add them to your organization (if on an Enterprise plan).

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

 

Getting Started: Feedback and Development (
)

Inspect for Studio

Prev