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

Welcome to the last part of my Principle app crash course. Read my introduction article if you are new to this app, or go back to the first portion of this workshop.

Eva Chau

Published in

Design + Sketch

8 min readFeb 28, 2019

After part 2, you should now be able to use Principle to show off your design and demonstrate the basic user journey from screen to screen. The basic. This last part of the crash course aims to expand your arsenal with two heavy hitters in Principle — drivers and components. Their purpose is to help you handle complex interactions (like parallax scrolling and this clever 3D card) and boost the authenticity of your prototype.

Download exercise files for this crash course here.

Edit (03/12/19): Link is updated due to missing layers in Exercise 04a file. Thanks Asaf Harari for calling that out!

In this prototype, there is subtle size and opacity change when you swipe through the cards. The cards are reacting to the horizontal scroll with Drivers.

Drivers

Need a sticky (and stacking) header? Want elements to pop up when you scroll down? The Drivers panel dictates what happens when you scroll up and down, left and right. This feature is powerful. You are able to replicate many more interactions on the web and bring your design to life.

Notice all the animated effects on Google Store’s home page that are triggered by scrolling.

First, I will teach you to read the Drivers panel. Once you click Drivers in the toolbar, you will see a pixel-based timeline. If there are any groups with scrolling enabled, you can drag the dark grey indicator along the timeline to see the scrolling in action.

In this Drivers panel, “Scroll Y” means this is a vertical scroll.

When elements are set to react according to scroll, you will see a blue line indicating a change in properties for these elements. Below are two examples:

In this prototype, “Center Y” (which is a vertical position) of each header is enabled to react when you scroll vertically.

When there are multiple scrollable content groups, you will need dedicated Drivers sections for each of them. Scroll Y” is a vertical scroll while “Scroll X” is horizontal.

Exercise #4A: Change page background color when scrolling (5 mins)

Step 1: Select “ScrollableContent” group and enable scrolling above “Vertical” in Inspector.

Step 2: Open Drivers panel by clicking on the icon in toolbar.

Step 3: Select “BG” in the layers panel and it should show up in the Drivers panel. Click on the blue diamond next to “BG.” Select “Fill” in the dropdown. This will tell Principle that the fill color of this layer should react to vertical scrolling of the “ScrollableContent” group.

Step 4: Drag dark grey indicators to 518. This is the height of the content group.

Step 5: In Inspector, change the fill color to white, or any color. A blue line indicating a change in fill color should appear.

Step 6: Drag indicator back to 0, so this artboard shows the default position of the design.

See it in action in the preview window!

Exercise #4B: Fade content when scrolled up (5 mins)

We will use file from Exercise #4A to continue building this design.

Step 7: Make sure timeline indicator is back to position 0. Select “Content-01” and “Content-02” group.

Step 8: Click on the blue diamond in Drivers to select “Opacity” option in the dropdown. Now Principle is ready to alter the opacity of the two groups when this page is scrolled.

Step 9: Select “Content-02” group and change the opacity to 0%.

Step 10: Select “Content-01.” In Drivers, push the indicator to the pixel point where you want the fade effect to start (I’ve chosen 250px for this example). Then click the blue diamond again next to Opacity. A keyframe is established. At this point, “Content-01” is still at 100%.

Step 11: In Drivers, drag indicator to where you want “Content-01” to fully disappear (I’ve chosen 350px for this exercise). Change opacity to 0% and test in preview window.

Step 12: Drag indicator to where you want “Content-02” to start fading in (I’ve chosen 400px). Opacity is still at 0%. Click the blue diamond to establish this keyframe.

This is how your Drivers panel should look. The order of my layers might be different than yours.

Step 13: At position 500, change opacity to 100%. Now “Content-02” should appear.

Check it out in your preview window!

Component

Components in Principle allow you to create individual vacuums to isolate events or animation, keeping your workspace clutter-free. You can also import other Principle files into your current prototype as components.

The featured title card for this article is a collection of imported Principle files placed within one master artboard.

Plan out your animation before diving into execution. Importing individual components keeps your process more manageable.

Besides the example above, here are a few more instances when you can use components :

