The Designer’s Guide to Prototyping in Principle

Learn Principle for Mac from scratch with these 12 GIFs

Abhinav Chhikara
Feb 18, 2016 · 6 min read

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.

Image for post
Image for post
Prototyping a parallax scroll (click to download .PRD file)

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.

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.

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.

Image for post
Image for post
Creating artboards

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.

Image for post
Image for post
Dragging elements from Finder
Image for post
Image for post
Copy pasting elements from Sketch

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.

Image for post
Image for post
Simple artboard transitions
Image for post
Image for post
Adding more artboard transitions

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.

Image for post
Image for post
Adding transition delays
Image for post
Image for post
Editing easing curves

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.

Image for post
Image for post
Adding scrolling
Image for post
Image for post
Adding paging
Image for post
Image for post
Adding dragging

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.

Image for post
Image for post
Driver animations

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.

Image for post
Image for post
Exporting prototypes

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.

Download Sketch file

Download Principle prototype

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:

Image for post
Image for post
Download
Image for post
Image for post
https://gum.co/DdYgx
Image for post
Image for post
Download

View more on Dribbble

Image for post
Image for post
Currently available for $49 only

Interested in more?

Hi, I’m Abhinav Chhikara. Thanks for reading this article, say hi on Twitter.

My course on motion is now available in an early beta here.

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Abhinav Chhikara

Written by

Building communities, establishing networks. Founder @ 10kdesigners.com, previously Head of Design @unacademy

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Abhinav Chhikara

Written by

Building communities, establishing networks. Founder @ 10kdesigners.com, previously Head of Design @unacademy

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store