For a couple of years, I've been using Principle to quickly prototype UI ideas that are difficult to communicate in static designs or clickable prototypes from Invision, Figma, etc. The software feels simple but is complex enough to get great results if you start out with the right workflow. In this article, I will be sharing my personal workflow and how you can get the best results out of Principle.
Keeping in mind the context of your UI
In the last couple of years, I have mainly designed for the web. To create the most realistic experience possible on mobile I like to take the browser UI into account as well. This way you can also test how the user will interact with the keyboard and really give a feel of the (potential) end product. You can also add the URL at the top as if the user is actually visiting the website.
It’s kind of a bummer that you can’t open Principle prototypes in your desktop browser but in theory, you can also fake a browser in your desktop prototype by adding the UI elements. The other approach could be to match your artboard dimensions to the full-screen view of your computer.
Sometimes Principle is not only useful for creating prototypes, but it can also work well for fancy product presentations. In combination with the animation software Rotato, you can easily create beautiful 4K videos or GIF files.
For the best results, you have to export it as a video at 200%+ / 60fps and make sure it has the same dimensions as the device you are using in Rotato. In some cases, it’s also good to show the cursor when it’s more focussed on UI details.
Custom grid inside Principle
Sometimes I like to design within Principle itself when I'm working on a content-heavy prototype. This way you can easily swap and edit content without having to sync with your main design software.
Principle does not support layout grids or something similar which makes it difficult to make your design pixel perfect. A workaround that I have been using is to re-create the grid with rectangles in my Figma file and import the file into my Principle project. This works for Sketch as well but you can also directly create it in Principle by using the rectangle shapes.
Hidden layers are visible in the preview when you record your animation. You can set the layers to 0% opacity to make sure it won’t show up in your final output.
Load custom fonts
Principle allows you to open your prototypes on an iOS device with the Principle Mirror app. Unfortunately, it does not support external fonts which results in them being replaced by alternative native fonts on your device. Luckily there are ways to install custom fonts on your device which enables you to preview your prototype as designed.
I’ve been using the AnyFont application for iOS where you can install your own fonts (.ttf .otf .ttc) by importing them from iCloud Drive, Dropbox, and other services. You will have to install an iOS profile in the Settings app per font-weight but this is something you will have to do only once.
Prepare export for high-resolution output
When I test my prototypes I like them to be as realistic as possible. If you import your design from Figma or Sketch: use the 2x/3x option. This way you will make sure that the layers are hi-res and will appear smoothly on your iOS device or in the animation output file.
Thanks for reading this article and if you like to read more about UI/UX design-related topics, feel free to follow my account and get updates when a new article has been published.