×

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 left side of the page displays a canvas containing your current prototype screen. To go to the previous or next screen, use the Left and Right Arrow keys. The right sidebar contains all the information about your current screen.

At the top right of the page, you can view the screen name. To reveal the format settings, navigate to the right of the screen name and click the ••• button. Here you can choose from a variety of unit, code, and color types for inspecting your screen.

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

In the right side bar, you will notice the Layers tab. This tab displays a list of all layers for that screen in the exact order, layer type, and hierarchy found in the source Studio file.

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

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

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

measuring_two_layers.gif

Info

When no layers are selected, the Info tab will display screen-contextual information such as artboard dimensions and position, document colors, screen colors, and fonts.

DIMENSIONS

When no layers are selected, the Info tab will display Dimensions for the entire artboard. When a specific element is selected, several different dimensions and positions will be displayed. Click any of the dimensions to copy them to your clipboard.

dimensions_section.png

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

X and Y Beginning coordinate points, relative to the artboard
X2 and Y2 Ending 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 Info tab 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 them, and then click the color value to copy it to your clipboard.

colors_section.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 Info tab will display the Fonts section. This is a list of all fonts used in the prototype.

APPEARANCE

If you click a specific group or layer, the Info tab will display the Appearance section. This section contains a layer’s opacity and fill color. If you click a text layer in your prototype screen, the following attributes will also display:

  • Family
  • Weight
  • Alignment
  • Size
  • Line height

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

appearance_section.png

CONTENT

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

content_section.png

Code

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

code_section.png

Assets

With a layer or group selected, the Assets tab 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 tab.
  3. Under Export Assets, click the first drop-down arrow and choose a file type (JPG or PNG).
  4. Click the second drop-down arrow and choose a size (.5x, 1x, or 2x).
  5. Click the Suffix field and type an optional suffix for the file name.
  6. Click Download.

The asset will download directly to your computer.

asset_download.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 (
)