An overview of the states feature of Proto.io
- [Instructor] Throughout this course…we have changed things between screens,…but what if you want to change something in a screen?…Well, this is where states come into play.…So what is a state?…Well, right now you're looking…at a black t-shirt and the current…state of that black t-shirt is that it's black…and it has certain properties associated with it.…So if I come to the properties,…you can see I've got all kinds of properties…that are here and that's the current state of the shirt.…So what I want to do is actually…have this shirt turn blue when I tap on it…and to do that what I do is I just…add a new screen state right down here at the bottom.…
Just click it and you'll see you get State 2.…You've got State 1; there's the black shirt.…State 2 and I want it to be a blue shirt…so I'm just going to change its property…from a black state to a blue state.…Click save to save the color and I now have a blue shirt.…So there's State 1, there's State 2.…Now what I want to do is when I tap…on the shirt, I want it to turn blue…
- Using design patterns
- Using grids and columns
- Using the Proto.io player
- Using the Proto.io smartphone app
- Working with screens
- Using components
- Creating artwork
- Creating and using containers
- Creating animation
- Publishing your prototype
Skill Level Intermediate
Building and Maintaining Your UX Design Portfoliowith Diane Cronenwett15m 54s Appropriate for all
Sketch: Creating Vector Graphicswith John-Paul Ballard1h 30m Intermediate
1. Getting Started with Proto.io
2. Working with Screens
3. Using Components
4. Creating Artwork from Proto.io
5. Creating and Using Containers in Proto.io
6. Creating Animation in Proto.io
7. Publishing Your Prototype
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.