User Guide

Getting started with Proto.io

• The Proto.io user interfaces
• Dashboard basics - Creating and Managing Projects
• Dashboard basics - Creating a custom device
• Dashboard basics - Setting up Users
• Editor basics
• Keyboard shortcuts

See all 13 articles

Proto.io fundamentals

• Screens
• Containers
• Screen and container states
• UI Library components
• Properties Inspector
• Mask/ crop your images

See all 22 articles

Other functionality

• Proto.io automated functionality - Design Patterns
• Proto.io automated functionality - Make scrollable container
• Sharing your project on Proto.io Spaces
• Variables
• Add-ons

Step-by-Step Tutorials

• Step-by-step Tutorial - Getting Started

Frequently Asked Questions

• How do I give the Proto.io Support team access to my account to help me?
• Compliance of Proto.io with the EU General Data Protection Regulation (GDPR)
• Important announcement regarding Lookback accounts
• How do I get a video recording of a user experiencing my Proto.io prototype?
• How do I make a scrollable container?
• How do I get a value from a text field using variables?

See all 14 articles

GLOSSARY

• Glossary of Terms in Proto.io 6

Video Academy

Getting started

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

UI basics

• Easings Manager
• Sharing
• Overview of the Proto.io Editor
• Masking tool
• The pasteboard
• The player interface

See all 7 articles

Screens

• Screens and Screens Navigator
• Designing for different orientations
• 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

• Dropbox sync
• Using the Proto.io Design Plugin for Sketch
• Using the Proto.io Design Plugin for Photoshop

Variables

• Introducing variables

Interaction Design Patterns

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

See all 7 articles

VR Prototyping (beta)

• Creating a basic VR environment using 360 images
• Creating a VR Walkthrough using the VR component library
• Creating a VR Game Menu using the VR component library

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 28 articles

Advanced

• VR Prototyping without leaving Proto.io
• 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

See all 30 articles

Tutorials and Guides

Outdated

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

Community

Recent activities

Ask the community