Create dynamic, cross-platform UIs using design tools, code, or both.
Design assets with Sketch, animate them with Haiku, and include them in any web app—then keep iterating.
Learn the basics of motion design and get started with Haiku.
How to integrate and use Figma projects in Haiku.
Export Sketch Animations to native iOS & Android Code!
How to bring assets designed in Sketch into Haiku and troubleshooting common issues.
How to bring assets designed in Figma into Haiku and troubleshooting common issues.
How to bring assets designed in Illustrator into Haiku and troubleshooting common issues.
What if I don't use Sketch / Figma / Illustrator?
Understand the terms and naming conventions used in the Haiku app.
Different ways to create a new Haiku project.
How can I adjust the size of the stage in Haiku?
Can I switch from frames to milliseconds in the timeline?
How can I select an object in the canvas?
Can I change the stage's background color or an asset's color?
Maintain the original position of your slices with Ungroup.
How can I align elements in Haiku?
How can I change the order of my layers / slices / elements / shapes?
How can I rotate my slice / element?
How can I change the origin point for scaling or rotating an element?
A quick tutorial on how to change the point of rotation (origin) in Haiku.
Work with different sized elements easier.
A quick tutorial on using sub-components within Haiku.
Learn how to create, edit, use and make the most out of States in Haiku.
Vertical curved path with flow effect.
Horizontal curved path with bounce effect.
Haiku Tour/walkthrough + Spinning the record.
By: Anjan Shrestha
Quick tutorial to animate a menu transition.
Using Haiku, you can fine-tune vector animations and then drop them into any web app with a line of code.
Can Haiku do motion blurs?
Learn how to path morph using Haiku.
Advanced follow-along tutorial on path morphing.
Blog post and Video
Understand the two different types of Actions available in Haiku, Frame and Element Actions.
Learn how to add interactivity to your designs for the Web using Actions, States & Expressions in Haiku.
Using states and events to create the stop/play interactions of a media player.
Quick tutorial on how to make a simple toggle component using Haiku.
Export to React, after designing in Sketch, and tweaking keyframes in Haiku.
By: Kyle Gill
Using states and actions to create instances of an element depending on where the user clicks.
Learn how to use the send() api to communicate between components
Helpers allow you to define a function that can be later used in an Expression or an Action.
Embed a component in a web app, binding it with application logic.
Reference and technical documentation on Haiku for Mac and Haiku Core API's.
Advice and answers on common issues, frequently asked questions, and tips and tricks.