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 Export -> 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 Export -> 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.
The exported index.html file does not contain the rendered HTML pages of the prototype. The prototype pages are rendered by the Proto.io rendering engine (Javascript), which means that you should not modify any exported HTML code as this may break the presentation and functionality of your prototype.
When exporting your prototype to HTML you get the fullscreen.html and the preview.html files that you can use to preview your offline project.
The fullscreen.html file will show you the project in a fit-to-screen mode without any navigation items or device skin. This is to get the look and feel as it will look in a browser view without any frames or any other UI around the project.
The preview.html file will show you the project as in the Proto.io player, wrapped in its device skin, in a fit-to-screen mode.
If you or your team are familiar with HTML you can also use the src/index.html file inside an <iframe> with your project’s dimensions.