Proto.io Library | Getting Started

3 Step Overview of Proto.io

1. Create Wireframes ?  2. Create interactions and animations ?  3. Share, comment and test

1. Create Wireframes

  • Create wireframes inside Proto.io using component libraries of various themes such as iOS and Material Design:
  • Or export screens from Sketch or Photoshop:
    proto1-768x486proto0-1
  • When imported to Proto.io, they keep the same layers:
    proto2-1

2. Create interactions and animations

  • Link elements to create interactions:
  • Use the keyframe editor to refine animations:

3. Share, comment and test

  • Share prototype with one click, and run on mobile devices:
    proto11-1
  • Comment on interactions:
  • Integrates with 3rd party Usability Testing apps:
    proto10