Principle 101 — Simple projects to get you started with Principle for Mac
Created for BEKK Interactive 17. October 2017
Been hearing about this Principle thing for a while now but don’t know how to get started? Have some co-workers who really need to hop on the bandwagon already? Here are some exercises to get you started. These 6 (well, 7 really) mini-projects were created for a workshop at BEKK consulting in October 2017 to introduce some 18+ interaction and graphic designers to the basic tools and consepts Principle uses for creating quick, animated prototypes.
Feel free to use these materials for exploring principle by yourself, or hosting a workshop for your co-workers/classmates. All I request is that you drop me a comment to let me know these resources were helpful, and how you used them! 👏
Note: the protoytpe files are in Norwegian. Don’t be afraid — think of it as a sort of viking lorem ipsum.
How to get started with the exercises: 🚀
- Download the course files. There is a folder for each exercise.
- Each folder has a start-with-me.prd file. Open this file in Principle to get started. The folders also include any assets you may need, along with a video and app file of the finished prototype.
- Use Principle (and sketch when needed) to make your .prd file look and function like the finished prototype.
- Stuck? Check below for some hints.
- Still stuck? Check out the official Principle documentation and tutorials.
- Not happening for ya? Check the SPOILERS folder for the completed .prd file. 😜
E1: Instagram feed
Draw in Principle, Test in Mirror.
- Resize the artboard to fit your phone.
- Fix the spelling error by replacing the logo image.
- Draw the missing UI elements.
- Make the feed scrollable.
- Test the prototype in Principle Mirror on your phone.
E2: ‘Like’ animations
Trigger and Transition.
- Use artboards to create a storyboard for your animations
- Animate the reactions using various triggers: hover and tap the button, tap the ❤️ and drag the 👍.
- Animate the off-screen transitions between ❤️ and 👍.
- .
E3: Animation length and easing
3A: Loading animation
- Using the animation panel, sequence the dots to move one by one.
- Use easing curves og springs to give a different personality to each dot.
.
.
3B: Open card details
- Use what you have learned to create a card opening prototype.
.
.
.
.
.
E4: Simple form
Components in components
- Create textfield, checkbox and button components.
- Create a loading animation component within the textfield component.
- Send an event from the button to the parent artboard that resets the form.
E5: E-mail Inbox
Drivers for secondary animation
- Use horizontal paging for side-swipe functionality.
- Use drivers to change the colors of the “Arkiv” and “Plannlegg” backgrounds.
- Use drivers to show different dialog boxes at the end the swipe.
- Create invisible trigger objects to dismiss the dialog boxes.
E6: Create a sketch import guide
The opportunities and limitations with sketch import.
- Import the sketch file into principle.
- What remains editable? What has been flattened to an image in ‘media’?
- Make note of the result in the origional sketch file.
Thoughts on when to use Principle
Though principle is an amazing app that makes animating prototypes a breeze, it is not always answer for what is best for what you are trying to do. From our experience on various client projects, here are some guidelines as to when principle may be the best tool for what you are trying to do.
✅ Use principle when you:
- Need to prototype at the element level (more detailed and interactive than just shifting between screens).
- Need to quickly communicate how an animation or interaction should look and feel to a developer or other designers.
- Can sacrifice fidelity for a quicker visual.
- Want to give the client and idea of how it will feel to use the interface in the early stages of a design process.
❌ Use another prototyping tool when you:
Resources
Mastered the basics?
Try out this mini-game project for more of a challenge:
