Drag & Drop Building Blocks

UI Component Libraries

Hundreds of fully interactive and customizable native UI items from OS like iOS, Material Design, Windows and more. Just drag & drop anything from buttons, menus, inputs, sliders or others to get started.

Templates

Mix-and-match ready-made, customizable templates to create your prototype and wireframes in minutes. Customize the content blocks and add interactions.

Patterns

Out-of-the-box UI components of the most commonly used functionality for you to easily add to your project.

Icon library

A huge library with thousands of icons that can be resized and recolored.

Animated icons library

Pick from a large collection of animated icons ready to be used straight within the Proto.io editor.

Sound Effects library

Make your prototype Pop! Find the perfect sound effect in our Sound effects library and add sounds to your interactions and animations.

Audio component

Upload your own audio files and use interactions like play, pause and stop to control the audio. Trigger another interaction when the audio finishes, or is played/stopped by the user.

Video component

Upload your own video files or use 3rd party videos from YouTube or Vimeo. Have full control of the video with the video-specific interactions, triggers and settings.

Lottie Animation (After Effects)

Use the Bodymovin plugin to export an After Effects animation and bring it into proto.io as a Lottie file. Autoplay or loop the animation, or use interactions to play and stop it.

Scrollable containers

Easily create scrollable areas and carousels. Allow vertical or horizontal scroll, or both. Make any part of the screen scrollable, and nest your scroll areas to create any scroll effect you need.

Reusable containers

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

Webview component

Embed a custom external HTML page to your prototype.

HTML code component

Add HTML code to your prototype through the HTML code component.

‍

Interactions

Actions

We pride ourselves on the wide range of actions you can trigger: Change screen, Scroll, Animate, Use Logic, Control audio, video, Gif, Email, Open URL, Make a call and much more.

Touch events & Gestures

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, mouseover, right-click and more are available for web and desktop prototypes.

Keyboard Events

Trigger actions when a key is pressed. Bind different actions to each key, depending on the screen or state you are in.

Screen Events

Trigger actions 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 their device.

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, and trigger an interaction on drag or on rotate.

Parallel, sequential interactions

Any single event can trigger multiple interactions to happen either in sequence or concurrently. Trigger any interaction after a delay.

Interactions wizard

Easily create the most common interactions through the Interactions wizard. Just drag and drop a connection from the Wizard icon onto UI components, containers, screens, and states to auto-generate an interaction.

Fire item's event

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

Interactive UI Elements

All UI items, from buttons to flip switches, lists and tab bars are fully interactive. Special components such as Input fields, expose custom interactions, like on "Key down", and give back the Input value.

Interaction areas

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

Video & Audio controls

Control your audio and video from any UI item with custom play, pause and stop interactions. Trigger another action when the Video or audio finishes, or when the user manually plays or stops it.

Variables

Use variables for conditional logic or for storing and displaying data across the screens of your project.

Change item properties

Dynamically change any property of any UI item including text, position, sizing, opacity and more individual component specific styling options.

Animations

Screen transitions

Add beautiful native-looking transitions when navigating between screens like Slide, Fade, Pop, Turn, Flow and Flip.

Animations

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

States & Timeline animations

Use screen or container states to animate any item on your canvas using an intuitive and easy to use timeline system by tweaking the animation duration, delay and easing effect.

Easings Manager

Apply an easing function when animating items picking from linear, ease-in, ease in-out, ease out, Cubic-Bezier and Spring RK4. Edit its settings and visualize your animation.

Easings presets

Create and manage your own reusable easings presets. Set the default easing for all new animations.

Design

Easy drag-and-drop upload

Drag and drop files from your desktop directly to your canvas for immediate upload. Easily find all your assets in the quick assets panel.

Paste to upload image

Copy an image from the design tool of your choice and just paste it into proto.io to upload with just one keyboard command.

Masking tool

Upload your images from anywhere and easily mask, crop, frame or create amazing animations without ever having to leave the Proto.io editor.

Plugins for Sketch, XD & Photoshop

Instantly transfer your Sketch, Adobe XD or Adobe Photoshop files into Proto.io using our Design Plugins, maintaining all layers and prototyping links. Use the extensive Proto.io prototyping and interactivity features to add life to your designs.

Dropbox sync

