Principle — 4 Little Tricks to Share Your Idea in an Effective Prototype

Kamil Janus
Nov 24, 2016 · 7 min read

How to prepare a clickable prototype that contains all interactions.

Image for post
Image for post

How many times have you tried to explain your excellent design to a developer? Either using gestures, storyboards or easy digital prototypes with finished design views — it’s not easy to communicate your vision. Principle gives you the power to show basic interactions in few easy steps. After reading this article, you will be four steps closer to express your vision.

Here is full sized Calendar View I’ve prepared for my HUB Mobile Application. Firstly I tried to explain my vision of interactions to my friends, using InVision app with few screens uploaded. Didn’t work. Then I spent 2 hours preparing this prototype. It finally opened their mind.

The Beginning

There is one thing you need to remember if you want to use Principle. Preparing designs in Sketch will make you able to just copy-paste full components from one tool to another, so that you save a lot of time. Be sure that artboards in Principle are the same size as those from Sketch. Thanks to that all the parts will fit each other.

Preparing Principle Artboard

After preparing design in Sketch, you need to think about animated layers. Each motion is somehow different but in this case you need to divide them into two categories.

Motions like fading or moving on y or x axis don’t require extra work. You can simply copy (ctrl+c) the components in which you want to use these motions from Sketch and paste (ctrl+v) them into a Principle artboard. However remember that asymmetric shadows will disable auto center option. Furthermore Principle doesn’t contain rulers.

Image for post
Image for post
moving and fading

In case of motions like stretching, rounding corners or even text changes, I suggest you to recreate these layers in Principle. Don’t worry, texts created in Principle will match exactly these from Sketch!

Image for post
Image for post
stretching and rounding

I prepared 750x1334 artboard. The whole animation shown above took a total of 9 artboards.

Motion Matters

Well animated interfaces will help the user understand the relation between two screens and prepare her or his mind to smoothly cross from one action to another, but here is a catch — UI is not a Disney movie, so step wisely when adding successive motions.

In this part I will show you how I design motions in my prototypes. If you need to fill some blanks related to Principle basics, do not hesitate to watch this Principle basics tutorial.

Floating Label

To save space and provide user experience, remember to keep users up to the context even if they turn their eyes for a moment.

Image for post
Image for post

To create the effect of floating label you need to prepare three text layers: Placeholder text (grey), Label text (blue) and Main text (black).

Image for post
Image for post
step 1

On the first artboard you need to set all of these three text layers correctly:

  1. Placeholder text should be at 100% opacity with choosen font size, for example 32 pt.
  2. Label text should be at 0% opacity with font size and position same as in Placeholder text layer.
  3. Main text should be at 0% opacity with font size and position same as in Placeholder text layer.
Image for post
Image for post
step 2

Duplicate the artboard and set these three text layers on a second artboard:

  1. Label text should be at 100% opacity with choosen font size, for example 14 pt and set up at the right position.
  2. Placeholder text should be at 0% opacity with font size matching that from Label text layer.
  3. Main text should be at 100% opacity.

Indicator Split

Eye candy. Add some delight to your design!

Image for post
Image for post

There is nothing special at first sight but Principle doesn’t allow us to change radius of selective corners. If you want to change only two, like on the picture above, you need to mask them.

Image for post
Image for post
step 1

Create two rectangles and set their radius to 100.

Image for post
Image for post
step 2

Then create another two on the layers above and set them to cover interior corners.

Image for post
Image for post
step 3

Duplicate the artboard and set radius corner of two covering rectangles to 100, than move both from the right side by about 100 points to the right.

Date Picker

It’s similar to the native one, but we can simply adjust it to our design.

Image for post
Image for post

When you start to create roller like this, you need to remember one thing: Principle recognizes and animates layers basing on their name. This is crucial for animations in order to display propertly.

Image for post
Image for post
text layers on the first artboard

Prepare the artboard with seven or more text layers. You need at least seven layers for one complete loop (five visible and two hidden). Now set their opacity to 100%, 50%, 20%, and 0% for two hidden dates and change font size. I suggest jumping by 2–4 pts.

Image for post
Image for post
text layers on the second artboard

As I wrote before — Principle recognizes layers basing on their name, so in step two you need to duplicate the artboard and change dates with their label names like in the example above.

Confirmation

Users love to be rewarded. Spice up your design with some cool success screen illustrations!

Image for post
Image for post

Transitions like this, with custom motions force us to use “Animate” functionality. You can find it in the top menu.

Image for post
Image for post

Put your confirmation card off the artboard edge with opacity set to 0%. In addition I’ve changed the angle to -5° in order to get smoother transition.

Duplicate the artboard and place confirmation card at the destination position with 100% opacity, reseting its angle to 0°.

Image for post
Image for post

Select transition arrow above artboards and open “Animate” feature that I mentioned before. Expand motion menu by clicking on the “X” axis motion and select “Spring”. You can adjust Tension and Friction on your own, I used 500/30, to get soft motion.

Image for post
Image for post

If you want to set automatic return to the previous state, select the whole artboard and choose “Auto” from motion list. As the result, screen will return to selected artboard after animation is over.

Dribbble

Have you come up with something you’re proud of? Time to show off! If you are familiar with Dribbble community — that part is definitely for you. You worked on your design hard. Be careful! It won’t be effective if you fail to export it properly.

Dribbble shot’s size limit is 8 mb. Thats much. Or not? If you are using mainly shapes and fonts, that’s pretty enough for 10 or even 20 sec animation. If your design is based mainly on photos and shows a lot of different screens, that will increase the weight significantly. For me, safe limit is 8–10 seconds, as it also provides easy access for users with slower internet connection.

Personally I prefer to export .mov recording from Principle. Then I import it to Photoshop 800x600px canvas with some nice background. From there I hit export > save for web and choose following settings:

Image for post
Image for post

Shot exported with this preset took less than 3 mb. That’s pretty good score for 10 sec animation and the quality remained very good. Remember to set looping option to “forever”, otherwise your shot will loop only once and be less impressive!

So remember, adding delight to your design helps to raise engagement and users’ trust. Everyone likes more thought out projects.

Tap the ❤ button if you found this article useful!

About the Author

Kamil is a Designer at elpassion. You can find him on Dribbble and Twitter.

EL Passion Blog

We're a team of experts passionate about code and design.

Kamil Janus

Written by

UI/UX Ninja at @elpassion

EL Passion Blog

We're a team of experts passionate about code and design. We make great apps, but also love to learn, meet new people and exchange ideas.

Kamil Janus

Written by

UI/UX Ninja at @elpassion

EL Passion Blog

We're a team of experts passionate about code and design. We make great apps, but also love to learn, meet new people and exchange ideas.

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