“Hacking” Principle: 9 things you thought you couldn’t do
Principle has gone from being the new kid on the block to the go-to tool for animation-heavy prototyping. We believe the key to its success is that it speaks the same language as designers do. It’s very similar to Sketch, Keynote and After Effects making it feel instantly familiar when opening it for the first time.
Is it difficult to learn how to use Principle? Not really. If you know how drivers, components, and the animation timeline work, then you know Principle. They are the fundamentals of the tool, and with them you can create just about anything in a relatively short period of time.
Sometimes it’s criticised for its lack of features. Users are looking for features they can’t find. But it often turns out that there is a solution by creatively using these fundamentals. Some call it “hacking”, but let’s not forget we’re using a prototyping tool, not a programming tool. As long as the user of your prototype gets a solid experience it doesn’t really matter how hacky it is.
The Principle community of Facebook has posted some excellent examples of this, and we have also done some “hacking” ourselves. Check it out:
3D
3D isn’t supported, but you can definitely fake this one by cleverly using drivers as demonstrated by André Goncalves.
Animate organic shapes
Shapes in Principle are based on rectangles with rounded corners. While this works fine in most cases, it can be difficult to achieve an animation with an organic feel to it. In this example Sketch was used to create the organic shapes. By modifying these in Principle, using drivers, you can simulate a jello effect.
Background blur on top of video
Principle does not officially support background blur, or any blur for that matter. It is, however, possible to create this effect. All you need to do is make a blurred duplicate of the image/video. In Principle you then put the blurred version of your media inside a mask and place it on top of the original.
Edge swipe
Edge swiping is not an official event in Principle. You can, however, place an invisible strip (about 10px wide) on the edge of your artboard. It’s small enough not to get in the way of any other interactive elements on the page. Use this element to drive the pages that need to be transitioned and add a DragEnd event to animate to the other screen.
Constrain a draggable layer
When creating a slider, for example, you don’t want your scrubber to bounce beyond the actual slider. To fix this drivers come in handy. Simply add an invisible layer on top of the knob. This invisible layer will drive the knob along with it up to the point where it reaches the end of the slider as defined by the drivers.
Create a big screen TV experience
Unfortunately, there is no support for key press events yet. That makes it difficult to create a prototype for a TV UI. An easy fallback is to create an on screen remote and place it next to your prototype. If you want to test your prototype on an actual TV simply open up the prototype on an iPad and AirPlay it to an Apple TV. Now lean back and use your iPad as a remote while viewing the prototype on TV. Of course the UI will also be visible on your iPad while the remote is visible on the big screen. You’ll forget about them quicker than you might think.
Double click event
Double-click isn’t an official event in Principle but it’s actually really easy to create it yourself as demonstrated by Daniel Hooper. Because it’s a custom made double-click you can even adjust the speed.
Create a circular loader
People often ask me if it’s possible to create a path animation in Principle. When asked what it is for, they usually explain they want to create a circular loader. While path animations are not supported, creating a circular loader is very easy. Kieran Black has proven this.
Scroll based events
Drivers are a great way to add scroll based animations to your design. Sometimes, however, you may want the animation to animate one way only. As in: when scrolling down an element moves in, but when you scroll back up the element doesn’t move back out. Impossible to achieve with drivers. A workaround can be to create a full bleed component with the animated element inside. Trigger the animation with a hover inside event. This works in most cases since your mouse will be hovering over the component at some point during scrolling. Obviously only on desktop.
Ink ripples
Ink ripples, as used in Google’s Material Design, confirm user input by immediately expanding outward from the point of touch. Unfortunately, Principle is not able to recognize which part of a button you hit. You can fake this effect though by placing multiple ripple components inside a button. A touch Down event inside the component will trigger the ripple that’s closest to your touch input. Use touch Up on the button (group) to transition to the target artboard.
Article by Jimmy Goedhart, Design Lead at Hike One
