Skip to content

Haiku: Animation Tool from Sketch to Code

Haiku has been quiet in 2017, but just recently the team has sent an email of their release. If you are interested to be one of the first few to have a go (for free) then head over to their site –┬áto grab an invite. UI

Haiku could prove to be one of the best animation tools with a solid UI resembling After Effects. Yes, you can do keyframe-based animations and go creative with vectors when you sync it with Sketch. As you design on Sketch, Haiku makes it painless and syncs as you make any updates on the go.

One of the most unique part of Haiku is Expressions where you can create states and define javascript functions on to the State Inspector. These are particularly useful when you want to create a more realistic prototype with data and user interactions.

Okay, all this sounds very cool, but how about real-life situations when you are expected to turn these animations to life? Thankfully, Haiku has a way for you to share and embed it with a link to your design – here’s an example.

Haiku Code Export

Next, when you are on the Share page of your prototype, click “Get The Code” and you will have a number of options to choose the Platform -React, iOS/Android, or HTML Embed and copy-paste the code with the instructions. That’s it!

Probably the cons of Haiku is it’s most likely better equipped for Sketch users. Secondly, it might require a bit of a learning curve if you’re not into coding. Besides that, I believe it is one the best tools out there to really create more advance animations especially in Interaction Design.


Share this post:

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: