Prototype settings
  • 24 Jan 2023
  • 5 Minutes to read
  • Dark
    Light

Prototype settings

  • Dark
    Light

Article Summary

This article provides answers for InVision V7

To confirm your version, check the upper right corner of your dashboard. On V6? Check out this article instead.

There are various ways you can customize your prototype and individual screen settings.

Interact with prototype screens

Once you sign in to InVision and find a prototype, click View screens.

The toolbar at the bottom of the screen is how you'll switch between the different prototype modes. By default, you're in Play mode. You can also access Build mode, Comment mode, and Inspect mode.

  • Play mode: Click through the screens, but you can't change anything about the prototype
  • Build mode: Change the appearance of individual screens
  • Comment mode: Leave and review comments
  • Inspect mode: Get precise measurements, copy CSS snippets, download assets and more

To the right of the main icons to switch modes, you can:

  • download the screen you're viewing
  • access global appearances
  • switch between light and dark modes

You can send the prototype to a freehand, or share it with others. Read Sharing InVision V7 documents for more information.

Set an appearance for an entire prototype

Adjust the appearance of all screens in a prototype with global appearances. In the toolbar, click Global appearances.

Desktop

For desktop prototypes, you can change the following appearance settings.

  • 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 color: Change the background color of the prototype.
  • Background image: Upload custom background 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.
  • Mode: Select different background image options:
    • Center: This positions the background image at the top center of the screen.
    • Tile: This creates a pattern by repeating the background image horizontally and vertically.
    • Tile horizontally: This creates a pattern by repeating the background image horizontally.
    • Fixed: This fixes the background image while the forefront screen scrolls vertically. Learn more about fixed background.
    • Stretch: This resizes the background images so it fills the viewport.
    • Fill: This resizes the background image so it fills the viewport, maintaining the image's original proportions.

Mobile

For mobile prototypes, you can change the following appearance settings.

    • Device skin: Choose the mobile device the prototype displays in.
    • Device color: Choose the color of the mobile device.
    • Background color: 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.
    • Background image: Upload custom background or use our built-in Auto-stretch option. For flat or non-textured designs, 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.
    • Mode: Select different background image options:
      • Center: This positions the background image at the top center of the screen.
      • Tile: This creates a pattern by repeating the background image horizontally and vertically.
      • Tile horizontally: This creates a pattern by repeating the background image horizontally.
      • Fixed: This fixes the background image while the forefront screen scrolls vertically. Learn more about fixed background.
      • Stretch: This resizes the background images so it fills the viewport.
      • Fill: This resizes the background image so it fills the viewport, maintaining the image's original proportions.
    • 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 article Why are my InVision V7 mobile prototype screens cut off at the top?
    • Status bar theme: Adjust the color of the text in the status bar. Choose between light theme (black text) or dark theme (white text).
    • Status bar color: Adjust the color of the status bar background.
    • Hide status bar: The status bar can be removed while viewing on the desktop only.
NoteThere is currently no way to remove the status bar for viewing a prototype on a mobile device.

Set an appearance for individual screens

You can customize the appearance of individual screens.

  1. In the toolbar, click Build mode.
  2. In the top-left corner, click Custom Appearance.

Here’s what the Custom Appearance menu lets you adjust in an individual screen:

  • Design alignment (desktop prototypes only): Align your design to the left, center, or right.
  • Zoom and scroll behavior(desktop prototypes only): 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 color: Change background color. Enter a hex code or select one of the preset colors.
  • Background image: Upload custom background or use our built-in options, Frame and Auto-stretch. If you're reviewing smaller work that is 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.
  • Background mode: Select different background image options:
    • Center: This positions the background image at the top center of the screen.
    • Tile: This creates a pattern by repeating the background image horizontally and vertically.
    • Tile horizontally: This creates a pattern by repeating the background image horizontally.
    • Fixed: This fixes the background image while the forefront screen scrolls vertically. Learn more about fixed background.
    • Stretch: This resizes the background images so it fills the viewport.
    • Fill: This resizes the background image so it fills the viewport, maintaining the image's original proportions.

Set a fixed background

You can set a fixed background for an entire prototype, or individual screens. A fixed background image won't move, while the forefront screen scrolls vertically (i.e., parallax-type scrolling)

To set a fixed background for an entire prototype:

  1. Navigate to the appropriate prototype and open a screen.
  2. In the toolbar, click Global appearances.
  3. Click Upload New.
  4. In the Mode dropdown menu, select Fixed.

To set a fixed background for an individual screen:

  1. In the toolbar, click Build mode.
  2. In the top-left corner, click Custom Appearance.
  3. Choose an image from Image background  or upload a new image.
  4. Click Background Mode > Fixed.

Change prototype orientation and device type

You can change the device type (Desktop, Tablet, Mobile, or Watch) and orientation of an existing prototype.

  1. Sign in to your InVision account.
  2. Navigate to your documents, and click the prototype you want to manage.
  3. At the top-right of the document landing page, click ••• More > Change device type.
  4. In the Choose a device type dialog, select the type you want to use.
    Note: If using any type other than Desktop, be sure to choose an orientation option.
  5. Click Change Type.

Was this article helpful?