Sync your Dropbox account with Proto.io and use your Dropbox assets in your project. When you make changes to the Dropbox assets, they will be automatically updated, keeping interactions and animations intact.

Standard device sizes

Start your project by choosing one of the standard device sizes. A huge range of devices including popular mobile phones, tablets, standard web browser sizes and smart phones are ready to choose from.

Custom devices & skins

Prototyping for a device other than the standard smartphone, tablet, or web browser size? Create your own custom sized device and upload your own device skin.

Assets manager

Upload your own assets (images, audio, video) or link an asset from an online resource. Keep them organized in folders. Upload account-wide assets, accessible across all projects.

Fonts manager

Use Adobe fonts, Google Fonts or upload your own web fonts (including the ones you created) to maintain brand consistency.

Saved color palette

Choose your project's color palette and save it in our easy to use color picker for faster-than-light designing.

Eyedropper tool

Use the eyedropper tool available in the color picker to select any color, in and out of the editor, to use in your prototypes.

Gradient colors

Create and animate vibrant gradients in Proto.io.

Filters & Color Adjustments

Apply shadows, blurring and color adjustments to images or any other UI component to get the exact result you are looking for. Animate these to effects to add spice to your prototypes.

Editor

100% Web-based Editor

No need to download any software. Just log in through a browser window to access your work.

Drag and Drop

Intuitive drag and drop interface for all building blocks for rapid prototyping

Group, lock, arrange, align

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

Keyboard Shortcuts

All the keyboard shortcuts you are accustomed to in a design tool are available in Proto.io. Switch between tools and continue working seamlessly.

Grid system and rulers

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

Smart and distance guides

Align and position your UI items with ease. Check the distance between any two items at for pixel-perfect designs.

Custom guides

Add custom guides to easily snap items to any position you need.

Device orientation

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

Light and Dark theme

Use the Editor in your preferred theme. Choose the pasteboard color you like.

Screen navigator

Get overview of all your project's screens and screen states.

Copy between projects

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

Version control

Proto.io saves a backup every time that you save your project, and one automatically every minute. You can rollback to any previous saved version at any time.

Integrations

Sketch

Export your Sketch files into Proto.io, maintaining all layers and prototyping links. Create high-fidelity prototypes in minutes by easily adding interactions and animations to your layers.

Adobe XD

Use the Proto.io Plugin for Adobe XD to bring your XD files into Proto.io. Use the extensive prototyping, animation and interactivity capabilities to further enhance your designs and prototypes.

Adobe Photoshop

Use the Proto.io Plugin for Photoshop to bring your Photoshop files into Proto.io. Add interactions and animations to add life to your designs.

Google Fonts

The entire Google Fonts library is at your fingertips. Import the fonts you need and they will then be available to use on any text layer, everywhere in your project.

Adobe Fonts

Sign in to your Adobe CC account through the Proto.io Font Manager to make any one of your Adobe Fonts available to use in your project.

Dropbox

Connect your Dropbox account with Proto.io and sync your Proto.io assets into Dropbox. Update any asset in your Dropbox folder to automatically update it in Proto.io, keeping interactions and animations intact.

Jira Plugin

Use the Proto.io Plugin for Jira to embed your interactive prototypes into your Jira issues and ensure that your entire team is in sync.

Confluence Macro

Embed your interactive Proto.io prototypes into your Confluence pages, ensuring your entire team is in sync. Keep your prototypes up-to-date with Proto.io's simple share link updating system.

Trello Power-Up

Embed your Proto.io prototypes into your Trello cards using the Proto.io Power-up for Trello and ensure that your entire team stays in sync. Interact with the prototypes without ever having to leave Trello!

Export

Export to PDF

Export your prototype to a beatiful PDF document including all screens. Capture snapshots of your prototype, add titles and summary and organize only the screens you want in your PDF document.

Export to PNG

Easily get an export of all your screens as PNG images. Interact with your prototype and capture snapshots at will, to download as PNGs.

Export UI assets

Export individual components, groups of components, or entire screens and containers to PNG. Choose the export pixel density, depending on your needs.

Export to HTML

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

Preview

Web preview

Preview your project as you go on your web browser. Easily switch between screens. Orientation changes, zooming and more options are available.

Mobile preview (Proto.io Player app)

Preview your mobile project on the Proto.io Player app for iOS or Android for a native experience. Easily zoom, fit to screen or pan if previewing a project of dimensions other than the device dimensions.

