Export to PDF and images (PNG)
You can export your project’s screens as a PDF, which can be useful for printing, sending by email or when preparing reports. You can also export your project’s screens as images in PNG format. This is useful for manipulating in image editing software, sending to people just to take a look at a particular design detail, for including some of your prototype’s screens on your website, in slideshow presentations, etc.
To access the export feature select the Download -> Capture screens to export to PDF/PNG option from the top toolbar in the editor interface. This will open a new browser window or tab.
You can navigate and interact with your prototype as you do in the Proto.io Player. Each time you need to take a screenshot of the screen, you can click on the Capture Screen button found on the right pane. That screenshot then appears on the right pane. You can re-organize and sort the screenshots by drag and drop. You can also click on a screenshot to enter a title and description that will appear in the published PDF document.
After you finish capturing your screens you can either download all images selecting the Export -> PNG option found next to the Capture Screen button, or Export -> PDF option to export a PDF containing all the screen captures with titles, descriptions and your account branding.
The exported images contained in the ZIP package do not include any device skins.
The Exported PDF includes the project title and your account logo (as uploaded in Account Branding options in your Dashboard). It also includes pages with the exported images and in some cases where supported with the device skin.
If you quickly want to export all your screens and screen states to images, you have the option to 'Export all screens to PNGs' (under Download, on the top toolbar) which gives you a zip file with all the images.
Export to HTML
Proto.io allows you to export your prototype so that it can be runnable as a standalone HTML page. When exported a zip package containing all necessary files to run and view the prototype is created. The zip file also contains the project data files, and all the assets used in the project (excluding linked assets that map to an online asset).
To export your prototype select Download -> Export project to HTML found on the top toolbar in the Editor. When the export package is completed, a button that links to download the exported zip package is available. You can extract that page and run the index.html page in the root folder to view your prototype.
Exported prototypes do not include device skins. When opened in a browser they present the prototype as it was contained in the skin wrapper. Many prototypes have default orientation as ‘portrait’. Have in mind that when opening the exported prototype in a browser, the orientation as defined by the browser is landscape due to the browser’s viewport dimensions. If you do not see your prototype or if you see the default landscape screen, all you need to do is resize your browser window so that it matches portrait orientation, i.e. the width of the browser is less than the height of the browser. By doing that, the prototype detects the portrait orientation and displays the portrait default screen. Sometimes a browser refresh might be necessary after resizing your browser.
If you open the frame.html file, then you will also see the respective prototype’s device skin.