Prototypr

Published: September 14, 2016

Last modified: September 29, 2016

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

 

✌Join us for more

1000s have recommended us, sign up today for free.

  • Stay up to date with prototyping tools and design news.
  • Comment and give feedback.
  • Become an author and share your expertise.
Sign Up