The Designer’s Guide to Prototyping in Principle
Learn Principle for Mac from scratch with these 12 GIFs
When Principle first came out, it took me a couple weeks to try it out for the first time, despite all the rave reviews I’d heard about it. Mainly because it’s always a recurring cycle for designers, new prototype tool comes out > designers get excited about it > use it for a while and the cycle repeats. But the day I did come around to using it, I was blown away.
Why use Principle?
My goto tool so far for element level prototyping was Pixate, but Principle cut my prototyping time to a tenth. What would take me 45 minutes in Pixate, Principle could achieve in 5. The easier it is to prototype motion, the more likely you are to experiment with it. The sooner you can start experimenting with motion in your workflow, the more meaningful it’ll be.
Download and setup
Principle for Mac is available as a 14 day trial on their website, which should be more than enough time to help you decide whether it’s right for you. It’s $̶9̶9̶ (Update: $129) for a license with one year of updates.
Note: Principle is currently available only on Mac. It allows you to animate Android, iOS and Web prototypes or even simple gifs, but you can only preview them in your computer or on an iPhone.
If you’re a Sketch user, you’ll immediately notice the similarities Principle has. There’s artboards, a layer list and a layer properties pane.
Artboards
Each artboard in Principle is a screen, or a state of an animation. You could create an artboard from one of the preset device sizes in the dropdown.
Importing assets
You can just drag and drop elements from the Finder instantly to an artboard. Add @2x to the filename to import it at half the size.
Alternately, you could also copy and paste elements from Sketch. Just select the layers to import, and cmd+C cmd+V. Keep in mind that the layers you select together in Sketch will be imported as a single layer in Principle. So bring in layers that you want to animate separately as a separate layer in Principle.
Simple transitions
After you’ve imported assets, it’s time to create your very first prototype. You can select any element to add an action to it. Currently, Principle supports Tap, Long Press, Scroll Begin, Scroll Release, Scroll End, Drag Begin, Drag End, Touch Down, Touch Up, Hover Inside, Hover Outside and Auto. You’ll start using this as you create more in Principle.
Duplicate your current artboard and add an action between them. Principle looks at similarities in the two artboards by the layer names and then automatically adds movement or animation from the first state of the layer to the next.
Refining animations with delays and curves
The Animate panel reveals changes for each action between artboards. Here, you can change the animation duration, easing curves and delays for movements between two artboards.
Adding scrolling / paging / dragging
To create a scroll group, just select the layers and select scroll from the dropdown. Same for a paging and drag groups. The difference between scrolling and paging is that while scroll creates a window that you can scroll content through, page is used to snap content to the window. Drag is similar to scroll but lets you move the object freely. You can experiment with each to understand the difference.
Animations driven by scroll / drag / page
To create animations that don’t depend on an action (Tap, Long Press etc) but depend on scrolling / dragging /paging, we need to use Drivers. The drivers panel shows a timeline that you can create for each action that takes place in your artboard. To create an animation, select a layer from the layer list, click the carat in the drivers panel, and choose a property that should change over time.
The horizontal timeline is based on movement of scroll / drag / page and subsequent change in the Y displacement. Move the timeline backwards and forwards and click the carat again to create another keyframe. Principle should now automatically animate between the keyframes when the scroll / drag / page action happens.
Exporting and viewing prototypes
To view what you’ve created on your phone, all you need to do is download and open the Principle Mirror app, and connect your iPhone to your Mac. For presentations or uploading to Dribbble, you can also record the prototype and save it as a mov or gif. You need to keep the preview window at 100% of your artboard or the quality might be affected.
(Bonus) Exporting GIFs that don’t suck in quality
The GIF exporter is still a little wonky, and as a result the GIFs exported are of low quality and high size. You could also open the mov in Photoshop and use it’s Save for Web feature to control size and styling of the gif. While this is a little time consuming, it’s the best way to have complete control over the size and composition.
You can download the prototype made and try it out yourself! I’ve also included the .sketch file for reference.
Freebies
Another great way to learn is to take a PRD file and deconstruct it to see how it works! Here’s some free PRDs of stuff I’ve built:
