User Guide

Getting started with Proto.io

• What is Proto.io?
• What can I do with Proto.io?
• Browser requirements
• The parts of Proto.io
• Getting started with our sample and tutorial projects
• Creating your first project

See all 13 articles

The Proto.io Dashboard

• Creating and managing projects
• Creating a custom device
• Setting up users
• Managing your account
• Billing settings

Working in the Proto.io Editor

• Editor basics
• Screens
• Containers
• Screen and container states
• UI Library components
• Templates

See all 16 articles

Importing designs into your Proto.io project

• Importing and managing your own assets
• Importing designs from Sketch
• Importing designs from Adobe XD
• Importing designs from Photoshop
• Importing a project from Proto.io Spaces to your account

Previewing your prototype

• Proto.io Player
• The Proto.io app

Sharing and exporting your prototype

• Sharing in Proto.io
• Embedding Proto.io prototypes in Jira
• Embedding Proto.io prototypes in Trello
• Embedding Proto.io prototypes in Confluence
• Exporting and downloading offline
• Exporting Assets

See all 7 articles

User testing your Proto.io prototypes

• Getting feedback
• User testing with UserZoom and UserZoom GO
• User testing with UserTesting
• User testing with Userlytics
• User testing with Lookback
• User testing with UXArmy

Advanced features

• Adding micro animations (Lottie)
• Easings
• Font Manager
• Variables
• Advanced Animations

Frequently Asked Questions

• Importing from Adobe XD - Tips for Improving Performance
• COVID-19 Update: Uninterrupted Proto.io Service
• How do I change theme in the Editor?
• How do I make a scrollable container?
• Can I copy screens/containers from one project to another?
• Why are fonts not loading correctly in the project I'm previewing?

See all 16 articles

Resources

• Glossary of Terms in Proto.io 6

Video Academy

Getting started

• Quick Tutorials
• Introduction to Proto.io 6
• Proto.io Essentials, Episode 1
• Proto.io Essentials, Episode 2
• Proto.io Essentials, Episode 3

UI basics

• Overview of the Proto.io Editor
• The Proto.io Player interface
• Sharing
• Asset Flow
• Masking tool
• Easings Manager

Screens

• Screens and Screens Navigator
• Screen Transitions

Containers

• Reusable containers
• Scrollable containers
• Reusable containers with states
• Containers - Page Controller

States

• Creating the popular heart animation using States
• Creating an animated splash screen using States
• Creating an animated button using States

Menus

• Tab Bars

Animations

• The Rotation Feature
• Using Rotate in Animations

Draggable

• Introducing Draggable
• Draggable Rotate

Tools and addons

• Using the Proto.io Design Plugin for Adobe XD
• Using the Proto.io Design Plugin for Sketch
• Using the Proto.io Design Plugin for Photoshop

Variables

• Introducing variables

Interaction Design Patterns

• Scrolling feed
• Carousel
• Vertical scrolling feed with expandable content
• Pull to refresh
• Slide-in menu
• Slide to delete

See all 8 articles

Prototyping popular apps

• Pandora Tutorial Part 1
• Pandora Tutorial Part 2
• Recreating Tumblr Compose Animations in Proto.io
• iOS Weather App Variables Tutorial Part 1
• iOS Weather App Variables Tutorial Part 2
• Prototyping Path - Part 1

See all 13 articles

Video Academy - Recorded Webinars

Beginner

• Speeding up your prototyping - new capabilities!
• Using our exciting new animation easings capabilities
• Planning your prototype structure
• Getting up to speed with Proto.io
• Mastering the power of containers
• Collaborating with Proto.io

See all 27 articles

Advanced

• Model advanced prototypes that use variables, part II
• Model advanced prototypes that use variables
• Advanced Scrolling & Dragging
• Using Variables for Advanced Prototyping
• Improving Performance Tips & Tricks
• Using the new photo masking tool

See all 27 articles

Tutorials and Guides

Outdated

• Sliding Sidebar Menu - Part 1
• Sliding Sidebar Menu - Part 2