Variables Examples

35,052
44
2,624
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Calendar Date Picker

1,431
0
79
simple date picker with full calendar for one month

3a3f164b-504d-11ed 9221-0e76797a4f7b

Sign up - Sign in

6,653
6
485
A Sign up - Sign in page example project using Variables and States to validate the correct user input in both pages.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Apple Watch using native UI library

33,270
6
264
Created using Proto.io library of fully interactive, native watchOS components.

Akis Ioannou

Date picker

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

34041018-d2c9-11ed 9221-0e76797a4f7b

Flipboard Animation

5,699
1
56
The Flipboard animation created using states.

469c1b7e-504e-11ed 9221-0e76797a4f7b

Smart Home - High Fidelity

2,933
1
44
The SmartHome prototype is a high fidelity prototype that was build by using mostly components, graphics and animations from Proto.io Please go ahead an try it out. Prepare a hot cappuccino for yourself or even better arm your home alarm directly through the SmartHome app. Control all your smart devices fast, easy and reliably through the app! Includes: Multiple containers, states and states transitions, on screen interactions, on state enter interactions and much more. Multiple proto.io animations Bodymovin animations Battery level for the coffeemaker is dynamic by getting the minutes of the current time and updating the battery level percentage. A couple of variables In overall, this is a great project for users that want to expand their proto.io knowledge and move to medium and high fidelity prototyping. Feel free to import!

bbac9ce3-504c-11ed 9221-0e76797a4f7b

auto-complete search

4,804
2
154
Type the first character of topics from http://uxofvr.com to see the auto-complete. (a-z, 2,3). Use ESC to hide the dropdown. Uses a variable to capture the content of the search field then uses the javascript method "{search}".charAt(0) to capture the first character of the search string to then change the container state property of the auto-complete dropdown to match the first character typed. see video of how to create this step-by-step in the webinar: https://support.proto.io/hc/en-us/articles/115001243532-Model-advanced-prototypes-that-use-variables TAGS: auto-complete search dropdown variables variable character selection Thanks to Costas Thoma for the model.

Todd Siegel

Endangered Species

4,010
1
An endangered species is a type of organism that is threatened by extinction. Species become endangered for two main reasons: loss of habitat and loss of genetic variation.

Merry Mustard

Next