Once you've created your prototype, you'll be prompted to add screens, which you can do via Craft Sync or manually.
To sync screens and design files directly from Sketch or Photoshop, check out this article on using Craft Sync.
If you use a design tool other than Studio, Sketch, or Photoshop, you will manually upload your local files as screens for your InVision prototype. The file formats currently supported are:
To learn more about file size limits when uploading, check out this article: What are the upload limits for InVision?
Manual screen uploads
To upload screens manually, open your project 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.
To replace an existing screen, drop a new file over the existing screen. If the new screen name is identical to the existing screen, the new screen will replace the existing screen. If the new screen name is not identical, it will be uploaded, but the original screen will remain.
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.
InVision V6 will display any image at 50% by using the prescribed high-resolution modifier, @2x (e.g.,
Full page retina images may double your prototype's loading time, so use only when necessary.
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
Be sure to adjust your screen dimensions to account for the status bar if necessary. For more details, see the section "Including the status bar in iOS."
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
You will need to edit your images before uploading or replacing your screens in InVision.
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.