Welcome! Follow this step-by-step tutorial to learn the basics of the Proto.io Editor and Player.
By the end, you will know how to create an interactive prototype, similar to the one shown below.
STEP 1 - Designing your first screen
Once you create a new project in the Dashboard, you are taken to the Editor where you see Screen 1 created for you. 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 or edit their 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'.
Through the Properties Inspector, you can give it a name (e.g. My second screen) and change the background if you like.
Your new screen is now open on 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 iOS 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 is 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' (SHIFT+p) to preview your project in Proto.io Player. This will show you 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.