Form examples

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

Dynamic List Simulation

3,860
0
74
A simple implementation of how to simulate a Dynamic List which the user can manually increase or decrease using a single Container, a List component and States.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Animated Navigation Bar

3,861
0
53
This Animated navigation bar project was created to simulate feedback when interacting with a button on a navigation bar while also giving it some snap functionality. Was created using Containers and States.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Date picker

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

Website Template

4,100
0
75
A website template with multilevel dropdown menus and scrolling area.

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

Music App

7,162
1
107
Music App project Design Credits: https://www.sketchappsources.com/free-source/2847-apple-music-app-sketch-freebie-resource.html

1f83aed2-504d-11ed 9221-0e76797a4f7b

Recreating Messenger Bubble

2,424
2
17
A Simple recreation of the Messenger bubble using Proto.io stock images. Basic functions such as drag/drop to screen corners, drag to the bottom to delete, swipe down to reveal 'contents hidden' to bring the bubble back to the screen and tap bubble to show conversation.

18689160-504d-11ed 9221-0e76797a4f7b

show animaition (tap&scroll)

3,800
1
36
show animaition (tap&scroll)

a50d0f82-504e-11ed 9221-0e76797a4f7b

Travel App

2,421
0
27
A Picker selection navigates you to the screen selected. The project uses Variables and States and depending on the picker selection I change a button state to navigate you to the right screen.

2cf05637-cc17-11ef a04a-0e3ec7c5f8cf

Next