Repeating design elements. You can contain the default, hover, and active states of a button within a component, like a symbol in Sketch. Think reusability.
Automated typing. Laying out individual letters can clutter up the main workspace quickly. Use components to contain your typing animation.

The typing animation was done as a component to reduce the number of artboards in the parent workspace.

When you are able to isolate individual interactions as components within your prototype, maneuvering and editing become much easier tasks.

Exercise #5: Adding a “favorite” button and setting up different states for buttons (15 mins)

There are two files for this exercise. We will open up “05…heart.prd” first. There are 3 hearts with different shades to represent default, hover, and active states.

Step 1: Select the first artboard (“Default”) and click on the thunderbolt icon.

Step 2: Drag from “Hover Inside” to the second artboard (“Hover”).

Step 3: Select second artboard and use “Hover Outside” as the trigger to go back to first artboard. It should now show the hover state properly in preview window.

Step 4: Select second artboard again and use “Tap” as the trigger to go to third artboard (“Active”).

Step 5: Now do the same in the other direction. Activate “Tap” from third artboard to second. This is what your artboard should look like now :

Setting the artboard bigger (30px in this case) than the heart icon (15px) helps to expand the touch/click area.

The “Favorite” button should function properly at this point. Save this file and now open “05…Page.prd.”

Step 6: In Finder, drag your “05…heart.prd” into “05…Page.prd.” You should now see the heart in your artboard.

Step 7: Duplicate the heart to place within each card group. Make sure the hearts are placed in the correct groups.

Each card now have a functional “favorite” button.

Step 8: Select “ScrollableContent” and activate “Page” scrolling above “Horizontal”.

Now we are going to make the pink/yellow button functional using Components and Drivers from previous exercise. Except this time, we are going to learn the other way to create a component.

Step 9: Select “Button-left” and click on “Create component” in toolbar.

Step 10: We are now inside a component. Let’s make the default state of the button slightly transparent until hovered on. Change opacity of “Button-left” to 50%.

Step 11: Now click on the thunderbolt icon and drag “Hover inside” to itself to duplicate the content to a new artboard. Change the opacity of the second artboard to 100%.

Step 12: Use “Hover outside” to connect second artboard back to the first one. This is what your workspace should look like:

Step 13: Click on “Back to Instance” on the top left corner of your workspace to head back. Now repeat step 9–12 for “Button-right” group. I also encourage you to rename the two components to keep everything organized.

Next, we are going to turn both buttons into real triggers in your prototype.

Step 14: Select “Button-Right” component and use the thunderbolt icon for “tap”. Drag to itself to duplicate artboard.

Step 15: Select second artboard and now open up Drivers panel.

Step 16: With second artboard selected, drag the indicator in Drivers to position 240, where the third card is centered in the artboard:

Edit (03/12/19): I’ve missed a step here. Open “Animate” panel and click on the snowflake icon next to “Frozen.” Scrolling triggered by buttons is inactive (frozen) by default in Principle. When in doubt, check to make sure your layer/group is not “frozen”.

Thanks Amanda Conlon for pointing this out :)

Step 17: Repeat step 16 to activate “button-left” in the first artboard. For this new duplicated artboard, you will go to the negative end of the timeline, position -250.

Step 18: Test in preview window. Repeat using “Tap” to connect remaining artboards.

Regardless of which card is centered, the buttons should lead to another animation. For example, the left button on the screen with the first card should bring you to the third card to create a loop, like this:

Done!

One trick to keep your workspace clean is to check the box for “Clip Sublayers” in Inspector, located under vertical scrolling options. It will hide anything outside of the group’s bounding box. It’s ideal for a prototype like Exercise #5.

Resources

This is the end of my 3-part series on Prototyping with the Principle app. With the simplicity of the interface and powerful features, you can utilize Principle to replicate a wide spectrum of web/app interactions without touching a line of code or spending exhaustive hours to execute. I see Principle as a tool of communication when it comes to translating flat JPEGs of my design to a functioning prototype that everyone on my team can understand.

I have a list of sites where you can download working Principle files to further your learning on this tool:

Thank you for committing your time to learn a new tool with my crash course. Feel free to leave me a message with feedback or questions.

Happy prototyping!

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.