Offline preview

Download your prototype on your device using the Proto.io iOS or Android Player app and access it anywhere, anytime.

Customizable preview colors

Choose a light or dark frame for your device when previewing your project on the web browser, or remove the frame completely. Change the background color of the preview page, to complement your prototype colours.

Hotspots

Choose whether show or hide interaction hotspots on tap when previewing. Turn them on to help your users interact with your prototype, and disable them if you are user testing.

Click effect

Show a Click effect on every tap. Especially useful to focus attention on mouse clicks if you are creating a movie or GIF recording.

Collaboration

Share

Share your prototype multiple times and keep different Share links. Use different Sharing and Security settings for each link.

Share Publicly or Password Protect

Share your prototype with anyone (get a shareable link), or add password protection for extra security.

Share with Reviewers

Share your prototype with Reviewers to give access to selected users only (sign-in required). All paid accounts have unlimited Reviewer slots.

Snapshot or live versions

Share a version of your prototype taken at a particular point in time, or a live version that always points to the latest version. Share a snapshot to continue working without fear of breaking the preview, and update when finished.

Share link analytics

Keep track of all your project's Share links and see when they were created, how many views they had, how many people visited and much more.

Share link management

Have full control over your share link's state. Pause the Share link, delete it indefinitely, or change the link to a new Share URL for extra security.

Comments

Share your project and get feedback from other designers or reviewers. People can add comments and create discussion threads to give feedback.

User testing

Get the special Share link and use it at one of the popular user testing platforms (UserTesting, UserZoom, Userlytics, Lookback, UXArmy) to set up and conduct user tests to validate your prototype. Requires an account at those platforms.

Embed prototype

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

Account Management

Project Management

Manage your projects' settings, as well as who has access to them. Organize your projects in groups (available in some subscription plans)

User Management

Manage your account's users and their roles (owner, admin, designer and reviewer).

Custom branding

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

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 manage, edit or just preview projects as reviewers.

Support & Documentation

Documentation

A large library of documentation on how you can get the most out of Proto.io.

Video tutorials

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

Support

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

Proto.io Spaces

A showcase of Proto.io prototypes made by the Proto.io community. Import projects in your account to learn how they were built.

Subscription

Fully featured plans

Take advantage of all proto.io features across all our paid plans.

4 different pricing plans

Choose out of 4 pricing plans depending on your needs in terms of projects and users.

Archived projects

Archive any projects that are finished or that you are not actively working on, and they will not count against your plan's project quota. Never delete work again.

Park account

Taking a break? Park your subscription plan for a small fee to avoid losing your projects, users and other data. While parked you can still preview existing projects, but cannot share or make changes.

Enterprise plan

Tailor your plan with additional users, unlimited projects, enterprise-grade security, analytics, priority support and more.

Educational plans

We care about how prototyping is taught in educational institutions. Contact us to learn more about our tailored plans designed to offer educators and students all the benefits at a special price.

Student & Non-profit discount

Students and non-profit organizations can benefit from 50% discount. Just contact us from your academic or organization emai for more info.

Free plan

Can't afford any of the available plans? You will be able to convert your account to a Free, limited-featured plan as soon as your trial expires.

Security

256-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 256-bit encryption.

GDPR

We value your privacy and strive to make our policies clear and transparent to our users. We always strive to make all our policies meet the high General Data Protection Regulation (GDPR) standards.

ISO/IEC 27001

Proto.io has implemented an Information Security Management System (ISMS) in line with the International Standard for Information Security, ISO/IEC 27001.

Enterprise

Enterprise Grade Security

Control and manage users' access from one centralized location.

Activity Reports

Be in the know on user's activity and manage your account and project access more effectively.

IP Access Restrictions

Control the network locations from which users can access Proto.io with IP Access Restrictions.

Single Sign-On (SSO/ SAML)

Smoothly integrate Proto.io with your SSO for easy access and secure team/ user management.

Domain Access Restrictions

Restrict sharing only to internal team members of your company or set customized restrictions based on email domain.

Entreprise Class Encryption

256-bit SSL Encryption of all communication.

Disable Public Sharing

Prevent unauthorized access to your projects by disabling public sharing.

Priority Support

Jump to the front of the line and chat with our top notch support team.

‍