After creating a prototype, you're ready to add your screens and bring your design to life.
Accepted file formats and size limits
The formats we support vary depending on whether you're uploading a screen or a source file.
For screens, we currently only support upload of source image files in the following formats:
We recommend uploading Photoshop and Sketch files via Craft Sync. You can also upload Studio files directly from Studio.
When uploading an image to your screens, there is a 10MB file size upload limit. Individual files can be up to 500 MB, and accounts can hold up to 10 GB in the InVision Sync Mac app and/or when uploading or dragging/dropping files into InVision via your browser.
The 10 GB limit does not apply to Enterprise plans.
Manual screen uploads
To upload your screens manually, click the pink + at the right of your project dashboard, click Upload Screens, and then select the files you'd like to add as screens.
Alternatively, you can drag and drop any .png, .jpg, or .gif file over an open space in the screens tab (dropping on an existing screen can result in replacing a screen, if screen names are the same).
Once you've updated screens and you're ready to replace old versions, please note that if you want to auto-replace screens (either when syncing from your design tool with Craft Sync or using the instructions below), each screen must have the same file name as the screen you are replacing, otherwise they'll upload as entirely new screens. If named identically, any screen you replace should retain all hotspots, templates, and comments associated with the previous version.
To replace one or more screens via Craft Sync, simply ensure the screen names (artboards) remain identical to the previous time you synced them, and click the Sync icon (). For more information on using Craft Sync, check out this article in our Knowledge Base: How do I publish prototypes from Sketch or Photoshop?
To replace a single screen in Cloud V7:
- In InVision, open your prototype.
- On the main screens page, locate the screen you want to replace.
- Drag and drop the updated screen image into the browser—directly over the screen it should replace.
To replace multiple screens in Cloud V7:
- In InVision, open your prototype.
- On the main screens page, click the pink + button, and then click Upload screens.
- Drag and drop all of the replacement screen images.
To replace screens previously uploaded as PDFs, you'll need to upload via source files. This will initially sync all screens of the PDF and subsequently will sync only the pages in the PDF that have been updated. Comments and hotspots should all remain in place.
Screen sizes for desktop and web
When designing for desktop and web browsers, 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 various resolutions.
If designing for a target resolution, there are two resources that can be helpful:
- This site includes common desktop devices and their resolutions.
- W3Counter breaks down screen resolutions by popularity each month.
InVision will display any image at 50% by using the prescribed high-resolution modifier, @2x. For example:
Use only when necessary as full page retina images may double your prototype's loading time.
Learn more about using @3x here.
Screen sizes for mobile and tablet
This website for screen sizes includes popular mobile and tablet screen resolutions.
Take care to adjust your screen dimensions to account for the status bar if necessary. See "Including the Status Bar in iOS" below for more details.
For the iPhone in particular, you can use this great resource from PaintCode. 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 particularly large screens may appear blurry when viewed in Safari on iOS. For more information, read this article in our Knowledge Base: Why are my images in iOS blurry?
Including the status bar in iOS
InVision will overlay a status bar on your designs by default, so including a status bar in your design isn't necessary unless you prefer to include it. If you find that the status bar InVision provides is cutting off the top of your mobile screens, click the My design starts below the status bar checkbox in your prototype settings—accessed via the ••• (More) menu at the bottom-right of the window when viewing the prototype.
If you have selected the My design starts below the status bar checkbox), you’ll need to leave appropriate blank space at the top of your design, as specified here for each model:
- iPhone X: 44px height
- iPhone 6 Plus: 60px height
- iPhone 4 – 6: 40px height
- iPhone non retina: 20px height
- Retina iPads: 40px height
- Non-retina iPads: 20px height
Additionally, note that you’ll need to use an external tool (e.g., Studio, Sketch, Omnigraffle, Adobe Photoshop, Pencil Project, or Microsoft Paint) to edit your images' sizes before uploading your image files in InVision.
Including the status bar and nav bar in Android
On Android prototypes, you can exclude the status bar in your design and check the box for My design starts below the status bar to let InVision take care of the status bar. Alternatively, you can account for the height of the status bar in your design.
For some Android devices, you might also need to account for the height of the nav bar in your design.
For more on the heights of these system UI elements, see Google's design spec for Android and Chrome OS.