By signing up you agree to our Terms of Service.
Already have an account? Sign In.
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.
Mix-and-match ready-made, customizable templates to create your prototype and wireframes in minutes. Customize the content blocks and add interactions.
Read more
Out-of-the-box UI components of the most commonly used functionality for you to easily add to your project.
A huge library with thousands of icons that can be resized and recolored.
Pick from a large collection of animated icons ready to be used straight within the Proto.io editor.
Make your prototype Pop! Find the perfect sound effect in our Sound effects library and add sounds to your interactions and animations.
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.
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.
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.
Read more
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.
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.
Embed a custom external HTML page to your prototype.
Add HTML code to your prototype through the HTML code component.
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.
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.
All mouse events like click, mouseover, right-click and more are available for web and desktop prototypes.
Trigger actions when a key is pressed. Bind different actions to each key, depending on the screen or state you are in.
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.
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.
Any single event can trigger multiple interactions to happen either in sequence or concurrently. Trigger any interaction after a delay.
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.
Trigger an event assigned to a different item even if it's on a different screen.
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.
Add interactions on top of any area, for example when you want to create hotspots on top of your own uploaded designs.
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.
Use variables for conditional logic or for storing and displaying data across the screens of your project.
Dynamically change any property of any UI item including text, position, sizing, opacity and more individual component specific styling options.
Add beautiful native-looking transitions when navigating between screens like Slide, Fade, Pop, Turn, Flow and Flip.
Animate any item and trigger the animations based on events. Animations include move, scale, resize, fade and rotate.
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.
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.
Read more
Create and manage your own reusable easings presets. Set the default easing for all new animations.
Read more
Drag and drop files from your desktop directly to your canvas for immediate upload. Easily find all your assets in the quick assets panel.
Copy an image from the design tool of your choice and just paste it into proto.io to upload with just one keyboard command.
Upload your images from anywhere and easily mask, crop, frame or create amazing animations without ever having to leave the Proto.io editor.
Read more
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.
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.
Read more
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.
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.
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.
Read more
Use Adobe fonts, Google Fonts or upload your own web fonts (including the ones you created) to maintain brand consistency.
Read more
Choose your project's color palette and save it in our easy to use color picker for faster-than-light designing.
Use the eyedropper tool available in the color picker to select any color, in and out of the editor, to use in your prototypes.
Create and animate vibrant gradients in Proto.io.
Read more
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.
Read more
No need to download any software. Just log in through a browser window to access your work.
Intuitive drag and drop interface for all building blocks for rapid prototyping
Easily group, lock, arrange and align UI items on a screen.
Read more
All the keyboard shortcuts you are accustomed to in a design tool are available in Proto.io. Switch between tools and continue working seamlessly.
Customize the grid size and add rulers to your canvas for easy alignment of elements.
Align and position your UI items with ease. Check the distance between any two items at for pixel-perfect designs.
Read more
Add custom guides to easily snap items to any position you need.
Setup the orientation of all or individual screens within your prototype. Trigger and respond to events when users rotate their devices.
Use the Editor in your preferred theme. Choose the pasteboard color you like.
Read more
Get overview of all your project's screens and screen states.
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.
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.
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.
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.
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.
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.
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.
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 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.
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 individual components, groups of components, or entire screens and containers to PNG. Choose the export pixel density, depending on your needs.
Read more
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 your project as you go on your web browser. Easily switch between screens. Orientation changes, zooming and more options are available.
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.
Download your prototype on your device using the Proto.io iOS or Android Player app and access it anywhere, anytime.
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.
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.
Show a Click effect on every tap. Especially useful to focus attention on mouse clicks if you are creating a movie or GIF recording.
Share your prototype multiple times and keep different Share links. Use different Sharing and Security settings for each link.
Share your prototype with anyone (get a shareable link), or add password protection for extra security.
Share your prototype with Reviewers to give access to selected users only (sign-in required). All paid accounts have unlimited Reviewer slots.
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.
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.
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.
Share your project and get feedback from other designers or reviewers. People can add comments and create discussion threads to give feedback.
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.
Easily embed your project in your website or blog by copying/pasting a few lines of embed code generated by Proto.io.
Manage your projects' settings, as well as who has access to them. Organize your projects in groups (available in some subscription plans)
Manage your account's users and their roles (owner, admin, designer and reviewer).
Upload your logo to add a flavor of your own brand in the Proto.io interface for your staff and customers.
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.
A large library of documentation on how you can get the most out of Proto.io.
Proto.io offers a large number of video tutorials that will help you start or become an expert with Proto.io.
The Proto.io support team is always available to help you with any questions you might have.
A showcase of Proto.io prototypes made by the Proto.io community. Import projects in your account to learn how they were built.
Take advantage of all proto.io features across all our paid plans.
Choose out of 4 pricing plans depending on your needs in terms of projects and users.
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.
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.
Tailor your plan with additional users, unlimited projects, enterprise-grade security, analytics, priority support and more.
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.
Students and non-profit organizations can benefit from 50% discount. Just contact us from your academic or organization emai for more info.
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.
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.
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.
Proto.io has implemented an Information Security Management System (ISMS) in line with the International Standard for Information Security, ISO/IEC 27001.
Control and manage users' access from one centralized location.
Be in the know on user's activity and manage your account and project access more effectively.
Control the network locations from which users can access Proto.io with IP Access Restrictions.
Smoothly integrate Proto.io with your SSO for easy access and secure team/ user management.
Restrict sharing only to internal team members of your company or set customized restrictions based on email domain.
256-bit SSL Encryption of all communication.
Prevent unauthorized access to your projects by disabling public sharing.
Jump to the front of the line and chat with our top notch support team.
