Variables Examples

33,172
43
2,612
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Tinder UI

21,704
6
1,207

Sign up - Sign in

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

Constantinos Thoma

Expand/Collapse Menu

6,526
2
485
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Tic Tac Toe

2,771
0
46
An example project utilizing the power of Variables, Containers and States to create a Tic Tac Toe (X's and O's) fully functional 2 player game. Includes a scoreboard to track each player's Wins, Losses, and Draws. Notes included in the projects editor on how it can be setup.

Constantinos Thoma

Apple Watch using native UI library

32,206
6
264
Created using Proto.io library of fully interactive, native watchOS components.

Akis Ioannou

Hide Navigation Bar On Scroll

4,643
4
177
This is an example of a Navigation Bar that disappears on any downward scroll and re-appears on on any upward scroll.

Akis Ioannou

Extended UI libraries

23,928
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

Drag and Drop Variables

4,269
9
216
Project using Variables to simulate Drag and Drop to Snap functionality into a predefined area. While also adding Animations and States for a more smooth and elegant process.

Constantinos Thoma

Form examples

7,215
0
165
3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Todd Siegel

Next