Features galore!

On this page you'll find every feature Proto.io offers. The gist is: a lot more than our competitors.

Authoring environment

Drag and Drop

Intuitive drag and drop interface.

UI Libraries

Hundreds of fully interactive and customizable native UI items from major mobile OS like iOS, Android and Windows.

Icon SVG Library

Large library with thousands of SVG icons that can be resized and recolored. Custom SVG image upload is also suported.

Standard device sizes

Jump-start your project by choosing one of the standard deives sizes such as iPhone 5, iPhone 6, iPhone 6 Plus, iPad, iPad Mini and more

Custom device size

Prototyping for a device other than the standard tablets or smartphones? Create your own custom sized device.

Custom device skin

Design and use your own custom device frame for devices such as kiosks, Internet Of Things (IOT) devices, smart watches and more.

Custom branding

Upload your logo to add a flavor of your own brand in the Proto.io interface for your staff and customers.

Start/Splash screens

Upload your own start/splash screen images for full iOS support when you add your project to the iOS home screen.

Fluid UI

Designing for portrait and landscape. Use the 'auto' width and height option for fluid UI.

Webview component

Embed a custom external HTML page to your prototype.

Assets manager

Upload your own assets (images, audio, video) or link an asset from an online resource.

Smart guides

Align and position your UI items with ease by enabling the smart guides option.

Grid system and rulers

Customize the grid size and add rulers to your canvas for easy alignment of elements.

Version control

Proto.io creates a new version/revision every time that you save your project. You can rollback to any previous saved version at any time.

Device orientation

Setup the orientation of all or individual screens within your prototype. Trigger and respond to events when users rotate their devices (orientation change events).

Touch events

Use any of the touch events available for mobile devices and touch screens, such as tap, double tap, hold, drag, swipe, pinch, zoom and more. Multi-touch events are fully supported.

Mouse events

All mouse events like click, double click and more are available for web and desktop prototypes.

Scrollable containers

Easily create scrollable areas and carousels. You can lock the scroll direction (vertically or horizontally) or allow omni-directional scrolling.

Nested scrollable containers

Nest scrollable containers with vertical and horizontal scrolling combined.

Pinch/zoom

Easily add pinch and zoom functionality to containers.

Custom colors

Add custom colors using the easy to use color picker.

Web fonts (Google fonts)

Use any of the standard fonts or any of the hundreds of Google web fonts that come with Proto.io.

Reusable containers

Create re-usable containers to apply the same content like menus or content blocks to more than one screen. Edit the content once and see it change in all the screens it is used.

Autosave function

Your project is automatically saved every minute. You can also save your project at any other time you wish to do so.

100% web-based, nothing to install

Start using Proto.io in minutes. There is nothing to download or install as it works in your web browser. Chrome, Safari and Firefox browsers are fully supported.

UI item arrangement

Drag to re-arrange and rename UI items on each screen using the side panel Item browser.

Assets gallery

Find and use a great number of stock images and icons in our asset library available automatically in every Proto.io project.

Group, lock, arrange, align

Easily group, lock, arrange and align UI items on a screen.

Position fixed on transition

Set UI items as fixed on the screen so that they don't move when a screen transitions to another with animation.

Parallel, sequential interactions

Any single event can trigger multiple interactions to happen either in sequence or concurrently.

Fire item's event

Trigger an event assigned to a different item even if it's on a different screen.

Interactions

Interactive UI Elements

Every UI item in the Proto.io library, from buttons and labels to flip switches, table rows and tab bars are fully interactive.

Interaction areas

Add your own interactions on top of anything else, for example when you want to create hotspots on top of your own uploaded designs.

Touch Events

Trigger events based on touch events such as tapping, pinching, zooming and more.

Keyboard Events

Trigger events based on key strokes.

Screen Events

Trigger events based on screen status, e.g. when a screen is shown or hidden as well as based on orientation changes, e.g. when a user rotates his/her device.

