Principle :
the prototyping tool you’ve got to try

Published in

The Startup

7 min readAug 19, 2015

It has been 5 months now, since Daniel Hooper reached me to introduce his new software. He gave me the awesome opportunity to become a betatester of the early version of Principle.

I have been looking for a good way to animate and interact with my design for a very long time.

I used to work with After Effect

Which was very time consuming, not interactive friendly and pretty much unreal. I used to spend a lot of time working the easing curves to get the perfect smooth animation the developers were never able to reproduce.

I tried Pixate and Atomic.io

But never really get into it as the UI was not very familiar. It required some practice and time (that I did not have) to understand how it works. So I dropped it and wasted my 30 days trial…

I never get into Framer.js

I am not much of a coder. In my opinion, if you have to code to create a prototype, you might as well learn the real language and spare some time to your developers. (I exaggerate here, I know framer has great perks, but still).

Origami was just too much to learn

A lot of designers find it awesome. And I agree, it does look very efficient and powerful, with a huge community sharing their knowledge. But the patch environment is unfamiliar to me. So I can’t.

Proto.io lost me with the preview window

It is a very powerful tool, but the fact that you have to save and reload your prototype every single time to see how it works is a dealbreaker.
There are some really interesting features though.

I might be a bit lazy when it comes to trying and learning new software?
I really like visual and fast environment to work. And basically, going from one software to another, when they are not sharing the same concepts, names, UI, shortcuts is a productivity killer.
(I am looking at you Adobe, how come pressing “T” on AE is not for Text tool?).

I don’t like switching mental models every five minutes.

My holy Grail is called Principle

This software is a clever mix between Sketch, Keynote, Flash and After Effect (plus some bonus features specifically for interactive prototypes).

What struck me on the first use is that it feels instantly familiar. If you are familiar with Sketch, you will be with Principle :

Inspector
Layer list
ARTBOARDS (!)

How it works

First : You create (or import) your assets

Second : You choose an asset and its interaction

Big blue rectangle is selected. I choose a “TAP” interaction

Third : The interaction duplicate your artboard, and you can modify every assets

Fourth : It automagically generates a transition and you can play with the prototype.

It is ridiculously fast and simple to create a complex transition.

What is so good with artboards in the prototyping workflow?

I once read that animating an interface is like being a choreographer. The canvas is the stage and the assets are dancers.
When transitioning from one screen to another, every pieces of UI which will be animated needs to make sense.

Working with artboards here is really the best because you can see each state of your app, each screens in a glance and how the UI will react.

Key features

Easily creating tap transitions from one screen to another is, to me, the core of the software.

But there are a lot of great features in Principle to bring your prototype to the next level.

Interaction

The software has been developed focusing on Touch screen application. So it enables a lot of various interaction :

Tap
Drag
Scroll
Auto animation
Long press

Animation panel

“What does every article about animation have in common?
-They strongly recommend to never create linear animations, because it does not exist in the real world.”

And here again, Principle is great. By default, every animation will apply an ease-in / ease-out effect which you can easily switch to pre defined or custom effects.

Also, this panel will allow you to change the duration of an animation, choose which assets will animate first, and create meaningful transitions.

The animation panel is on the bottom where you can control every animation (pretty much like After Effect but ten time faster).

Here is the previous animation with different animation settings :

Driver panel

This feature took me a bit of time to fully understand but once you got it, it is amazing what you can do on your prototype.

Basically, the Drivers are used on scroll or drag event, to “link” assets together or add several properties on one item.

Let’s say, you want an overlay to appear while dragging an asset or you want an assets to rotate while swiping (Tinder / Jelly alike).

That is what the drivers are used for. And a lot more. Here is how it works.

First : prepare the assets

The purple rectangle is outside the artboard and while dragging it, an overlay will progressively appear.

Second : Open the driver panel (on top) and select the overlay rectangle which is currently transparent.

Third : add opacity keyframes on the layer, this way, the more purple rectangle get dragged down, the darker the overlay gets.

And the prototype is fully functional. This feature requires a bit of practice, but once you get it…

There is more…

Of course, there are a lot more small features like masks, text, presets artboards… And for you Dribbblers, there is an auto GIF export of your animations to go shoot with your fellow designers friends on the pink website.

Not yet perfect

Being a betatester for Principle has been truly great. I used the 0.2 version of the soft and immediately fell in love with the potential.

There is still a long road to go.

There are not as many effects as After Effects, but just working with masks, X, Y, opacity, Scale, Rotate, already enables you to do a lot, focusing on simplicity.
Sketch import are not here yet, but I bet they will come pretty soon.
Embed web prototypes does not yet exists.
Iterations are not yet optimized.

but very promising

I am pretty confident about the future of the tool because I saw how the Principle team listens to his user’s feedback and implemented them.

I must say, I am a bit sad that Principle is now publicly available, I will have to share my favorite secret toy with everybody.
But I can’t wait to see what you are all gonna create with it and how great prototyping tools will influence every future apps.