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


Previewing Studio Prototypes

The Studio preview settings make it easier than ever to preview and present your prototype in an environment that's as realistic and immersive as possible. You can get familiar with the various preview settings using the following table, and the instructions that follow will help you quickly edit your settings as needed.

Settings Available Options Location
Preset Select the one of many popular device sizes for your artboards:
  • Web: Choose one of 4 popular device models.
  • Phone: Choose one of 10 popular device models.
  • Tablet: Choose one of 6 popular device models.
  • Watch: Choose one of 5 popular device models.
  • Computer: Choose one of 6 popular device models.
  • TV: HD or UHD
  • Social Media: Choose one of 7 popular options.
Top of the inspector panel
Scrolling Select one of four scrolling options:
  • NoneThe prototype will not scroll.
  • Horizontal: The prototype will scroll from side to side.
  • Vertical: The prototype will scroll from top to bottom and vice versa.
  • Both: The prototype will scroll both horizontally and vertically.
Top of the preview modal
Viewport Your viewport dimensions are shown in the Preview section of the inspector; however, to adjust the dimensions, you'll need to select one of the presets listed above or customize your viewport by editing the Width and Height fields below the Preset dropdown. Under Preview in the inspector panel
Frame Choose an option for the area between the preview viewport and the edges of the preview window.

In addition to the frame options available for specific presets, all Studio presets have these three frame options:
  • Shadow: Add a subtle shadow effect to the edges of the viewport.
  • Border: Fill the area with a color.
    To change the color, open the preview modal, click the settings cog icon (studio-preview-settings-gear-icon.png), and then click the color box below Appearance.
  • None: The area will be completely white.
Under Preview in the inspector panel

or 

In the preview modal, via the settings icon (studio-preview-settings-gear-icon.png), if the Override artboard settings checkbox is selected
Scaling With the preview modal open, you can set scaling preferences for previewing the prototype:
  • 100%View the prototype at full size—pixel for pixel as you've designed it.
  • Fit: View the prototype scaled to fit the size of the preview frame, so you will always see the whole artboard.
  • Fill: The prototype will resize to fill the width and height of the preview frame as you resize it.
Top of the preview modal

Editing preview settings

To edit your preview settings:

  1. Select one or more artboards.
  2. Under Preview in the inspector panel, adjust the following settings as needed: Scrolling, Viewport, and Frame (all further described in the table above)

With the preview modal open, you can override these preview settings as needed.

Editing scaling settings

To edit your scaling settings:

  1. In the upper-right corner of the canvas, click the preview icon (studio-preview-prototype-icon.png).
  2. To the left of settings icon (studio-preview-settings-gear-icon.png) in the preview modal, click the Scaling dropdown and select your preference:
    • 100% - Display at Full Size
    • Fit - Scale Down to Fit
    • Fill - Scale Down or Up to Fill

Resizing artboards

To resize your artboards using a popular device size:

  1. Select one or more artboards.
  2. Near the top of the inspector panel, click the Preset dropdown arrow.
  3. Hover over your preferred general device type and click the specific model you want to use (all further described in the table above).

To resize your artboards using custom dimensions:

  1. Select one or more artboards.
  2. Just above the Preview heading, enter your preferred dimensions in the Width and Height fields.

Learn something new

Craft for design

With Craft designers can speed up their design workflow in Sketch. You can use Craft tools to quickly populate your designs, prototype, and sync design files to InVision.

Learn Craft

Intro to Design System Manager

InVision Design System Manager gives you one centralized place to maintain all of your brand and UX components across design and code–providing the speed and confidence to power design at scale.

Learn DSM

Getting started with InVision Enterprise V7

InVision Enterprise provides a connected workflow that brings together the tools, people and processes needed to build great digital experiences at scale.

Learn InVision V7

Organization setup and team management

Let’s get your organization set up right. You can modify account settings, and integrate with the tools your team already uses. Then invite your team and set permissions.

Learn setup & management

Image of Craft Logo