Hold my hand and we will do this together.

Crash Course in Prototyping with Principle for Web and UX/UI Designers — Intro

Quick start to using Principle to replicate common web interaction

Eva Chau
Eva Chau
Aug 28, 2018 · 6 min read

The amount of prototyping apps available can amount to the number of stars in the Milky Way. It can feel overwhelming choosing the right one for you. Luckily, I found Principle. This is the one that suits me the most. In short, Principle delivers low-fidelity designs quickly and even handles complex interactions. This app is for designers who want efficiency without losing control over the finer details. Download Principle here.

To begin this three-part series, I will start with what makes Principle my go-to tool.

Why Principle?

Let’s start with a disclaimer: I have’t — and will never be able to — explore all the prototyping tools available on the market, but Principle became my go-to app soon after I started my search. Here’s why:

  • Onboarding: No lengthy tutorials (only a one-minute contextual introduction video) and nothing stops you from clicking around when you fire up Principle. Its interface is also the least intimidating. The interface couldn’t be more straightforward, making the app ideal for a no-bullshit tinker who prefers to dive in.
  • Usage: Principle is strictly a prototyping tool, unlike Invision Studio, Figma, or Adobe xD, and now Sketch, which double as design tools. If you are looking for an all-in-one tools, you have options. The linear process (design in Sketch, then prototype in Principle) encourages you to think through the interaction and experience during the design phase. I rarely have to back track to make corrections in the design (low or high fidelity) after I start executing in Principle. This is a major time-saver for me, keeping my design honest.
This is how prototyping can fit into your design process.

Support: Even though there’s a self-service support page with rather lean content, but I appreciate that Principle’s creator, Daniel Hooper, does customer support himself through e-mail and Twitter.

I got a fairly immediate response when I asked for help on Twitter.
  • Pricing: You get a 14-day free trial period, then it’s a $129 one-time purchase for a license that can be used on multiple machines. Do pay attention that your license only covers updates within the same year of purchase. This means you’ll be able to use Principle after, but you’ll possibly run into incompatibility issues if you want to import from a newer version of Sketch, making it wise to update Principle yearly. It sounds pricey but a $10.75 per month to button up my process isn’t a bleed. Framer is $12/mo, while Adobe xD comes with your paid subscription of Creative Cloud, or $9.99/mo. Meanwhile, Invision Studio will be free for everyone (Invision core service is not) so it might be a good alternate solution for students or designers with a limited budget.

Principle carries just a few, yet power-packed, features that allow a relatively short learning period. You can think of it as alchemy — by fusing these features, the possibilities are endless.

Diving into Principle

The Basics #1: Interface

The interface is basically a mirror image of Sketch: toolbar on top and Inspector on the left with almost exactly the same property fields. Artboards are different instances (or keyframes, in After Effect terms) of your prototype. Each artboard represents a specific step of the user journey. Principle positions your artboards automatically in the chronological order of events.

Go to “View” > “Side by Side” to keep your preview window accessible

The Basics #2: Live Preview Window

This has become my favorite feature. The live preview window has no delay and provides a faithful rendering of your work. I can’t praise this feature enough. You can scroll, click, and then record your entire interaction with the prototype here. For medium- to high- fidelity prototypes, this comes in handy to showcase specific pathways without losing the context of the design in the form of a video or GIF.

The instant delivery in the Live Preview Window gives you a hands-on learning experience.

The Basics #3: Import from Sketch

You can directly flow your design from Sketch to Principle retaining original layers and groupings by using the “Import” tab in the Toolbar — make sure to check x2 for retina display. Since Principle isn’t a design tool, elements like text, and SVG in your design will be flattened as raster images. This sounded like a headache to me at first, but it actually makes sense. Flatten any static elements (“Layer” > “Flatten Selection to Bitmap” in Sketch) and leave your buttons as individual layers. This will produce the least amount of layers after you import them and now you only have to worry about applying events.

If this doesn’t make sense, leave the flattening for Principle and go ahead with importing your artboard. (Don’t worry, I’m going to write another article on how to prepare your Sketch file for Principle.)

Side note: I have to applaud the Principle team for being very thoughtful with this importing feature. Why? For example, elements that are currently not supported by Adobe xD will break and render inaccurately. Meanwhile, Principle will automatically flatten the design to retain the original visual.

(Left) pasted into Adobe xD; (right) pasted into Principle. Pay attention to the lost background and details in the “Bargain Hunter” button.

The Basics #4: Export for Mac app

Your non-designer colleagues are going to love this feature. Principle can create a standalone app of your design for them to click and experience your prototype like a user would. Nothing else is needed for the recipient to open the exported app. It works exactly like your preview window. Please note that the exported app can only be opened with macOS.

This is easily one of Principle’s strongest features.

Want to share your prototype with a PC user? Record a video of the prototype with the “Record” feature on the top right of your preview window within Principle. Principle 3 currently has limited export options but there will be a major update in the upcoming Principle 4 (currently in open beta stage).

Intermission

In the workshop portion (part two and three) of this series, we will learn how to use Principle to execute some basic interactions; part three will introduce to you to the heavy punches that Principle can bring.

Head over here to the workshop portion of this crash course: Crash Course in Prototyping with Principle for Web and UX/UI Designers — Workshop 1/2

Updates (25/05/2020): This story has been up for almost 2 years so there might be some discrepancies between this workshop and current Principle version. The overall should still persist. If you need help with anything, tweet at me @yanchauchau.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Eva Chau

Written by

Eva Chau

Lead product designer at Clearlink

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond