12 Hints on How to Use Principle Like a Pro

12 Hints on How to Use Principle Like a Pro

Our Yalantis design team loves trying new prototyping tools. We’ve worked with Flinto, Floid, Pixate and many others. But our team has a particular affection for Principle. We published a brief review of this tool on our blog before, and now we’ll dig a little deeper into Principle’s possibilities and share some hacks and hidden possibilities we’ve discovered while working with Principle.

1. Use Circular Motion

I used to think that Principle could move objects only in a straight line, and I felt somehow limited by that. Then I came across a prototype made in Principle that featured an object moving in a circular trajectory!

As it turns out, Principle has secret feature never mentioned in the Principle’s official guides: you can apply a circular motion to an object if it is included in a group.

To make this happen, you should move an object or a group of objects into a shape with 0 percent opacity, and then turn off the Clip Sublayers (objects will move beyond the object’s border). Now, when you set a shape’s rotation, an object or a group will move in a circle. You can also set an arc movement, an oval orbit and so on. To do that, just set the movement for the whole group.

Here’s how it looks in Principle:

And here’s how circular motion can be used for a preloader animation:

2. Don’t neglect outlining the flow

When designers want to realize a prototype idea, they tend to focus on one cool animation that they consider the prototype’s heart and soul. However, while trying to make that one animation perfect they often neglect other elements, and eventually find the prototype to be inconsistent and unfinished. This usually leads to numerous edits in a source file, and that’s never a pleasant thing.

To avoid such situations and save yourself a lot of time and nerves, you should always thoroughly plan the whole prototype’s flow. First, make a blueprint of the future prototype on paper (or make it as a flowchart), then design it in Sketch or Photoshop, showing all transitions between screens. The screens can also include all interim states like scrolling, movement, translucency and so on.

Planning the flow will help you understand in advance which elements should be clickable. This will allow you to avoid logical inconsistencies in the prototype’s flow.

[The flow of one of my Dribbble shots]

3. Select a suitable resolution

Make sure the size of your Principle document matches the rules of the platform you will demonstrate your prototype on.

For example, to prepare a live preview for a client, you should make a prototype in @2x or @3x, while for a Dribbble shot @1x would be enough. Hence, on Dribbble, your prototypes won’t downsample, and they will look good on a device with high DPI as well.

If you don’t take these parameters into account, enlarging or reducing the resolution of your project afterwards will be quite problematic.

4. Use vector objects and texts

Everything is quite simple when it comes to using texts and vector graphics. They save time while prototyping and editing. They also positively affect the final image quality.

There’s one caveat to vector graphics in Principle, however: you’re limited to creating rectangles. You can change fill colors and stroke, and can round corners. It’s not much, but you still shouldn’t disregard vector objects: the import of bitmap assets affects your further work with the prototype and puts limits on 1) masks using, 2) resolution changing, 3) applying changes to the prototype’s logic, and 4) assets updating.

5. Don’t forget about groups

Like any decent tool, Principle loves order. That’s why it’s important to name and group all interrelated objects right when you create them. Why? Quite simply because an object placed into a group can move both with the group and in relation to the group. If you group objects at later stages, you’ll probably run into some problems. Also, consider that you can apply drivers to several “highlighted” or “grouped” objects at once, which makes prototyping much simplier.

6. Use Masks

By moving objects into a group or shape, you can turn on and off the Clip Sublayers parameter. Thus, you can create a mask for one or several objects. Of note, the same group can be a mask or not be a mask depending on the artboard it’s on. This feature alone provides a lot of room for creativity.

Artboard 1.png

[Creating a mask in Principle]

7. Divide actions into parts

Another particularity of Principle is that it’s quite difficult to achieve complex interactions using only default solutions and tools. For example, I faced problems trying to implement paging of separate elements that animate when you drag them. The same issues appear when you need to include several simultaneously animated objects.

To solve this problem, I decided to break actions down into component parts, where the first part of an  animation starts when you interact with the interface, and the second part happens when you release the finger. You can achieve that by experimenting with Drag Begin/Drag End.

Therefore, you get the following chain.

  • Screen 1: Drag Begin
  • Screen 2: Animation 1 – Drag End
  • Screen 3: Animation 3

In the same fashion you can divide actions for object animation while using Scroll Begin/End/Release.

To achieve smoother and more natural animations, I suggest using the interim state drivers for active and inactive objects.

[Card swiping I achieved using drivers and not implementing paging]

8. Balance motion graphs and timelines

Working with animation timings and graphs is pretty much like working with text. In order to accelerate and streamline your workflow in Principle, you should consider the following key points:

  1. The order and the logic of actions.

  2. Balance in actions speed.

  3. Animation graphs. Actions must be precise, logical and subtle.

What’s important here is not to overdo bounce (spring), and to follow the logical rhythm. I highly recommend you study what graphs can look like.

9. Make the impossible possible with substitutions and images

One of Principle’s biggest drawbacks is that it doesn’t provide any means to morph vector objects. This is where Principle loses out to After Effects and Apple Motion. But there is a workaround.

