Adding Screens

This article provides answers for InVision V6 To confirm your version, check the upper right corner of your dashboard. On V7? Check out this article instead.

Once you've created your prototype, you'll be prompted to add screens, which you can do by syncing via Craft Sync or manually.

Syncing design files

To sync screens and design files directly from Sketch or Photoshop, check out this article on using Craft Sync.

Manual screen uploads

If you use a design tool other than Sketch, you will manually upload your local files as screens for your InVision prototype.

To upload screens manually, open your document and, at the top right, click the pink plus button. Click Upload Screens and select the files you want to add as screens.

You can also drag and drop any PNG, JPG, GIF, or PDF file over an open space in the screens tab.

Supported formats

The file formats currently supported when manually uploading screens are:

• GIF
• PNG
• JPEG
• PDF

To learn more about file size limits when uploading, check out this article: What are the upload limits for InVision?

Screen sizes for desktop and web

When designing for desktop or web, you can either size your screens for a specific target resolution or take advantage of features like auto-stretch backgrounds, scaling of screens down to browser width, and the screen alignment options to make your screen suitable for a variety of resolutions.

If designing for a target resolution, these two external resources can be helpful:

• Materialdesign.io includes common desktop devices and their resolutions.
• W3Counter breaks down screen resolutions by popularity each month.

Retina images

InVision V6 will display any image at 50% by using the prescribed high-resolution modifier, @2x (e.g., [email protected]).

InVision does not currently support @3x. To learn more, check out this related article: Does InVision support @3x design?

Screen sizes for mobile and tablet

Materialdesign.io also lists several popular mobile and tablet screen resolutions.

For the iPhone specifically, this article from paintcodeapp.com is a great resource: The Ultimate Guide To iPhone Resolutions

Remember, mobile prototypes can scroll, so the screen heights listed below are simply minimum heights for your designs. When deciding what size screen to use, you should note that large screens may appear blurry when viewed in Safari on iOS. For more information, check out this article: Why are my images in iOS blurry?

Including the status bar in iOS

Because many designers leave space at the top of their designs for a device's status bar, InVision by default overlays the status bar on the design.

The following are iOS status bar heights that you may need to account for:

• iPhone X: 44px height
• iPhone 6 Plus: 60px height
• iPhone 4–6: 40px height
• non-retina iPhones: 20px height
• Retina iPads: 40px height
• Non-retina iPads: 20px height

If you don't include extra space in your design and your mobile screens appear cut off at the top, you can adjust the starting point of your screen. To learn more, check out this article: Why are my screens cut off at the top?

Including the status bar and nav bar in Android

Just like with iOS prototypes, InVision overlays a status bar on the design by default. You can adjust your screen sizes accordingly, or you can start your designs below the status bar.

For some Android devices, you might also need to account for the height of the nav bar in your design.

For more on the height of these system UI elements, see Google's design spec for Android and Chrome OS.