Let’s be honest with ourselves, there’s nothing better than seeing your prototypes come to life. But for a lot of designers, especially students in grad school, time is limited and so is our learning bandwidth. So how do we rapidly prototype without getting overwhelmed with our tools?
Introducing Principle
Principle is an animation tool that makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.
I’ve used some other animation tools to create clickable and rapid prototypes but nothing has seemed as intuitive as Principle. That being said, it does have it’s limitation and that’s where tools such as Framer step in. However, you can do a lot of incredible things with Principle and quickly.
Code less, Create More.
Principle is the love child of Sketch and After Effects and their baby was cute AF and also helped you make some awesome animations.
Principle relies on art boards, drivers, animation timelines and some slick GUI UX to help guide designers.
Artboards
If you’ve worked in Sketch, or Illustrator or Framer or Invision Studio, you are intimately familiar with artboards. They’re workspaces for your art and generally are based off dimensions of your intended viewport. Here is an example of what a few artboards looks like in Principle.
Drivers
Drivers connect properties to each other using keyframes. Unlike Animated transitions, which occur “between” artboards, drivers work in artboards. Click the Drivers button show or hide the current artboard’s drivers. If your mouse doesn’t support horizontal scrolling, hold space and drag the Drivers panel to scroll.
Drivers work similarly to an animation timeline, except drivers animate based on a changing property(such as x coordinate), instead of time.
Animation Timeline
As mentioned above, the animation timeline allows you to adjust the animations that happen between the artboards. You can manipulate each individual instance of a change, it’s duration, delay and type of curve.
To link artboards and activate a particular animation, all you need to do is indicate the type of event that will trigger an animation from one artboard to another. Incredibly simple, Incredibly intuitive.
Framer or Principle?
Both of these tools are very powerful. Framer has a much steeper learning curve; they’ve moved away from a 100% code based prototyping tool, but you still need to have a good grasp of CoffeeScript in order to leverage some of it’s more powerful capabilities such as; for loops, arrays, classes and modules.
I am still no expert when it comes to Framer I still find it challenging at times to create some of my intended animations. Principle is the perfect tool to help you learn the fundamentals of animation, master micro-interactions and create working prototypes. It also allows you to share your prototypes with your team and export GIFs and .mov files directly from the project(which Framer doesn’t support). Principle’s design side it’s that robust but they make it very easy and intuitive to import your files directly from Sketch.
If you’ve been wanting to learn animation but don’t necessarily have the time to learn code or aren’t familiar with CoffeeScript of JS, then Principle might be just the tool you are looking for.
