Variables Examples

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

Akis Ioannou

Expand/Collapse Menu

7,805
2
489
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Date picker

8,268
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

Apple Watch using native UI library

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

Akis Ioannou

Sign in Screen

10,347
5
776
This is an example of a sign in screen that validates a username and a password. Feel free to import this fully editable project into your own account for use in your prototypes. Use the following to successfully sign in and proceed to the next screen User Name: john Password: proto.io

Akis Ioannou

Calendar concept

10,019
2
626
A calendar picker concept based on Ramotion's example on Dribbble, https://dribbble.com/shots/1782092-Survey-Platform-Design

Alexis Piperides

IFTTT

16,690
4
208
An as close as possible copy of the IFTTT onboarding experience. This prototype is also made in 4 other tools (Pixate, Origami, Framer & Form) to compare the differences between them. More info: http://medium.com/sketch-app-sources/five-app-prototyping-tools-compared-form-framer-origami-pixate-proto-io-c2acc9062c61 Original app: http://appstore.com/IFbyIFTTT

c6b28cc9-c0be-11ed 9221-0e76797a4f7b

Extended UI libraries

26,231
3
122
An extended collection of fully animatable UI libraries like triangles, stars, arrows and more, let you bring your idea to life all within Proto.io.

Akis Ioannou

Vertical scrolling feed with 2 expandable areas

7,639
6
407
An example of our vertical scrolling feed, with 2 expandable areas. Feel free to import into your Proto.io account.

Akis Ioannou

auto-complete search

4,863
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

Next