A Sample project used in various official Proto.io tutorial videos. It contains various design patterns commonly found in popular mobile apps.

One Page Website example created with Proto.io

The project contains numerous examples completed using variables and conditional logic.

This one-screen prototype demonstrates some of Proto.io animation functionality.

An example of a sticky scrolling sidebar (website)

An example of a date picker that can be imported and used in your project. (Basic use of variables) tags: calendar, picker, date picker

I'm going to give you an explanation of the best modern football formations. A football formation is a number set that describes the positions of players on the field. It determines how many players play on defense, the midfield, and the frontline. The first number always describes the defender, and so on. For example, a formation like 4-3-3 plays with four defenders, three midfielders, and three forwards. The goalkeeper is never mentioned in a football formation. Most formations are described in three numbers but four- and five-rank formations are also possible. This is created in Proto.io using States and States Animations.

A Picker selection navigates you to the screen selected. The project uses Variables and States and depending on the picker selection I change a button state to navigate you to the right screen.

3 different counters using variables 1. A standard counter 2. A counter from the number of seconds the user sets 3. A countdown

This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.