Crash Course in Prototyping with Principle for Web and UX/UI Designers — Workshop 1/2
Read part one (introduction) if you are new to this app.
Now we’re going to learn about the key features in Principle, which define a new approach to prototyping and keep the process linear. This half of the crash course contains more hands-on learning and a deeper look into what makes Principle the Sketch of prototyping tool.
Grab some snacks and open up Principle. Each section includes one to two exercises for you to tinker with.
Download exercise files for this crash course here.
Everything you need for this crash course is already packaged into each exercise file, including these design elements:
#1 The Essential: Setting up Events
We are starting with the most simple task — how to make buttons work. Anytime you select an object in Principle, you will see a lightning bolt icon, click on it, then drag from the trigger you want (the speech bubble will disappear) to the designated artboard. In the pop-up menu, you can see that Principle can handle many types of triggers.
When objects in different artboards share the same name, Principle automatically applies transitions between those objects.
Exercise #1A: Setting up Buttons (3 mins)
Step 1: Select the yellow button shape (you can bypass groups containing the element by holding down ⌘cmd when you click on the button)
Step 2: Hit lightning bolt icon. Drag from “Tap” option to second artboard. Second artboard should light up in purple color. Release.
Step 3: Test button in Preview window.
Step 4: In second artboard, select “Logo” layer in “Header” to return prototype to first artboard.
Step 5: Hit lightning bolt icon and use “Tap” again but drag to first artboard this time.
Tip #1: Always make sure your design is a loop, with a pathway for users to go back to the very first screen seamlessly. That’s the reason for setting up the second button.
Tips #2: You will notice the content from both pages are placed in both artboards, with page 2 content having a 0% opacity in artboard #1 and vice versa. This allows the content to fade in and out with transition. The example below doesn’t have duplicate content.
Exercise #1B: Creating Tabbed Designs (3 mins)
Step 1: Select “Tab-02”
Step 2: Hit lightning bolt icon. Drag from “Tap” option to artboard itself. Release. You will see a second artboard produced.
Step 3: Open up “Fill” dropdown in Inspector and exchange the color of the two tabs, so “Tab-02” appear active while “Tab-01” is inactive.
Step 4: Decrease opacity of “Tab-page-1” to 0% in second artboard.
Step 5: Now we will create a backdoor pathway for user to go back. Select “Tab-01” in second artboard. Hit lightning bolt icon. Drag from “Tap” to first artboard.
Tip #1: Hitting “w” key when in preview window can bring you back to the beginning of prototype.
Exercise #1C: Setting up a hamburger menu (5 mins)
Step 1: Select “HamburgerIcon-Group”
Step 2: Hit lighting bolt icon for “Tap” and then drag to the current artboard to duplicate for a second artboard.
Step 3: Go to second artboard, position “Menu-BG” to fit screen.
Step 4: Select “HamburgerIcon-Group”, but this time in second artboard.
Step 5: Hit lighting bolt icon for “Tap” then drag to first artboard.
Now that the hamburger menu is working, you‘ll want to go one step further to animate the icon. We’ll be working within the “HamburgerMenu-Group” inside “Header”.
Step 6: In second artboard, select “Top” and give it a 45° angle in Inspector.
Step 7: Then give “Bottom” -45° (It’s a negative value!) angle.
Step 8: Change opacity for “Middle” to 0% to make it disappear.
Step 9: Center everything within “BoundingBox” and voilà! You should have a cross icon.
Done!
You can group a transparent square along with your icon to increase the active area of the button. In this exercise, “BoundingBox.”
#2 The Dynamite: Grouping
In Principle, grouping goes beyond layer organization. Groups can turn into scrollable content and they can also act as masks. Resizing a group no longer affects the size of the child elements. Imagine it as an invisible (and magical) rectangle.
Exercise #2A: Make content scroll vertically (3 mins)
Step 1: Group following layers: “Headline,” all three card groups and “Spacer”* (hotkey: cmd + g)
Step 2: Select group and resize bounding box to fit artboard
Step 3: In Inspector panel, select “Scroll” above “Vertical” in toolbar
Step 4: Test drive in “Preview” window!
*Spacer is a just rectangle with no fill. You need this for the scroll to reach the end of the page, not just to the bottom of the last card. Not sure what I means? Delete spacer from your group and scroll to the bottom in your preview window.
Exercise #2B: Make content scroll horizontally (3 mins)
Step 1: Group all card groups and “Spacer”.
Step 2: Resize bounding box to fit width of artboard
Step 3: In Inspector panel, select “Scroll” above “Horizontal” in toolbar
Kaboom!
Exercise #2C: Make content snap to center when swiping (5mins)
Step 1: Group all card layers from “Card-01” to “Card-05” and “Spacer” together.
Step 2: In Inspector panel, select “Page” above “Horizontal” in toolbar.
Step 3: Resize bounding box of group to area of repeating tile — which is t he width of the card, plus left and right margin. See screenshot below.
The end!
Exercise #2D: Expandable content, or, accordion (5mins)
This is another trick you can do with groups in Principle — masking.
Step 1: Select “ExpandableContent” group and check “Clip Sublayers” in Inspector. See below. Your group is now a mask.
Step 2: Stay in Inspector, change height from 450 to 0. Your mask/group has been shrunken in order to hide the content.
Step 3: Select icon group “Icon-Arrow-Down,” hit lightning bolt icon for “Tap” and drag to current artboard to make duplicate.
Step 4: In the second artboard, select “ExpandableContent” (easier to do in the Layer List since there is no height to it), change height to 450 in Inspector. Now content should be visible again.
Let’s turn the arrow upside down to indicate “close” action.
Step 5: Select “Icon-Arrow-Down” in the second artboard and type in “180” above Angle in Inspector.
Step 6: Now connect second artboard back to first one with “Icon-Arrow-Down” using “Tap” option.
You did it!
The second half of this quick and easy workshop will be posted this following week. Stay tuned. We will talk about Drivers and Components in Principle.
Please leave a comment if you have any questions or feedback. Happy prototyping!
Update (02/28/19): The last part of this workshop is now published. Please continue here: Crash Course in Prototyping with Principle for Web and UX/UI Designers — Workshop 2/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.
