Hey DN — excited to announce that we're opening up Haiku today. While we will still be in 'designer preview' we're so excited about the progress we've made over the last year that we think it's time to get it into your hands.
Haiku is new breed of UI design tool where design effort weaves into the actual product. No more hand-off — instead of motion specs, red-lines, or painful back-and-forths — you're working on the same product as developers.
We've gone to great lengths to make Haiku developer-friendly too. Today we're also open-sourcing Haiku Core (developer preview) — the renderer and design-as-code component format that drive Haiku.
Where do Haiku-designed components work?
- The Web (vanilla HTML/JS and React today; more coming soon)
Hope you're interested in checking it out! Please feel free to ask any questions.
The live update from Sketch is a killer feature. This is going to be much faster than working in AE to Lottie.
Thanks! I can confirm that it feels amazing to be able to change assets from Sketch and see them update in an animation automatically. (Not to mention also auto-updating in a linked codebase where the animation is included!)
This is awesome, animation handoffs made easy
This is amazing. I am downloading it now and gonna try at home.
I would pay money for this.
Thanks Mattan! We may take you up on that offer later. ;)
Been great having you onboard since our private beta last year!
This program is killer. I have found it crashing a few times, but it never lost my work. The concept and execution are there.
I would love to see animate on a path, and to animate a path itself. That was the first animation I tried to make, and I saw you have a way to kinda do it by animating the x with linear and y with an ease-in cubic, but there's no way to draw a path, and it's very difficult to guestimate how to follow a potential path with your workaround.
I wanted to make this mouse pointer click down and draw the loop. I know from your docs that this functionality is on the way, but man, it would make my day (and open my wallet) if this was possible.
Hey Jimmy, sorry to hear about the crashing! I think we tracked down that bug today.
Animation along a path is definitely something we want to get to sooner than later. It's on our roadmap. There are some techniques that can get you animating an element around a circle though. If you'd like some help with that please feel free to message me @taylor on the Haiku community slack or email me at email@example.com.
Super exciting to see tools like this—will check this out ASAP.
Are you aiming for feature parity with Lottie?
We actually support exporting to Lottie as well. After publishing your designed haiku you're able to choose to use either the Haiku Core or Lottie renderer/format. As for feature parity, we do plan to eventually support everything you can do in Lottie; e.g. masking and shape morphs. We're working on it!
I really really want this to work, but having played around with it for a bit and talking with my developers about it the "production" code just seems like you are dropping an HTML embed that's hosted by haiku, which is concerning...
It was super easy to get a quick animation up and running for a prototype but it's not exactly something I can just handoff to a dev.
Hey Andrew! The HTML embed hosted by us is just a convenience, mostly for sharing or Codepen etc.
The recommended workflow for production is for the developer to install your component using npm, then handle bundling & deployment themselves. If you check the "Get the Code" panel on one of your publish links, under React, there are instructions for doing this.
You can even use your designs in production without publishing at all — ask one of your developers to check out the projects in the
~/.haiku/projectsfolder that Haiku stores your work in. The code's already there and ready to go.
Feel free to reach out to firstname.lastname@example.org with any more questions! Happy to chat with your developers, too.
Does Haiku export objc/swift like https://kiteapp.co?
Hey Eric, we support native iOS rendering by exporting to Lottie. But no objc/swift.
Thanks again for the early invite you sent me earlier in the year!
Unfortunately, I couldn't fit this into my workflow at this point because I'm very dependant on the ability to use PNG for the animations and couldn't find a way to do so with Haiku.
Is this something that you're planning on supporting in the future, or are you planning on working with vector content only?
We do support bitmaps now (.pngs included ). You just need to bring them into Sketch first and mark them as a slice. And of course, we always encourage the use of svgs, as these will keep your project file sizes smaller and scale better. ...But sometimes you just need to bitmap though — we get it. ;)
That's great news! Still not ideal for me (I don't use Sketch), but it's definitely a step in the right direction.
I think the example you shared illustrates the versatility of bitmaps when compared to vectors, even if there are technical drawbacks and limitations. It's also very funny!
I'll keep an eye out for future updates. Keep up the great work!
Hey by the way we have Figma integration now https://www.haiku.ai/blog/figma-haiku-integration-delivering-motion/
Looks pretty exciting @Taylor, congrats on the launch. Can you share a bit on pricing and how does it compare with Timeline?
Is it just me.. or is it ironic that we killed a platform ( adobe flash ) that basically did all this and much more , only to come back full circle and have it remade with different technologies ?
Hearing the word "tween" brought back sweet memories tho :) .