Actions

Use any of the available actions to respond to triggered events. Actions include Go to screen, Change state of a container or screen, animations, logic and more

Drag and Rotate

Add drag or rotate functionality to each UI item on your screen. Define the bounds and drag axis for each draggable item as well as snap (or free) drag.

Video / Audio support

Proto.io fully supports audio and video components and offers video and audio interactions like start/stop/pause audio and video. You can upload your own audio or video files or used 3rd party videos from Youtube.

Animations

Screen transitions

Add beautiful native-looking transitions when navigating between screens like slide, pop, flip, turn, flow and fade.

Animation interactions

Animate any item and trigger the animations based on events. Animations include move, scale, fade and more.

Animation easing

Apply any of the tens of easing available when animating items between states including quad easing, bounce, swing and more. You can also add cubic-bezier easing on any animation.

Animation states

Use screen or container states to animate any item on your screen using an intuitive and easy to use timeline system with start and end time or duration and easing effects.

Sharing & Collaboration

Publish

Publish your prototype multiple times and keep different published versions. You can share your published version with the public, anyone who has the link to the project or individual reviewers with password protection.

Collabotation and Comments

Publish your project and get feedback from other designers or reviewers that have access on the project. Users can add comments and create discussion threads to give feedback.

Copy/paste between projects

Easily copy/paste between projects. Work with other users concurrently on different projects and then merge your work to a single project using this feature.

Preview

Web preview

Preview your project in your desktop web browser. Orientation changes, zooming and more options are available.

Mobile preview (mobile browser)

Preview your project on the actual device in the native browser of each mobile OS like Mobile Safari for iOS and Chrome on Android. You can also add your project to your home screen.

Mobile preview (Proto.io Player app)

Preview your project on the Proto.io Player app for iOS or Android. You can easily zoom, fit to screen or pan each screen in your project. Preview projects with different screen sizes on each device.

Live preview

Enable live preview to allow reviewers to see changes to your project as they happen without having to publish it every time.

Fit to screen

Your project resizes to fit your browser screen for easy viewing. You can also zoom in and out or resize to original size.

Light and Dark device skins

Choose a light or dark frame for your device when previewing your project on the web browser.

Embed prototype

Easily embed your project to your website or blog by copying/pasting a few lines of embed code generated by Proto.io.

General

Extensive documentation, screencasts, examples and sample prototypes

Learn for the large library of documents, video tutorials, screencasts and demos available.

Webinars

Sign up for a free webinar to learn Proto.io or become an expert prototype designer. Two webinars are available each month, one for amateur and one for expert users.

Export

Export to PDF

Export your prototypes to a beatiful PDF document and include any screens that you pick. Organize your screens, titles and summary in the document.

Export to PNG

Export any or all of your screens to a zip file containing PNG images of the screens selected.

Export to HTML

Export your entire project to HTML for offline preview. All the project assets and necessary Javascript, CSS and HTML files are available with the download.

Security

Granular role-based security

Organize your projects and give access grandular access rights to users in relation to which projects they have access to and if they can edit or just preview projects.

128-bit encryption

Rest assured that your projects are safe, secure and private behind our firewalls and clustered cloud-based environemnt. All client-server communication is encrypted with 128-bit encryption.

Business Logic

Variables

Use variables for conditional logic or for storing and displaying data accross the screens within your project.

Change property (Item properties)

Dynamically trigger an event to change any property of any UI item including text, position, sizing, opacity and more.

Support and Documentation

Video tutorials

Proto.io offers a large number of video tutorials that will help you start or become an expert with Proto.io.

Webinars

Proto.io expert prototypes give free online webinars twice week for novice and expert users.

Documentation

A large library of documentation on various prototyping topics and Proto.io functionality is available.

Support

Proto.io support team is always available to help you with any questions you might have.

Recreate popular apps

Proto.io staff recreates and published prototypes of popular apps so that you can watch a video and learn how they are made.