Think through the animation’s logic, break it down into components, then use masks and put your objects in the appropriate order. The preloader we mentioned above is an excellent example of how this can be done here.

Also, to achieve a fancy distortion effect, you can substitute objects at  the moment of animation by giving them the same names on the connected artboards. That works for groups as well. Here’s what  it can look like:

[Source: Emoji reactions]

10. Use tricks while importing

There are several ways to import materials for your prototype into Principle:

  1. Drag and Drop directly from Sketch.

  2. Create an image library in an appropriate format.

  3. Import from Sketch function.

The latter appeared in the recent 1.1. update and made the process of importing much more comfortable. To use this function you must have your project’s design file opened in Sketch. Great thing here is that you can choose desirable resolution for your project. The main drawback, though, is the impossibility of importing separate artboards and pages.

How to import your artboards to Principle? Here are some tricks:

  1. You can update images simply by dragging them from Finder to the Image menu on the right-hand panel.

  2. Drag and Drop from Sketch imports an element while preserving its original size.

  3. It’s very convenient to use an element’s coordinates from Sketch to organize elements in the prototype. The coordinates are identical if you use the same document resolution in both apps.

  4. Also, copying and pasting two artboards pastes all events between them. This makes your life easier while merging multiple designs and performing repetitive actions.

11. Export prototypes as MOV or GIF  

In a recent update, Principle acquired extended possibilities for prototype recording and exporting into MOV and GIF formats. While MP4 is easy to understand, working with the GIF format may cause some issues. While Principle’s developers managed to decrease the size of GIF files significantly, the format is still heavy and unadjustable.

Personally, I prefer the following long but effective approach to creating GIFs for my prototypes:

  1. Record MOV.

  2. Assemble video and mockup in After Effects.

  3. Export it as a PNG sequence.

  4. Using Adobe Photoshop, assemble the sequence into a GIF animation and adjust its size and quality according to requirements.

Also, you should decide which cursor to use while recording the prototype. Starting with version 1.1. Principle allows you to include a tap animation, but unfortunately it still can’t visualize Force Touch. That’s why I prefer to record without a cursor and add it afterwards in After Effects.

What’s also cool about Principle is that you can always provide the original file and another designer or a client will be able to open and test it using the Principle iPhone app.

Final advice: Always keep experimenting and researching

Most of what I have written here I’ve learned by experimenting with Principle’s tools and by studying works of other designers. And, as experience shows, this is  a great way to discover Principle’s hidden potential. 

Here’s my final advice: always experiment and seek unorthodox solutions to tough problems.

Some valuable and inspiring resources for working with Principle

Designer's tools

We constantly experiment with different prototyping tools, and write reviews on them so other designers can pick out the best tool

How Can You Use Flinto to Create Cool Interactive Prototypes?
Written by Ilya Prukko

How Can You Use Flinto to Create Cool Interactive Prototypes?

We’ve already shared our impressions from using Pixate and Principle for prototyping animations, so now...

Our First Look at the Floid Prototyping Tool
Written by Ilya Prukko

Our First Look at the Floid Prototyping Tool

As a designer, I’m really happy to see more and more interaction design solutions come out. This makes ...

12 Hints on How to Use Principle Like a Pro
Written by Anton Kosolapov and Rustam Tagiev

12 Hints on How to Use Principle Like a Pro

Yalantis tips and tricks for designers who use Principle prototyping tool in their work

Why Principle is the Simplest Tool for Prototyping Interactive User Interfaces
Written by Dmitriy Goncharov

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-...

Design concept

Written by Kate Abrosimova

Why Do Women Leave Tech Jobs Mid-Career? A Concept for a FIT “Females in IT” Social Network

iOS animation designs

Rethinking menu, tab bar, pull-to-refresh, and other navigation elements in iPhone apps

How We Created Tab Bar Animation for iOS
Written by Kate Abrosimova, Igor Muzyka, and Vitaly Rubtsov

How We Created Tab Bar Animation for iOS

Today’s smartphones are becoming more like tablets, or there is even a better word – phablets. Big scre...

How We Created Guillotine Menu Animation for iOS
Written by Maksym Lazebnyi and Vitaly Rubtsov

How We Created Guillotine Menu Animation for iOS

Have you ever wondered why a sidebar in apps has to be a “side” bar? Why not to make it a “topbar,” or ...

How We Developed ColorMatchTabs Animation for iOS
Written by Sergey Butenko and Sergii Ganushchak

How We Developed ColorMatchTabs Animation for iOS

The article talks about a UI animation for a concept of a review app that we developed for iPhones

How We Built Pull To Make Soup Animation
Written by Anastasiya Gorban

How We Built Pull To Make Soup Animation

Pull-to-refresh is a great place for creativity! But we’re building cool pull-to-refresh animations not...

Creating ForceBlur Animation for iOS Messaging Apps
Written by Alexey Chernish, Kostya Trundayev, and Sergey Butenko

Creating ForceBlur Animation for iOS Messaging Apps

ForceBlur iOS animation is based on force touch feature that can be used for sensitive content