How to prepare a clickable prototype that contains all interactions.

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.

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!

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.

“There is no such thing as a boring project. There are only boring executions.” –Irene Etzkorn

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.