Principle Crash Course | Amanda Legge | Skillshare

Principle Crash Course

Amanda Legge, UI/UX Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (27m)
    • 1. Course Introduction

      0:43
    • 2. Introduction to Principle

      0:55
    • 3. Principle Interface Basics

      4:02
    • 4. Make Your First Interactive Prototype!

      0:36
    • 5. Top Level Sliding Navigation

      2:26
    • 6. Vertical Scroll

      1:35
    • 7. Floating Action Button

      3:40
    • 8. Practical Features of Principle

      0:33
    • 9. Importing From Sketch

      2:11
    • 10. Creating Your Interaction

      4:19
    • 11. Mirroring & Sharing Designs

      2:38
    • 12. Exporting Your Animations

      2:31
    • 13. Conclusion

      0:32

About This Class

Amanda Legge, designer and creator of www.principletutorials.com, will teach you the basic ins and outs of Principle. This course, aimed at beginners with little to no interaction design experience, will get you up and running with Principle in no time -- well, okay, in less than 30 minutes.

After doing a brief introduction to Principle’s interface, you'll jump right in to create your first interactive prototype. You'll build on top of this mobile interaction in three manageable pieces until you have a fully functional prototype.

Then, using a different mobile UI interaction, you'll learn a few practical features of Principle. First, you'll learn how to import your designs directly from Sketch. This technique will be the foundation on which you build your next interaction involving a log-in screen. Then, once you've completed the log-in interaction, you'll learn how to mirror, share, and export your work.

