Before Studio, you would have to use multiple products to design, prototype, and add motion. Motion was thought about from the beginning with Studio. In this video, learn the basics of motion and how easy it is to get up and running.
- [Instructor] So when you're ready to take your linking screens to the next stage, you'll wanna create motion. Now, motion's a big thing inside of Studio, so let me show you how it works. When you come over to your art boards, one, I don't have any click states, or any motion already set up on this first screen, but if I go over to red, I did create what we call a hit state inside of InVision. So what this hit state is it has multiple interactions set up. What I'm gonna do is show you how that works.
When I come over here, I have set up a swipe left, a swipe right, and a click. With motion inside of Studio I can have these really nice, slick transitions from one state to another state. And this is because of the motion transition. I'm gonna show you how this works. And, again, you can swipe left, you can swipe right, and you can use your different gestures to make these things happen, so let's do that. First, I'm gonna zoom in by clicking Z on by keyboard and just clicking and dragging.
Now what I wanna do is create one of these hit states, so I'm gonna hit R on my keyboard to create a rectangle. And this rectangle, I'm gonna draw a box and have it at, let's say, 375, which is the R-port size. And I'm just gonna realign it zero, zero. Now the cool thing about this is I can make this go to zero opacity and it's still there. It's just invisible. Now what I wanna do is I'm gonna hit C on my keyboard, go over to red, click.
Instead of changing it to preset, I'm gonna select motion. Motion's gonna give me this duration that I get to choose. Now this is how long that transition is from one state to another state. The cool thing about Studio, it's going to remember this duration for the next time you select motion, so you don't have to keep copying and pasting the same thing over and over. So in this state I'm gonna hit save, but this tab is totally okay, because I'm gonna add a few more. So I have tap, it's gonna go to red.
And I also want to add another interaction where if I swipe left it's going to go to red, and then I need to set it to motion. It's gonna remember that transition. Now, I want one more, so when I swipe right it's gonna go to green. So I'm gonna click the interaction, come down, swipe right, and I usually do this with my hand, just so you can have an idea of how it would feel in real life. So motion, and it's gonna go to green.
All right. So I have these ready to go. Now all I need to do is come up to my menu, select it, and hit preview. Now, if I click, it's gonna go to red. I can swipe back. I could swipe left and it's gonna go red. And now when I'm ready I can swipe left and it's gonna go to green. So that's how easy it is to create these transitions. But let me show you how it's working behind the scenes.
Remember in earlier videos when I talked about layer naming. Now, layer naming is incredibly important inside of Studio, so these shapes that I have, and I'm gonna call this my hit state, just so I have it remembered. I'm gonna right-click on that and lock that, so I'm able to click on all of my other elements. Now when I click this red action, this red circle is the same name as this other red circle in the other art board. So this is how you can connect the dots when your doing these transitions.
So if you have an image that you want to swipe on swipe, it's going to come from big to small, you would want that image name to be exactly the same. Another thing to consider is when you come back into your design and you wanna see what interactions you have, you can quickly see the lightening bolt, here in the layer panel, to know which ones you have. You can also click X on your keyboard, which is gonna show a blue arrow of all the interactions that you've already set up. This is helpful too, to be able to know at a quick glance where your interactions live.
So that's a quick look at how to add interactions inside of InVision Studio. And next we're gonna look at the timeline editor.
- Navigating the interface
- Best practices for importing from Sketch
- Drawing, editing, and formatting shapes
- Managing layers
- Rapid prototyping
- Advanced animation
- Percentage-based scaling
- Creating, adding, and editing components
- Sharing and presenting your work