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:
|
Top of the inspector panel |
Scrolling | Select one of four scrolling options:
|
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:
|
Under Preview in the inspector panel or In the preview modal, via the settings icon ( ![]() |
Scaling | With the preview modal open, you can set scaling preferences for previewing the prototype:
|
Top of the preview modal |
Editing preview settings
To edit your preview settings:
- Select one or more artboards.
- 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:
- In the upper-right corner of the canvas, click the preview icon (
).
- 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:
- Select one or more artboards.
- Near the top of the inspector panel, click the Preset dropdown arrow.
- 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:
- Select one or more artboards.
- Just above the Preview heading, enter your preferred dimensions in the Width and Height fields.