Variables Examples

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

Akis Ioannou

Spotify

23,643
6
630
Hi there! I would like to share with you the latest version of Spotify prototype. Now you can listen to music while browsing the prototype.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Swarm Check-in

18,786
0
177
Apply color adjustments and filters to your prototypes to create beautiful interactions and animations. https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

Form examples

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

Minimal dialpad/numberpad/passcode

1,941
0
67
Number pad designed for easy re-use. I saw some dialpad examples in Spaces, but I felt that they had way too many moving parts (the circles, the numbers, and the hotspots were all separate) and it was impossible to easily reuse because the circles and numbers were assets and changing look and feel retired changing the assets. So I created this as a completely re-useable dialpad and I have included a few color pickers as an example of how to manipulate the properties quickly through variables.

a21fe9c8-e5d9-11ee ab6d-0e76797a4f7b

Slide in menu

6,589
1
301
A beautifully animated Slide in Menu created exclusively with Proto.io. Feel free to import this fully editable project into your own account for use in your prototypes.

Akis Ioannou

Drag and Drop Variables

5,097
9
217
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.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Vector Animation Splash

4,312
4
81
This Splash screen prototype shows a vector animation of a headphone made in After Effects. Use the Bodymovin plugin that exports a JSON file and can be dropped right into Proto.io.

Todd Siegel

Next