The Principle interface

- [Voiceover] Before we get into the actual process of designing and creating prototypes in Principle, I think it is important for you to understand the Principle interface and a few of the things you need to you about it beforehand. So what we're going to do now is we're just going to open the 01 interface file found in your chapter two download. And when it opens, you are looking at a typical Principle project. Over here on the left are the properties. And these are contact sensitive so if you come over here and you just click on this flower you'll notice that you get all the properties for the flower and you can even align it to the art board, you can align objects to each other using the alignment tools here.

You can change the X and Y location, the width, the height, you got all kinds of choices in here. You can choose fill colors. You can fill with images. It's really quite interesting. And these little pop downs here are actual events. So drag, scroll and page can be applied to art boards. And we'll get into those a little bit later on. Down here are the art boards and you'll notice that each art board is composed of layers. And the layers all sit on top of each other so the flower image that I've got selected right here is in the first layer.

This is the canvas right here. This is where you see the art board. You'll notice I've got two art boards here. And if you want to select an art board, you just click on it. And that green tells you, oh, you've selected an art board. This panel over here, if I click on it, is the preview. And the preview is pretty interesting because what it does is it lets you basically test as you go along. And as you roll the cursor across the preview panel, you'll see this little circle here. That basically traces the mouse movements. So if I click on this flower here, you can see things pop out, and if I click on it again, they pop in.

So I can now test my animation. Now, some of you may find this panel to be a little bit intrusive. And quite frankly, I do. But there's a way of hiding it. And it's over here up in the menus. So if you go to the view menu, you will see two things here called picture in picture and side by side. So what do they do? Well they manage the preview panel. So if I have picture in picture, you'll notice that the preview panel now appears on top of everything.

And I can move it off the screen and move it around. I can shrink the panel if I want. Make it smaller. And I can even dismiss it by doing that. And you'll notice it just doesn't work. So if you find the preview panel is getting in your way, here's what you do. You choose side by side, which is where I started, select it, push it over a little bit just to decrease it, and then just expand the main interface panel right here. At the top of the canvas are three tools.

A rectangle tool, a text tool, and an art board tool. Now, the rectangle is the only primitive. So if you click the rectangle tool, you'll see there's a rectangle right there. And if I drag it out, you can see it shows up on the art board where it's located. And if I want to turn it into a circle, there's no circle tool so what you do is you come to the radius here, put the cursor over the name, and you'll see that the radius changes to what we call a scrubby cursor. And if I scrub it, I can turn it into a circle.

To delete it, just press the delete key and it's gone. Right here are two of the more important aspects of Principle. Drivers and animate. What drivers do is basically animate properties that don't really animate. And that would be such things as, oh, say dragging. And we'll get into that later on because it's a whole subject in itself. Animate is actually this line here. Now, this line is going to open right below here the time line.

And when you click one of these arrows, it basically says that the motion goes from this art board to this art board, and these are the properties that change. And if you want to see it going back, you can see that they all change again. And you notice that what properties change? Opacity here for the garden and the lily, bookmark X and Y, so you got all kinds of properties that can be managed by the time line. To dismiss this, all you have to do is just click on it again and it's gone.

Import, this is a button that allows you to import items from Sketch. There's no Photoshop import. As a matter of fact, I don't think you'll ever use this button all that much. There's other ways of bringing content in and we'll get into that in this chapter. Grouping objects. I can select these four objects here. So if I select these four little icons, I can click the group icon. And you notice that they're selected in the properties panel down here.

And if I select group, they become a group. And if I want to ungroup them, I just go to arrange, ungroup layers, or press command + shift + G and they're ungrouped and they're put back. Grouping is a great thing to have and we'll get into that later on as well. You can move selected layers forward and backward in the timeline. In actual fact, you'll probably not use this a lot. Because layers can just be selected and as you can see, you can move them up and down.

If you're familiar with using Illustrator and Photoshop and other applications that use layers, you're quite familiar with how this works. And this little button here, tutorials. I love tutorials. You can actually click this and get a browser will open and you'll be taken to a bunch of tutorials around using specific aspects of Principle. Mirror is a plug in that will allow you to preview your projects on an iOS device.

And basically what you do is you just open it on your iOS device and they will connect automatically. So I just click okay. So there you go. That's your tour of the Principle interface. Though the interface at first glance looks rather simplistic, there's a lot under the hood. So hopefully now you have a better understanding of the Principle interface, where everything is, and how to find it.