Principle and Haiku are helpful little programs that make it easier for designers to animate illustrations. Our UX Designer Janne decided to try them both – and share the results with you.
Principle and Haiku are helpful little programs that make it easier for designers to animate illustrations. Our UX Designer Janne decided to try them both – and share the results with you.
Recently, I have taken a bigger role in designing illustrations for our clients, ranging from icons in apps and websites to illustrations for design systems, onboardings for applications and even a few larger illustrations for the applications' ads in newspapers.
One day, I was showing my folder illustrations for a project to a colleague of mine and he said: "wouldn't it be cool if there was an animation where stuff would pop out of that folder?" I didn't have any previous experience in animation, but somehow that comment became the catalyst for learning two new tools: Principle and Haiku.This is how they compare from the point of view of someone new to animation.
Principle is a program primarily designed to make animated and interactive user interfaces. You can create simple shapes and text fields within Principle, add photos or images and import assets directly from Sketch, which I did in this case.
You animate in Principle by linking artboards to each other. Principle detects changes between the two artboards with the same layer names, and automatically creates an animation between them. It's that simple.I quickly learned the fundamentals of the software and just how easy it was to get things moving. I also really liked the preview mode where I could constantly preview my work in a separate window.
GOOD
BAD
Haiku is a free (pro version with extra features is available for a monthly fee), Mac-only (PC version coming soon) software designed to be thought of as a design portal to your team's codebase. A big advantage is that it translates your animation and designs to code that can be directly shared to your team.It has a bit steeper learning curve: animating is done inside a timeline where you can choreograph animations to your designs visually. Sequencing and animating elements are done by using the built-in tween and easing curve library. Unfortunately, you cannot customise the curvature of the tweens like in Principle.
I'm sure that Haiku will be the more efficient option after I've become more familiar with it – but to get there takes time.
Haiku doesn't have its own drawing tools, so you have to design your assets in another software such as Sketch or Adobe Illustrator and then import them to Haiku. I noticed some occasional distortion in some of my assets after importing them to Haiku, which was a little weird.I struggled with Haiku quite a lot when I first started to use it, but after some time I started to get a hang of it. Most of my time was spent searching for the right assets I wanted to move from the long list view that I was constantly scrolling up and down. I'm sure that Haiku will be the more efficient option after I've become more familiar with it – but to get there takes time.
GOOD
BAD
So, which one would I recommend? Both have their pros and cons. If you want to start animating quickly and easily, I'd say go for Principle, but remember that it can only export .mov and .gif files at this point.
If you want to be able to do more things quicker in the long haul or need your animation to be in some different format, go for Haiku – but prepare to spend some more time with the process. That being said, both Haiku and Principle are being updated regularly so new features could pop up anytime.
Interested in joining our design team? See our open positions.
