There are various ways you can customize your prototype settings.
More menu (•••)
You can adjust additional settings by clicking the ••• (More) menu at the bottom-right of your screen in Build mode.
As seen in the screenshot below the list, here's what the ••• (More) menu lets you adjust in a desktop prototype:
- Design Alignment: Align your design to the left, center, or right.
- Zoom and Scroll Behavior: Here's a little more information on how the zoom/scroll feature behaves:
- Normal: This leaves your screen as-is.
- Hide Horizontal Overflow: This prevents wide screens from scrolling left or right when they expand past your browser view.
- Scale Down to Browser Width: This scales your design down to the width of your browser window if it's smaller than the design. The scaling is active and won't require a browser refresh.
- Background: Upload custom backgrounds, change colors, or use our built-in options, Frame and Auto-stretch. If you're reviewing smaller work that's not necessarily small design, it can be handy to drop it into a Frame. For flat or non-textured design, Auto-Stretch can save you time by repeating the edge pixels from your design to generate a background automatically. It even works with animated GIFs!
You can also set a fixed background (currently only for web prototypes). This feature allows you to fix the background while the forefront screen scrolls vertically (i.e., parallax-type scrolling).
Here's how to set your fixed background:
- Navigate to the appropriate prototype.
- Open a screen in Build mode.
- At the bottom-right of the browser window, click the ••• (More) menu icon.
- Under the Background heading, click Upload New.
- Click the lock icon.
Mobile prototypes have additional settings, as seen in the screenshot below:
- Status Bar Style: If you want your design to start below the status bar, select the My design starts below the status bar checkbox. For more information on this setting, see the "Including Status Bar in iOS" section above.
- Background: In mobile prototypes, the background color is dependent on the content in the screen's image. InVision pulls the four corner pixel colors and tries to match the background as closely as possible. If you've set a background color in your design, that color should remain as the background color.
- Foreground: Choose between light or dark.
- Hide status bar: The status bar can be removed while viewing on the desktop only.
There is currently no way to remove the status bar for viewing a prototype on a mobile device.
Prototype orientation and types
To change your device type (Desktop, Tablet, Mobile, or Watch) and orientation:
- Sign in to your InVision account.
- Navigate to your documents, and click the prototype you want to manage.
- At the top-right of the document landing page, click the ••• (more) button, and then click Change device type.
- In the Choose a device type dialog, click the type you want to use.
If using any type other than Desktop, be sure to click an orientation option.
- Click the pink Change Type button.