Principle

Principle is a native tool for advanced prototyping. You can use it for creating realistic transitions and micro-interactions, that are more advanced than the basic transitions Sketch or InVision offers. Principle works well together with Sketch, so you can prepare screens in a dedicated design tool. Principle is relatively easy to learn, compared to what you can do with it (it is much easier to learn than Framer for example). It is a great tool for communicating an animation style to stakeholders, or to validate ideas for transitions and interactions. You can also use Principle to prototype an entire flow of an application, if it requires animations, gestures or rich media.

Tips

• Animations in Principle kind of work like Magic Move in Keynote and happen between two artboards. If you start with two identical artboards (A and B) and change the properties on artboard B, Principle will automatically animate the changes. You can then further tweak this animation to your own liking.
• When you are making a screen design in Sketch, that you want to animate in Principle, pay attention to naming in Sketch. Principle automatically animates objects with the same name. If you don’t prepare your Sketch file well, you could end up with stuff flying all over the place in Principle.
• If you want to make a non-interactive animation, like a loader or animated illustration, it’s best to do that in AfterEffects. You can easily import AE animations into Principle, to include them in the prototype. To a certain extent you can even control the playback of the imported videos.
• When prototyping a complex app it’s essential to use components. Before you start, it could help to sketch out the architecture of your prototype and figure out how your components will be nested.
• Like with every prototype, only build what you need. It can be tempting to prototype an entire app with all animations. But if you are only using native transitions and aren’t doing a user test, it might be a waste of time.

Learn more

• Download Principle
• Basic tutorials by Principle
• Principle Examples - downloadable, user generated
• Look through the slides of the ‘Animatingin Principle’ survival class
• Get in touch with the Animation guild lead.