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: None: The 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 (), 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 (), 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 ().
2. To the left of settings icon () 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.