Supported formats
The following file formats are supported by Proto.io:
Images: 'JPG', 'PNG', 'SVG', 'GIF', 'JPEG'
Audio: 'MP3', 'OGG', 'AAC', 'WAV'
Video: 'MP4', 'OGV', 'WEBM'
Proto.io import from Sketch, Photoshop or XD: 'PROTOIO'
Vector Animation: 'Bodymovin/Lottie' (JSON)
Memory limitations
There is a size limit of 150MB for any file you upload in Proto.io.
Audio
Proto.io lets you include audio elements in your projects, by dragging onto your canvas or double clicking on the Audio UI element found in the Basic Library on the right pane. Once you do, the Properties Inspector opens up for you to specify the audio file to link to.
Supported formats
Formats currently supported by Proto.io are MP3, OGG, WAV, AAC.
Audio Interactions
Proto.io lets you build interactions related to your audio file. These can be based on the following events: ‘on audio play’, ‘on audio pause’ or ‘on audio end’.
Video
Proto.io lets you include video elements in your projects, by dragging onto your canvas or double clicking on the Video UI element found in the Basic Library on the right pane. Once you do, the Properties inspector opens up for you to specify the video file to link to.
Supported formats
Formats currently supported by Proto.io are MP4, WebM and OCG.
Video interactions
Proto.io lets you build interactions related to your video file. These can be based on the following events: ‘on video play’, ‘on video pause’ or ‘on video end’.
Youtube/Vimeo
You can choose to link to a YouTube or Vimeo video. Choose the respective Video type in the Properties inspector and then enter the Video ID. You should be able to see an image of that video in the video’s position in the canvas.
Side pane - Project assets
In the bottom right pane of the Proto.io Editor, you have a quick view of important project assets. You can just drag them onto the canvas directly, without needing to open Asset Manager.
Asset Manager
See Assets in Editor Basics.
Drag and Drop on canvas or upload
You can directly drag and drop an asset from your computer on your canvas or on the side quick assets pane. You can use ‘Select files’ to select specific files from your drive.
Using Dropbox for your assets
Proto.io lets you sync your Dropbox account to your Proto.io account to easily have access to your assets. When you update an asset in Dropbox that’s used in a Proto.io project, Proto.io will automatically update your project keeping all of your interactions and animations intact.
Furthermore, this is an easier way to organize your design assets - in folders, in your Dropbox account.
See Managing your Account - Setting up Dropbox
Dropbox Sync video https://vimeo.com/128968444
Import from Sketch, Photoshop, or XD
Proto.io lets you work with your Sketch, Photoshop, or XD files by importing them into your projects. You will have to first download the Proto.io Design plugin for Photoshop or the one for Sketch Proto.io Design plugin for Sketch. You can install the Proto.io Design Plugin for Adobe XD from the Adobe XD plugins menu.
See articles Import from Photoshop, Import from Sketch, or Import from XD
Sharing assets across the team
Dropbox sync enables design teams to keep using the tools they love, like Photoshop, Sketch, and XD while working together in a shared Dropbox.
Design teams use Dropbox because it makes working together simple. There's no second guessing on the latest version of a file and anything saved to a shared folder is instantly updated on everyone's devices.
