How to Create Prototypes for Interactive User Interfaces with Principle

Dmitriy Goncharov

UI/UX designer

SHARE

104

In my previous article I talked about using Pixate for prototyping the second version of Koloda Tinder-like animation. Awhile after, I noticed that a new tool for animated and interactive user interface designs called Principle started quickly gaining popularity on Dribbble. I thought it was probably because Principle is utterly simple and intuitive. It didn’t take me long to sign in for a free trial.

The prototype I created using Principle features feed interactions in the Material Design style. It took me half an hour to build it. On September the 8th the shot got into Weekly Replay on Dribbble.

[My prototype in Principle]

Today I want to share my impressions from mobile app prototyping in Principle and explain how to work with it so it takes you even less time to design beautiful interactive prototypes.

Principle toolkit

First of all, let’s look what Principle consists of:

Countless artboards. In Pixate, for example, there is only one artboard which posed difficulties in work.

Standard palette for aligning elements

Basic palette for editing shapes (assets), sizes, position on an artboard, opacity, radius, angle of inclination, scale, and color.

Palette that allows you to set vertical or horizontal movements for the interface elements

Timeline animation like in After Effects

Drivers

Device simulator with the ability to shoot videos

Principle allows you to create text and shape layers, and supports import of assets. When you create or edit an artboard, you can choose from the list of the most popular sizes including iOS sizes and Dribbble’s 400 x 300 and 800 x 600 px.

Creating interactions

For creating simple interactions everything you need to do is duplicate the artboard with a ready-made interface (with preset elements), change the layout of those elements, and specify an action which will help you get from one artboard to the other one.

Transitions

All transitions are displayed in the form of arrows placed above the artboards. We can view and edit properties of each element of the animation in the timeline by clicking on them.

Drivers

Another thing is animating interactions using Drivers! This feature is similar to the if-conditions in Pixate. But in Principle it’s implemented as a regular timeline. This means that behavior of an element (e.g. changing its position, size, angle) can be defined by the layout of the movebale elements.

Saving

We can save the prototype in the native Principle format, and also, make a video and save it in the video format or GIF.

In conclusion, a couple of tutorials will be enough for you to learn how to use Principle. Time to talk about its advantages and disadvantages.

Pros:

intuitive interface

multiple artboards

timelines and drivers

preview in the simulator (and with the help of Mirror on iOS devices)

export of video and GIF

Cons:

some bugs (but the team is working on them)

the cost is only $100!

Despite the disadvantages, Principle is a great tool for creating interactive UI prototypes for mobile, especially taking into account that it’s only an MVP yet! You can make a lot of amazing things with it: slick interactions, short animations, and even a multi-screen app. But the most incredible qualities of Principle as a mobile UI prototyping tool is simplicity and convenience that a lot of its counterparts still lack.

3.7/ 5.0

Article rating

16

Reviews

Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?