Once you finish this course, you’ll be fully equipped with the skills you need to create your own basic interactions in Principle. This course is meant to be hands-on, so download the 14-day free trial of Principle (if you haven't bought it already) and follow along!

Basic working knowledge of Sketch and a solid understanding of simple UI/UX concepts is helpful but not necessary.

Transcripts

1. Course Introduction: Hey, this course will get you up and running with principle in no time. First, we'll do a brief introduction to the principal interface. Then we'll jump in and create your first interactive prototypes. Finally, we'll go through some practical features, like importing your designs from sketch mirroring and sharing those interactive designs and exporting your innovations. This course is meant to be hands on, so download 14 day free trial of principle and follow along. 2. Introduction to Principle: So what is president principles? A tool to bring static You I designs to life. It has a really small learning curve, so you can create pretty complex interactions in just a matter of minutes. Unfortunately, like you might have guessed from the Earl principle for mac dot com, it only works for Max but does have a bunch of other positive features like it's seamless integration with Sketch, for example, and it's super reasonable price point of $129. It also has a 14 day free trial that's actually a free trial. So it's not just two weeks from the point of downloading it, it's only it only counts the days that you open it and use principle. So if you haven't done that, it already download it and let's get started. 3. Principle Interface Basics: When you open a principal, you'll notice a few things. First of all, the layout is pretty similar to sketch. Here in the middle, you see an art board, and here on the left you see all the formatting and property settings, just like sketch. You can create rectangle shapes or text layers by clicking on the buttons in the upper left hand corner. Shortcuts to access these layers in principle are even the same. A sketch. For example, Tapping our creates a rectangle there, and tapping T creates a text layer. You'll also notice that principle automatically changes the formatting settings based on the type of layer you have selected, which keeps the interface clutter to a minimum. For example, selecting this text layer gives you the option to change the font and font weight alignment and from point size. Let's create a button and play around with some different top transitions. Layers and object groupings and principal work the same as any other design software, so the order matters. When you select the button, you'll see a lightning bolt icon. This icon gives you access to all the different event transition options. Let's stick with tap transition for now, since that's the easiest. But we'll get into some of the other options later. Once you select top, you'll see a drag, a ble spaghetti code arrow. Releasing the arrow onto this art board will automatically create a duplicate of this art board for us. We could just as easily have manually duplicated the art board and then created the tap transition as well. So don't let that shortcut confusing. Now that we have our top transition, we can make any changes we want to this new art board, for example, we can increase the size of this gray square as long as the layers have the same name, principle will automatically animate them for you. Let's also create a tap transition back from the button on the second art board to the first so we can play around with our interaction more easily. Let's experiment with a few other changes. We could just as easily change the color of the square and the corner radius and the angle and the position and the capacity. You get the idea. Also, by tapping on the transition arrow, we can also control the curves of these transitions to simplify the parameters I'm gonna delete this square and create a new one where I only manipulate the scale of the square. Here in the animation controls, you see a bunch of different animation curve options, which I encourage you to play around with. But let's set our curve to spring in this example. Now you see that the animation has a bit more bounce. If you'd like, you can adjust the parameters like the friction to make the transition have even more bounce. There's one last thing I want to show you before we move on, which is how to take advantage of the space surrounding the art board to make elements slide in as long as an element is still associated with the art board principle will recognize it in the transition. This technique is especially useful for carousel sliders and keyboards. As with any event transition, you can also customize the timing of the interaction and the curve. Okay, now that you have a good basic understanding of principles interface, let's actually make something 4. Make Your First Interactive Prototype!: in this section of the course, we're gonna be building interactive mobile interface in three pieces. First, we'll create a top level navigation with a sliding selector. Then we'll create a scroll. Herbal View, lastly, will create a floating action button interaction. We'll be adding complexity with each video, so make sure to save your principal file as you go along. Let's jump in and make your first interactive prototypes. 5. Top Level Sliding Navigation: to create the top level navigation start by creating a rectangle by tapping our this will function is the background of our top level navigation. So change color and at a shadow, then create another, smaller white rectangle, which will act as our navigation selector instead of manually dragging it to fit half the screen. You can also have principle. Calculate the length for you. Simply set the width of the rectangle to the screen with divided by two, which in my case is 7 50 divided by two. Make sure to add a shadow here as well, so you can see it above the white background now for the text layer, use the T shortcut to create a text layer to create our first tab. Adjust the formatting so that the text is white, pleasurable and centered above. The selector. Duplicate the layer to create our second tub. You can do this either by copy and pasting a layer tapping command D or alter dragging the layer. Change the tab name and said its opacity to 70%. Now let's duplicate the art board to create the screen for the second tub, drag the selector over to the right and change the text capacities of each of the tab titles. Let's also set the background of the art board to a different color to differentiate it. Now we're ready to add the top transitions. Create another rectangle, which will function as an invisible hot spot for us. Set the fill layer Alfa, not the opacity to zero. The hot spot won't work if you set the opacity to zero, so make sure it's the filled layer at the top. Transition to the Second Art board. This is looking good, so let's create another invisible hot spot transition on Tab one in the second Art board. Back to the first. That's it for the navigation controls. Save your file, and whenever you're ready, let's move on to the scroll view. 6. Vertical Scroll: if it's not already open, open up the principal file you saved with the navigation controls. Now we're gonna add a scroll of you here on this first tab using rectangle layers with different corner races. Create some content like this, group all the layers together and duplicate them a few times until the content falls off the art board group all the content together and label it. You'll notice that right now you can't see any of the content that falls off the our board in your pre viewer. To fix that, change the content folders, vertical status from static to scroll. Now you can pull the content interview from off screen, but you still can't scroll. Also, you'll notice that our layers are out of order. Place the content folder below the navigation bar so that the contents girls underneath it then dragged the content Fuller's blue border up to the edge of the art board. Now you'll notice that even when fully scrolled content has no white space at the bottom. To fix this, drive the blue border up a bit further past dartboard. Perfect. Save your file and let's move on to the floating action button interaction 7. Floating Action Button: you know the drill. Now open up your principal file. If it's not already open for the floating action button, let's start by creating a circular layer. Use the eyedropper tool or control. See to set the color to match the navigation bar color at a shadow so it rests above the rest of the content. No, let's create a plus icon using white rounded rectangular layers. Once you have the first line at the right length and thickness and centered in the circle, duplicate the layer and change the angle to 90 degrees. Grouped the two layers together into a folder and then create another folder with the circle in it as well. Label it F A B for floating action button. Let's now create the three other circular buttons, which will fling out. Once we tap the floating action button. Duplicate the circular layer and shrink it down a bit. Copy and paste this smaller circle until you have three of them. Place these three smaller circles below the floating action button layer so they're hidden from view. Now we're ready to create the top transition interaction, select the floating action button and created tap transition to a duplicate of the art board on this new art board. Change the angle of the floating action button to 45 degrees, so that plus icon turns into an X. Let's also create a tap transition from this X icon floating action button back to the first dartboard side. Note. If you don't like the direction of the floating action button rotation, you could always change the angle from 45 degrees to negative 45 degrees to make it go the other way. Now lets go of the three smaller circles to make them fling out. When you first tap on the footing. Action button. Shift him up until they're lined up evenly. Like so. To make the fling a little more fun. Let's add some belts to it. Tap the floating action, but in transition arrow above and change the curve of these three circles from default to spring. Feel free to adjust the tension and friction of it until you like the interaction. The interaction looks good, but there's one problem. The exposed floating action button items can only be dismissed by tapping on the floating action button itself to close it to make the interaction more realistic. Let's also add invisible hot spot layers surrounding the buttons. Create two rectangular layers and top transitions back to the inactive floating action button. State Airport. Set the fill state to zero and you're all set. Congrats on making your first interactive principal prototype. 8. Practical Features of Principle: in this section of the course, we're gonna be going over a few practical features of principle, like importing your designs from sketch mirroring designs on your device, sharing designs with others and exporting animations similar to the last section will be building on top of the designs for each feature here. So save your principal file as you go. No worries. 9. Importing From Sketch: Now that you've got the basic interaction elements down, let's add some interactions to pre designed static screens created in sketch. As I mentioned in the intro Principal Integrate Seamlessly with Sketch. You might even notice that the icon on the import button and principle is actually an outline of the sketch diamond logo that's get, if I will be using is attached in the course notes here. But feel free to recreate these are towards yourself and sketch as well. I used iPhone X phone dimensions in my sketch file, so feel free to update those to match your phone dimensions. If you want the designs to mirror perfectly to your device later on, let's get started to import your designs into principal. All you have to do is have your sketch file open in the background. One thing to note is that you can have multiple sketch files open at the same time when importing, but principle will always pull whichever one is on top in the view. It's good practice to save and name your sketch file before importing it, so you know for sure which one you're importing. I like to create each state of the interaction on a separate art board and sketch. So I have a good point of reference and understanding of what I'm trying to do. But the art board, layout and layers and principal will likely change once you start adding the animations here, for example, I want the logo on splash screen to shrink up to the top of the screen, and then I want the form field and next button to fade it. Then, once you topple the form field, I want the placeholder text to shrink, changed a bold and move up to the title position of the form field. At the same time, I want the keyboard to slide in and the cursor to start flashing. Now that we have a plan of action, let's import our designs with your sketch file. Open in the background, top the import button. You see the title of the file being imported, and you also have the opportunity to change the asset scale. I'll leave it at two extra principal pulls in all the assets exactly how they're named and laid out in sketch file, so it's good practice to group them into folders. Entitle them accordingly, that's all. There is to importing designs from sketch. Make sure to save your file because we'll start adding the interactions of the next figure . 10. Creating Your Interaction: If you haven't already open of the principal file you saved, which has the imported art boards and assets, we're gonna have the local shrink up to the top after a short splash screen delay and then have the log in assets faded. Ben will create a tap transition from the form field, which will simultaneously trigger the name element to transition from placeholder. Text to title text and cause a keyboard to slight in from below and provoke a flashing cursor, since principal automatically transitions layer elements with the same name. This first scale and position transition of our logo should already work. Once we set an auto event, select the Splash Heart Board and create an auto transition to the next one. You could also create this transition manually yourself by copying and pasting the logo and changing the scale in the next board. Like so, the transition is what we want, but it happens a little fast and it be nice if there was a bit of a delay. Top on the auto event transition toe. Open the animation controls and shift the local elements over to the right toe. Add a small delay before the animation starts. Let's also slow the animation down a bit by extending the endpoints. One thing to note about the auto event transitions is that they won't initiate until you hover your cursor in the preview box. So make sure the first are part of selected and then move your cursor into the preview box to initiate the transition. Let's also change the curves of the local property elements to ease both, so it's a little smoother Perfect. Now let's make the long and elements fade in. We could do this on the same splash transition, are bored with an extra delay and delete this third our port entirely. Let's keep it as is for the clarity of this tutorial sake. Copy the name placeholder, text, the form field and the next button over to the splash transition our board and said the opacity of all three elements to zero. Now let's add another auto transition from this are poured to the log in one again. The transition is a little during, so let's add a little delay, extend the time to animate in and set the curve to ease in. Now all that's left to finish up our the last few interactions when you top on the form field, making the keyboard slide up, animating the placeholder form field texts of the title position and having a flashing cursor appear, let's first create an invisible hot spot layer over the form field with a tap transition to the last Dart board. Remember to set the fill Alfa, not the capacity to zero. Otherwise, the transition won't work, since the name Layer is named the same thing on both our boards, this transition is already working smoothly to make the keyboard side in, Let's copy and pasted on our log in our board and place it directly below the art board before we add the cursor innovation. Let's also add a few more invisible hot spot layer tap transitions from this last, our board back to the log in our board to dismiss the keyboard. Lastly, to create the flashing cursor, let's create an auto transition to a duplicate of this last our board and said the cursor rapacity 20 create an auto transition back to the 100% opacity cursor art board so that there's an infinite loop between cursor rapacity ease. All right, our interaction looks awesome. here in the pre viewer, but let's check it out on an actual device. Make sure to save your file. 11. Mirroring & Sharing Designs: If you haven't already open up the principal file you saved in the last video of the splash screen to log in animation. Now that our interaction is done, let's mirror design on our phones to mirror designs on your device. All you have to do is download the principal mirror app and that plug your device into your computer. Unfortunately, principal Mirror is only available on IOS devices. Once the app is downloaded, make sure your phone is plugged into your computer and open the principal mirror up immediately. You'll see a live mirror of your app, which you can play around with. The cool part about this live mirror view is that any changes you make to your principal file will be updated here in real time so I can move the logo on the splash screen down, for example, and see the live update. To restart the interaction, simply tap the screen with three fingers at the same time. This three finger tap gesture also gives you access to the menu, as you see here in the bottom, left hand corner tops in many button. Here, you see the design you're currently viewing live as well as all previously safe designs. Let's say this design here so that we can access it later, even when our device isn't plugged into the computer side. Note. Since I created this interaction using iPhone X dimensions, you might have to adapt. The principal are poured size to match your phone dimensions if you want it to look perfect . No worries. If it doesn't look exactly right, though, as long as you were able to mirror the design on your device, that's the important part. You can always delete the same design by swiping left on it in the menu. If it's not perfect, and to get back to the live, you simply swipe the menu down again. You can also share designs you create in principle with anyone else who has principle Mirror downloaded on their iPhone. The easiest way to do that is to save and upload your dot PRD, file to Dropbox or your own personal server and share the file link out. I'll send it to myself via email now to show you what that process looks like. Once I received the link, all I have to do is download the file onto my device like by tapping export here in Dropbox . This thing gives me the option to open the file using a variety of APS on my phone. Now I just have to scroll through until I find Principal Mirror and I'm all set. 12. Exporting Your Animations: Once you're done with an interaction, you can also exported as a movie or gift. If you haven't already open up that principle file again. Top of the video icon here to select your cursor style in this case, since our interaction is for mobile will use the touch cursor. But there's also an arrow cursor for Web interactions, as well as the option to not have a cursor at all. Now that you've said the cursor style, make sure the first are part is selected. Otherwise, you'll miss the splash screen animation altogether. Instead of tapping on the video icon, however, it's best to use the control V shortcut to record your interactions. That way you can place your cursor directly on the screen without seeing it come in from the side. And since this particular interaction starts with an auto transition, we might actually want to extend the delay for a recording so our users have some time to orient themselves. Let's do that now. Do you wanna have seconds? Should do again. Make sure the first are part is selected and place your cursor in the middle of the screen to prepare for the recording press control V to start the recording. Once you've shown off all the interaction elements, press Control V again to end the recording. Here you have two options. You can either save it as a dot and movie file or a gift. The movie file is pretty self explanatory. It's just a quick time movie, as you can see here. But for the gift, there are a few export options. As the name implies the to dribble options. Prepare your gifts so that it matches the dimension requirements toe. Upload your interactions to Dribble, a popular social network for designers. Obviously, the retina version is higher quality than the non read option. Principal adds a nice shadow around the screen when you export your interactions, so I usually leave the background color, as is with a white or almost white background. 100% option will export your interaction as a nice full size gift. But keep in mind that the file size will also increase accordingly. The 200 H option will decrease your file size, but it will also decrease the quality. So pick your poison 13. Conclusion: Hopefully now, after this course, you feel well equipped to create your own interaction, designs in principle principles and extremely versatile interaction. Design tool. And there's always more to learn and explore. If you like my teaching style, check out and subscribe to my YouTube channel, where I regularly post many principal tutorials. And if you enjoy the course, please comment and spread the word having prototyping.