Principle — 4 Little Tricks to Share Your Idea in an Effective Prototype
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.
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!
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.
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.
To create the effect of floating label you need to prepare three text layers: Placeholder text (grey), Label text (blue) and Main text (black).
On the first artboard you need to set all of these three text layers correctly:
- Placeholder text should be at 100% opacity with choosen font size, for example 32 pt.
- Label text should be at 0% opacity with font size and position same as in Placeholder text layer.
- Main text should be at 0% opacity with font size and position same as in Placeholder text layer.
Duplicate the artboard and set these three text layers on a second artboard:
- Label text should be at 100% opacity with choosen font size, for example 14 pt and set up at the right position.
- Placeholder text should be at 0% opacity with font size matching that from Label text layer.
- Main text should be at 100% opacity.
Indicator Split
Eye candy. Add some delight to your design!
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.
Create two rectangles and set their radius to 100.
Then create another two on the layers above and set them to cover interior corners.
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.
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.
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.
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!
Transitions like this, with custom motions force us to use “Animate” functionality. You can find it in the top menu.
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°.
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.
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:
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!
