From the course: Principle for UX Design (2019)

Understanding the timeline - Principle Tutorial

From the course: Principle for UX Design (2019)

Start my 1-month free trial

Understanding the timeline

- [Instructor] One of the great uses for Principle we've worked with artboards containing content. When working with UX, UI projects, to what you wish to accomplish and dummy text lets you concentrate on the motion and transitions before using content from elsewhere. So the plan for this project is really simple. We're going to create a tabbed interface that lets the user know where he or she is, as well when a tab is tapped, it should grow. It also lets the user know where he or she is as well. This is a great way of learning the fundamentals of using the timeline to create animation and transitions in Principle. And to get yourself started, open the Timeline file found in your chapter download. When it opens, we're going to select this artboard here, Artboard 1, and create the tabs. and select the rectangle. just like that. so that doesn't tell me anything, Now, the other thing about this is it's got to sit at the bottom, but it also should go halfway across. So this artboard is 360 pixels-wide, so I want to set the width of this to 180 pixels. Having done that, I'm going to change the color to a bright red And now, we're going to need a second tab, which will fill this space in here. Now, you can either draw it or you can do the easy way. So you select the Red layer and holding down your Option key, just click and drag down and you've made a copy. It's Red 2. We're going to name this one Blue and we're going to change the the color to blue and just pick a blue. Now, Blue is sitting under the Red, so I'm going to use the right-arrow key and just sort of pop it out a bit. And then using the Shift key, I'm just going to drag it over and I've abutted it across. So now, I've got my two tabs in place. I need to duplicate this artboard. Now, you can do it the hard way or the easy way. And the hard way is just recreate it. holding down the Option key, drag down. Boom, there's your copy. know where he or she is. So on this page, Artboard 1, we're just going to make this a little bit bigger, so I'm going to take it up, say, 10 pixels. so I'm going to change it up here on the height. And you notice that it came up. Now, the reason for that is is that all measurements are from the center of the object. So I'm just going to select it and pop it down using the down-arrow. Now, what we're going to do is we're going to change the height of the blue one over here on Artboard 2 to 60 pixels, so we'll set the height to 60. Do select and then using the up-arrows, I'm just going to pop it up. So now, we've got a tabbed interface here. If I click on the blue, I go to this artboard. If I click on the red, I go this artboard. So we can get that going by clicking on this blue box here, clicking the lightning bolt, tap over here. And I'll do the same thing with the red, tap over here. And if we show the preview, you can see we've got the change. Now, there are a couple of things you need to know about working with animations. I'm going to select this box here and I'm just going to change the name to Blue1. You'll see what I'm getting at in a second here. Okay, so I come over to here, rewind. Click on the blue. And you notice, I don't get the motion. And the reason is, is that this box has a different name or this object has a different name. So when you're working with animation or working with motion and transitions, make sure that they have the same name. Another thing we can do here is on this artboard. The Artboard 2, why don't we just change the box a little bit just so we know we're in a different place? So I'm going to set the radius of this box to, say, 20 pixels. And I now have rounded corners and let's just change the fill color to something a little bit different, there we go. And now, if I come back, you see that your box also does the transition. So you can now change between states. If I open the timeline, you'll see that If I open the timeline, you'll see that I've got all the properties that have changed I've got all the properties that have changed listed in the timeline. listed in the timeline. And between this diamond here and this diamond here And between this diamond here and this diamond here is how long it takes. is how long it takes. And if I move across the timeline, And if I move across the timeline, you see I'm just scrubbing across the timeline, you see I'm just scrubbing across the timeline, you can actually see, in the preview, you can actually see, in the preview, the transition happening. the transition happening. So there you go, there's working with basic, So there you go, there's working with basic, basic animation and transitions using the timeline basic animation and transitions using the timeline and working with objects that change. and working with objects that change. In the next exercise, we're going to get deep into In the next exercise, we're going to get deep into working with keyframes and time. working with keyframes and time.

Contents