Prototyping with Principle: A Play-by-Play
I’ve been a designer at Capital One for almost 4 years now. Needless to say, I’ve used quite a few prototyping tools in that amount of time. Ever since the release of Principle, however, my interaction design work flow has significantly improved. I can create initial prototypes in a matter of minutes and then easily translate specific animation details like delays, curve types, and durations over to developers when a concept is more finalized. Because of the speed and intuitiveness of the tool, I can get feedback from my team on early concepts and iterate on designs much more quickly than before.
Principle’s minimalist interface makes it easy to jump in for the first time. In fact, it looks a lot like Sketch, and many of the shortcuts are even the same… ‘R’ creates a rectangle, ‘T’ creates text, ‘Control + C’ lets you sample colors, etc. You can create simple shapes and text fields within Principle, pull in external images, and even import assets directly from a working Sketch file.
There are so many prototyping tools out there, it’s hard to know which one you should put the time and effort into learning. That’s how I felt when I first heard of Principle, too, but as I already mentioned, it’s super intuitive and it allows for custom transitions and micro-interactions that other tools don’t. Sharing your interactions with other designers and engineers is also really easy — you can export them as a .mov or .gif file or download them directly onto an iOS device using the Principle Mirror app. This is especially important so that my team can experience the interactions as they would in their natural environment (and even on their own devices!) instead of just watching me click through them on my computer screen.
Okay, enough talking… Let me show you how easy it is to use.
Tapping on the lightning bolt associated with any object reveals all the event-based options, including the basics like tap and long press, as well as more complicated gestures like scroll begin, scroll release, and scroll end. Hover gestures are also included in case you’re working on a web app.
One useful feature is the automatic event transitions between artboards. Principle detects changes between artboards on event transitions, and any objects with the same layer name are automatically animated for you. That’s right — all you have to do is change an object’s properties from one artboard to another to create an animation.
If you want to get fancy, you can customize the duration, curve, or delay of an animation by clicking on the transition arrow on the canvas above your artboards.
And if you want to get really fancy, you can even use drivers to connect properties within an artboard to each other using keyframes. Drivers work kind of like an animation timeline, except that they’re based on a changing property instead of time. So you could, for example, use drivers to create a custom vertical scroll interaction. In that case, the changing property would be the Y value of the scroll.
If you’re interested in jumping in, check out my Principle Tutorial website. I’ve curated short videos (all under 3 minutes) showing how to create all three of the mobile interactions shown above. If you’re feeling really ambitious, you can even download the assets and follow along.
DISCLOSURE STATEMENT: These opinions are those of the author. Unless noted otherwise in this post, Capital One is not affiliated with, nor is it endorsed by, any of the companies mentioned. All trademarks and other intellectual property used or displayed are the ownership of their respective owners. This article is © 2017 Capital One.
