Yalantis: iOS, Android And Web App Development Company

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces

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.

prototype built in Principle

[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

Principle

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

creating interactions in Principle

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

transitions in PrincipleAll 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

Principle driversAnother 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

prototyping things in Principle

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.

Design

Our First Look at the Floid Prototyping Tool

Design

UX Design Techniques Graphically

Design

How Can You Use Flinto to Create Cool Interactive Prototypes?

See our workout book

Know what your health & fitness app can look like

Check out the case study