Step-by-step Tutorial - Getting Started

 

Getting Started with Proto.io 6

 

Welcome! Follow this step-by-step tutorial to learn the basics of Proto.io.

By the end, you will know how to create an interactive prototype, similar to the one shown below.

 

 

 

STEP 1 - Designing your first screen

 

You have your Screen 1 created for you and already open in the Canvas. Drag and drop a circle and a rectangle from the UI component library on the right.
You can change their properties from the Properties Inspector that pops up or edit its size by using the little blue square handles that appear around them.

 

 

 

Step 2 - Create another screen

 

Go to the Screens pane located on the left and click on '+ NEW SCREEN'.
In the modal that opens up, give it a name (e.g. My second screen), change the background if you like and click 'CREATE'.

Your new screen is now open in the canvas for designing.

 

Step 3 - Add a button

 

Go to Screen 1 that you designed two steps before by selecting it in the Screens menu.

 

 

Now drag in a button from the UI component iOS9 library. You can edit its label by double clicking on 'Label'.

 

 

Click on the interaction wizard icon and drag and drop your mouse on your second screen in the Screens menu.

 

 

Great! You just linked your two screens together. You will test this later on.



Step 4 - Create a screen state

 

From the SCREEN STATES tab at the bottom of the Editor, click on '+NEW SCREEN STATE'. You will see a State 2 created, as an exact copy of State 1. 

 

 

While you are editing State 2, change the position and some properties of your circle and your rectangle (example shown in image).

In the next step you will be creating a transition for taking you from State 1 to State 2, resulting in a beautiful animation.

 

 

Step 5 - Create a state transition

 

Go to State 1 and select your circle. Pick up the interaction wizard and drag it onto State 2 in the States tab. 

You will see an interaction created 'On Tap -- Change state of “Screen 1” to “State 2”'. It also prompts you to create a transition From State 1 To State 2.
When you click 'CREATE', you see a transition timeline appear at the bottom.

 

Click on the Play button to preview your transition.

You can optionally make changes in the timeline to see how these affect your circle's and rectangle's animation.


 

  

Step 6 - Preview in Proto.io Player

 

Make sure you save you latest changes by clicking 'Save' (CMD/CTRL+s). Then, click on 'Preview' to preview your project in Proto.io Player. This is how it would look and feel like on the actual device.

 

 


Click on the button you created and observe that it takes you to your second screen.

 

 


Click on the circle and watch it move and change properties.

 

 

Step 7 - Share with your friends

 

Just click on 'Share' at the top toolbar. The Share modal opens up. Click on the 'SHARE PROJECT' button.

 

 

The Share link you see is ready to be shared. Copy it by clicking on the COPY button and send it your friends to see (e.g. by pasting the Share link in an email). They will certainly be impressed!


That's it! Congratulations. You've created, previewed and shared your first prototype.

 

 

 

Have more questions? Submit a request