iOS Spotlight

25,753
0
79
Using color adjustment and filters, I've simulated the iOS spotlight animation. Learn how you can apply these filters at https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

Form examples

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

Using a switch to select items and add costs

2,437
0
54
Use a variable to add the costs of premium features that are selected or deselected using an iOS switch component. See a video of how to do this step-by-step in this webinar: https://support.proto.io/hc/en-us/articles/115001585411-Model-advanced-prototypes-that-use-variables-part-II TAGS: variables variable math addition switch switches fire an items event

Todd Siegel

Credit Card Statements

3,330
0
Infinite snap carousel for Credit Card Statements. Cards designs were used from Sketch from: https://www.sketchappsources.com/free-source/2453-credit-card-designs-sketch-freebie-resource.html

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

Scrollable Contacts List

2,658
0
38
Simulation of scrollable Contacts list using variables (Use of variables and 'On scroll Interactions')

34041018-d2c9-11ed 9221-0e76797a4f7b

Football Team Formations

1,942
0
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.

2cf05637-cc17-11ef a04a-0e3ec7c5f8cf

Calendar

2,712
0
86
A very basic Calendar example project using Containers a few states and 1 variable to track the year.

1866935c-504d-11ed 9221-0e76797a4f7b

Smoothies to Door

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

Akis Ioannou

Porsche

2,922
0
4
Swipe to see some Porsche models. Tap on a car to get more information on that car. The project is using States and State animations

7e32ae9e-1fcb-11ee bd60-0e76797a4f7b

Next