Browser not supported

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


Previewing Studio Prototypes

The Viewport, ScalingAppearance, and Model settings accessed in the preview modal make it easier than ever to preview and present your prototype in an environment that's as realistic and immersive as possible.

To open your preview settings:

  1. In the upper-right corner of the canvas, click the preview icon (studio-preview-prototype-icon.png).
  2. In the upper-right corner of the preview modal, click the settings gear icon (studio-preview-settings-gear-icon.png).
  3. With the preview modal open, click the corresponding drop-down arrow to adjust the following settings: Viewport, ScalingAppearance, and Model (all further described in the table below)

Settings

Available Options

Viewport

Set the viewing area for your prototype preview:

  • Auto: Studio will automatically detect the optimal viewing area for the prototype.

  • Full Window: The prototype will resize to fill the width and height of the preview window as you resize it.

  • Phone: Choose one of 10 popular device models.

  • Tablet: Choose one of 6 popular device models.

  • Computer: Choose one of 6 popular device models.

  • Watch: Choose one of 5 popular device models.

  • Web: Choose one of 4 popular device models.

Scaling

With your viewport set to Auto, you can set scaling preferences for the prototype preview:

  • NoneView the prototype pixel-for-pixel as you've designed it.

  • Fit: View the prototype scaled to fit the size of the preview window, so you will always see the whole artboard.

Appearance

Choose an option for the area between the preview viewport and the edges of the preview window:

  • Device: If your viewport is set to any phone, tablet, computer, or watch, you will see the Device option in the Appearance dropdown list.

  • Shadow: Add a subtle shadow effect to the edges of the viewport.

  • Border: Fill the area with a color.

    To change the color, click the color box to the right of the Appearance drop-down list.

  • None: The area will be completely white.

The appearance settings are not available if you set your viewport to Full Window.

Model

If your viewport is set to any phone, tablet, or watch that is available (physically) in multiple colors and your appearance is to Device, you will see a Model dropdown list, which you can use to select your preferred device frame.

It's not currently possible to change the model (device frame) of a computer in the preview viewport.


Learn something new

Getting Started Guides