Principle app tips and tricks

Principle is my favourite tool for rapid prototyping so far. I started using it about 2 years ago and loved it’s ease of use and streamlined process when it comes to quick exploration of multiple ideas super quickly. Even though this app is quite simple there’re few hidden gems and hacks I discovered along the way. Hope some of the following tips could help you to improve your workflow.

Prototyping workflow

• Hack arc motion with animation curves. This technique might be useful for prototyping some of the material design transitions and more.

• Hack looping animations with spring curve to avoid multiple artboards and keep your files clean. In the following example input field blinking cursor was done with just two artboards using this technic. The cursor itself is not animated. Instead the mask that covers it is moving with spring curve for X position.

• Sequence animations on the animate panel instead of creating additional artboards to reduce complexity of a prototype. In the following example a checkmark animation was created with two artboards and sequencing animations instead of creating of three artboards for each state and adding transition between them.

• Place transparent dummy object inside a scroll group to add inset. Let’s add bottom margin to the scrollable list:

• Avoid huge prototypes 50+ screens as Principle might start lagging and even crashing especially when prototype is running on IOS device. If you absolutely must create gigantic prototypes to improve the performance flatten the layers in sketch, use smaller image sizes for the content. I have top MacBook Pro 15" mid 2015 and iPhone 7, maybe newer hardware can handle heavier prototypes.
• Move the anchor point of any layer with a simple hack

Import and export

• Take advantage of Sketch layer name suffixes to import cleaner and lighter files to Principle. In Principle 3 you can flatten a group into a single layer by adding an asterisk (*) to the end of its layer name in Sketch. To prevent a layer from importing, add a minus sign (-) at the end of its layer name in Sketch. In Principle 4 suffixes were changed. Use “principle flatten” instead of (*) and “principle skip” instead of (-).
• Drag and drop layers from sketch to principle.

• Gifs exported directly from principle are quite heavy and image quality could be better. If you need a gif as an output I’d recommend to export the animation as .mov then import it to photoshop as frame animation and use save for web feature to export the gif. It’s also possible to reduce the size of the gif dramatically in PS by removing duplicating frames and adding delays instead as well as tweaking gif optimization options e.g. lower the color table, tweak dithering etc.
• Your teammates don’t have IOS devices at hand but own macs? Export the prototype as mac app and send it over so they can test the prototype on their mac.

General

• Save prototypes in Principle IOS app to access them offline anytime anywhere. This could be useful for testing with users in places where Internet connection isn’t reliable or not available at all. For example you would be able to run a guerrilla usability test underground or in far countryside.

• Choose the fidelity of the prototype according to your goals. For example if the objective is testing information architecture with users then would it make sense to spend extra time on twerking timing and animation curves for the animations?
• Discuss animation properties you’re going to use with developers to make sure it’s not overly complex to implement. For example spring animations could take extra dev effort and it might be a better idea to use one of the common animation curves to save time for more impactful features.
• Use animation wisely. Principle is very simple and it’s so tempting to add fancy animated transitions, subtle microinteractions etc. everywhere. At the same time if you’re developing a prototype of a real product it’s important to keep UX in mind as well as development effort.

Did I miss something? Don’t hesitate to add your favourite technics and tips to the comments below!

Check my collection of microinteractions where I put together a lot of freebies most of which were made in Principle.