Principle for Pros: The Most Efficient Sketch to Principle Workflow 💯

You’ve probably used Principle before and you probably hated it because you couldn’t figure out how to create a modular, organized workflow. You probably didn’t understand why ghost layers were flying around in places you never built.

This article will change how you prototype with Principle.

Organization is Key 🔑

The key to an enjoyable Principle experience is organization. And that starts in your Sketch file. If you’re not organized before you sync your Sketch file, you’re in for a nightmare of an experience.

How you should do it

I’ve written at length about the importance of organization and modularity within design files, but this is just more proof that it’s time you made the switch. It’s a much more proactive and efficient process.

I use a style of organization that’s very similar to what developers use. I learned Block Element Modifier (BEM) syntax during my early days as a developer and it’s made a world of difference with my work.

BEM syntax can be broken down very simply like this:

block-name__element-name — modifier-name

Or in English, something like this:

person

person__hand

person__hand — right

person__hand — left

If you look at my artboards and groups/layers you’ll see they follow a pattern, something like this:

artboard-name

artboard-name — modifier

And if you look at my groups/layers you’ll see patterns like this:

module-name

module-name__element-name

module-name__element-name — modifier-name

I do this for a few reasons

1. It’s easy to find everything and follow the flow of the app.
2. My designs are structured modularly, which allows me to cascade changes across the file in an instant, exponentially increasing the speed of my iterations.
3. When it comes to handing off to someone else, the file is structured in a way that can easily be understood without much of a formal hand-off.

DOWNLOAD SKETCH FILE

You can get an in-depth explanation of the way I do this by reading an article I previously wrote titled You’re Burning Budget on Design: How to Save Time and Money with Modular Design.

Basic Principle 🐣

If you want to, you can use Principle like you would use InVision or similar tools — state based, single click interactions. This isn’t the best way to use Principle, but if you need to get something out the door quickly, this might be your best bet.

This can be achieved very simply by exporting each state of your interface as a PNG and then adding invisible layers over your views to act as hotspots.

The most important part of this is that you don’t turn the layer’s opacity to zero, you turn the opacity within the color selector to zero. If you turn the actual opacity setting to 0, the button will be invisible and not clickable.

After you’ve got all the hotspots hidden, all you have to do is connect the screens and you’ve got yourself a clickable prototype!

DOWNLOAD BASIC PRINCIPLE PRD FILE

Professional Principle 💼

Building out a more polished prototype with Principle can be quite a bit messier. This is where your layering and naming come to the rescue.

You’ve probably already noticed without me saying anything that the states visible in my Sketch file do not exactly match my Principle file.

There’s a reason for that, and it has to do with animation.

Animation within Principle is state based. That means groups and layers move based on their state on each artboard.

In the example, below, the layer demo-shape has no border radius, is colored hex #FA5367 and is located at (70, 500) in State 1 of our animation. In State 2 demo-shape has a border radius of 70, is colored using hex #2B96FE and is located at (190, 270) on the screen.

Between states, it would look something like this.

If you have janky animations it’s probably because your groups/layers weren’t named appropriately before being imported.

Principle is a state-based prototyping tool that uses linear motion to move groups and layers around based on the names you define for your groups/layers, the attributes you apply at each state, and the driver or animation settings you apply to each interaction.

When you import without defining your groups/layers, Principle will define those names for you. This automation leads to naming collisions with your groups/layers between states, which is what causes janky animations.

In order to get the smooth animations you have to make sure your groups/layers are named appropriately and that they’re available on every screen they interact with— including states where those groups/layers might not be visible.

Here’s what’s really happening under the hood of Principle prototypes and why you’ll notice so many layers hanging off the artboard/viewport in my Principle files:

As you can see, the keyboard is available for every state of the application, but it’s only shown in the viewport when it’s needed—same with the ‘Log Out’ button.

If the keyboard and the button weren’t available for each state to use, the program would not recognize their transition and they would come in much more immediate—often feeling abrupt or glitchy.

DOWNLOAD UNANIMATED PRD FILE

DOWNLOAD ANIMATED PRD FILE

Expert Principle 💎

After you get the fundamentals down and conceptually grasp how things move, Principle becomes a game of hacking the senses. There are some really incredible Principle prototypes/animations out there that look beautiful but really aren’t that hard. Ultimately, they’re all done using linear or rotational motion, and creative layering.

Rich Media

One of the more powerful aspects of Principle is that it allows you to embed videos, which a lot of other prototyping softwares do not yet allow.

This can take your prototype to the next level, especially if your product is video focused.

DOWNLOAD SOURCE

Decorative Transitions

Although Principle is not a software that you want to be building in, you can use vector based assets built outside of Principle to create some beautiful effects by hacking the system.

In this demo, vector assets are moving in a linear motion, across the screen. It’s creative animation and layering that make this effect happen.

DOWNLOAD SOURCE

Non-Linear Motion

Non-linear motion is perceptually created through creative layering. The non-linear assets themselves are created in a software that has vector access and then imported to Principle for animation.

If you open up the asset to this file you’ll see that all of the motion in this prototype is created through linear or rotational animation and the perception of non-linear motion is due to creative layering.

DOWNLOAD SOURCE

Asynchronous Animation

Just like the last few animations, this animation looks a lot more difficult than it is.

If you actually pull out the asset and play with it, you’ll see that the animation is an incredibly creative skew of your perception through a combination of incredible layering and linear motion timing.

DOWNLOAD SOURCE

Interactive Motion

Motion that involves multiple pieces moving at different speeds and/or in different directions based on user interaction with a single layer/group is typically created using Drivers.

Drivers are a little more in depth than simple state to state animation, but they’re not incredibly difficult to pick up. You can read more about drivers in the Principle Documentation—they have a great tutorial video too.

DOWNLOAD SOURCE

How creative can you get?

I hope the software feels much more approachable now. After getting hands on with Principle for a bit I think you’ll start moving fast very quickly. It’s really understanding and focusing on the fundamentals that will help you the most.

If you have any questions or want to know how something was made, I’d be more than happy to chat more in the comments section or you can ping me directly.

I’d also love to see the work you create!

For more Principle inspiration, check out Principle Repo.

Thanks for reading, and I hope this helps!