1.2 Introduction to Principle
Principle for Mac is an app that allows you to animate designs and create interactive prototypes using drag and drop tools. This lesson will give you an overview of the Principle interface, including Artboards, the Inspector Panel, the Layers Panel, and drawing on the infinite canvas.
1.Introduction2 lessons, 03:47
1.2Introduction to Principle02:47
2.Principle Basics3 lessons, 10:01
2.1Interactions and Transitions03:04
2.3Drivers and Keyframes02:49
3.Prototyping Interfaces2 lessons, 14:54
3.1Images and Layout07:54
3.2From Static to Dynamic07:00
4.Conclusion1 lesson, 01:21
1.2 Introduction to Principle
The first thing we're going to do is download Principle from principleformac.com and get the free 14 day trial. Because I've already got it installed, I can just open it right up. This is Principle. You'll notice something familiar about Principle. That's because it shares the same interface features as Sketch. It's got an infinite canvas, art boards to restrict our designs. Up top, we've got the toolbar, the utility belt of the program. On the right, the inspector panel, from which we can manipulate shapes. And underneath that is the layers panel for manipulating layers. On the left of the art board is the preview panel. It's like a simulated touch screen. Where our cursor, the little circle there, is a hovering finger and clicking represents taps. So right in the center of the art board, let's create a shape. Easy as that. Just drag it, move it around. We can see it live previewed in the preview window on the left. And then we can adjust its settings and parameters by using the inspector panel. For example, click and dragging here allows me to adjust the width. You can always, of course, enter your own values in a text box. Entering the radius allows us to create our square into a circle. I can adjust it using the smart guides. Just like that. And notice that everything we do is reflected onto the preview window. So watch as I change the color to red, the preview window follows suit. If I change the border, also known as the stroke, to about five pixels in size, the preview window also follows the same thing. Okay, so unlike Sketch, art boards work a little bit differently in Principle. Watch as I drag this red circle out of the canvas. It's already peeking a little, but if I drag it even further out, you'll notice that even if it's not showing in the preview window, it's still a part of the art board. It's still considered a part of the art board group. This is really useful if you want to create things that fly off screen or animate off screen, yet still be part of the screen. So it's more organized and more manipulatable in the Layers panel. Now here's a little thing about layer names in Principle. Unlike Sketch or Photoshop, layer names must be unique for every unique object that you create in Principle. I'll explain why later in the course. For now, let's just duplicate the shape, and then let's select both so that we can group it. So our group looks a little bit more nicer in the layers panel. Just by using the tools at the top, and the inspector panel and the layers panel, you can easily create your own designs in Principle.