8 Reasons User Experience Designers will ❤️ Principle for Mac.
If you’re a UX designer who’s not using Principle for Mac yet, buckle up.
Animation has become an increasingly important skill for product designers to have. At Crema we’ve been experimenting with a lot of different tools to get the job done. Principle for Mac is one of those tools we’ve been going to a lot lately. It’s quick, adaptable, and works like magic.
I love cats. And magic.
Let me tell you a bit about why we love it so much.
#1 — Interacting with your prototype
While creating animated prototypes in Principle, you have the ability to actually interact with what you’re creating, rather than simply playing it as you would in a program like After Effects (which we use for some types of animations).
Principle has a separate viewer screen where you can interact with your animations or transitions in their actual screen size. Using this same viewer, you can record your animations as you interact with them.
This is a very important feature for obvious reasons. It’s incredibly important to see what you’re doing as you’re doing it, rather than after you’ve exported it. It allows you to get a feel for the animation and iterate on it quickly.
PRO TIP: Duplicate the file and create a new version that is slowed down significantly. This will help your developers to see exactly what’s going on in the animation, especially if it’s somewhat complex.
#2 — It works like magic
Seriously. It works exactly the way you’ve always wanted an animation tool to work. It does the math, and straight up gets the job done for you.
Here’s a simple example.
You have an art board. There is a blue square in the center.
You have a second art board. There is still a square, but it’s purple. And it’s still in the center, but it’s 50% the size and at a 45° angle.
By simply selecting a transition for a layer (be it hover, tap, scroll, etc), Principle will automatically animate the two layered elements appropriately. Once animated, you can customize the delay, length of animation, etc. using the animate tool.
The way Principle recognizes what deserves animation is by the name of the layer. If two layers have the exact same name yet their styles differ between artboards, they’ll be animated.
It’s amazing, and makes the process so incredibly fast. It took me less than a minute to do this.
#3 — Easy to adjust
The beauty of Principle is that it’s quick, easy, and does it for you. However, you probably have a more specific vision for how you want your design to animate than Principle can make happen. You’ll want to tailor the animation to suit your needs.
There are two tools for adjusting animations. One is called the Animate tool. The other is called Drivers.
I won’t go super in depth to these, as it’s fairly complex and could be an article of it’s own, but I’ve attached some tutorial videos at the end of this article for those interested in learning more about how these work.
Animate
As I shared previously, Principle will automagically animate my design if I set a transition between two art boards.
In setting a transition, the layers variables are populated in the Animate tool. Principle will give me control over each of the variables that are changing as the animation happens, so that I can customize it to my needs.
Here, I’m adjusting the order in which my animations scale, rotate, and change color.
Suppose I want to adjust the order in which my three animations take place rather than having them all happen at the same time. By moving the variables along the timeline (seen above), I can dictate when the color, for example, actually changes. I can also modify the length of time that each variable takes to change. By lengthening the blue bar I can change it from animating over the course of .5 seconds to 1 second, or whatever is desired.
Drivers
The Drivers panel will allow you to make something animate based on a Scroll, Drag, or Page. It animates over the “x” value rather than over time, which is very useful.
For example if I have a square shape, I could use drivers to make it change into a circle, get smaller, and rotate all while dragging it to a new location.
Animate and Drivers are both very powerful tools!
#4 — Sketch import
This rocks!
If you’ve created your designs in Sketch and want to do an animation in Principle, it’s super easy.
Keeping the Sketch file open, transition over to Principle and click the Sketch Import button in the top bar. Principle will bring in the artboards just as you have them in Sketch, so that you can begin animating without having to recreate anything!
I recommend creating a new sketch file, with only the art boards and layers you want imported into Principle, as they will automatically pull everything in. Hopefully in the future there will be the ability to select specific art boards you want to import from your Sketch file.
#5 — Export to .gif or .mov
Exporting out of Principle is simple. I can either export my animation into a .mov file, or a .gif. Additionally, I have the option of exporting a gif to dribbble dimensions. If your art board is a mobile size, principle will export the gif with a background at 400x300 or 800x600, allowing you to choose the background color. If you’re a dribbbler, this is very useful!
#6 — Any art board. Any size.
Pretty much a given at this point, but it feels important to mention. I’ve experienced a few prototyping tools that constrain the dimensions of your artboard, or allow web-only or mobile-only sizes. That’s not the case with Principle, and I really appreciate that.
#7 — Principle mirror
By downloading the Principle Mirror application on your iPhone, you can interact with your animation on your device. This is super fun! It provides such a different experience than interacting with it on the desktop, in the same way that going through an InVision file is so different than just looking at Sketch artboards.
As of right now, you can either plug your phone into your computer to interact with the prototype, or you can open a Principle file in an email and it will open up the mirror app.
I’d love to see the ability to connect via bluetooth. Hopefully that’s in the works over at Principle HQ. 🙏
#8 — So fast!!!
Honestly. It probably takes me a quarter of the time to make an animation in Principle as opposed to After Effects. It’s incredibly Agile, especially once you’ve gotten the basics down. I love it! And I want you to love it too.
If you’re interested in using Principle but don’t know where to start, this is what I’d recommend:
First — Start a free trial!
- You’ll have 14 days to play around and decide if it’s the right thing for you. They only count the days you actually use it, so when I was going through my free trial, I think I had it for well over a month, as I was just dabbling in it a few days at a time.
Second — Go through tutorials.
- I’d recommend starting with the tutorials that Principle has on their site, as it will give you a high level idea of how everything works.
- Then, I would go through some of the videos on Sketchapp TV’s YouTube channel for Principle here. This will give you a better idea of how to do some more complex transitions and animations, and they’re always adding more videos. I recommend downloading their files and following along, cause I think our brains learn that way.
- If you’re still looking for more, find people on Dribbble that are using Principle and ask them if they’d be willing to share a Principle file with you so that you can see how they created it. I’d be more than happy to share a file of mine with anyone who’s interested. I’m on Dribbble here.
Third — Jump into your own animation
- Just go for it! Experiment. You’ll learn a ton along the way.
Good luck!
Here are some animations I’ve created using Principle
Thanks for reading! We like to write about our knowledge in the industry and what we’re learning along the way. If you want to hear more from us, visit our Publications.
If you or your company is looking to build a product, we here at Crema are passionate about turning good ideas into great product experiences. Reach out to us!
