21 comments

  • Taylor PoeTaylor Poe, over 1 year ago

    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 ui

    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?

    • iOS
    • Android
    • The Web (vanilla HTML/JS and React today; more coming soon)

    haiku examples

    Hope you're interested in checking it out! Please feel free to ask any questions.

    7 points
  • Bruce Vang, over 1 year ago

    The live update from Sketch is a killer feature. This is going to be much faster than working in AE to Lottie.

    5 points
    • Taylor Poe, over 1 year ago

      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!)

      0 points
  • Andrew SAndrew S, over 1 year ago

    This is awesome, animation handoffs made easy

    3 points
  • Mattan IngramMattan Ingram, over 1 year ago

    I would pay money for this.

    3 points
    • Nad Chishtie, over 1 year ago

      Thanks Mattan! We may take you up on that offer later. ;)

      Been great having you onboard since our private beta last year!

      0 points
  • Jimmy HookerJimmy Hooker, over 1 year ago

    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.

    Potential Animation

    3 points
    • Taylor Poe, over 1 year ago

      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 taylor@haiku.ai.

      0 points
  • Robin GoyalRobin Goyal, over 1 year ago

    This is amazing. I am downloading it now and gonna try at home.

    3 points
  • Thomas MathewThomas Mathew, over 1 year ago

    Super exciting to see tools like this—will check this out ASAP.

    Are you aiming for feature parity with Lottie?

    1 point
    • Taylor Poe, over 1 year ago

      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!

      0 points
  • Vipul. MishraVipul. Mishra, over 1 year ago

    Looks pretty exciting @Taylor, congrats on the launch. Can you share a bit on pricing and how does it compare with Timeline?

    0 points
  • Sandro P, over 1 year ago

    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?

    0 points
    • Taylor Poe, over 1 year ago

      Hey Sandro,

      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. ;)

      1 point
  • Mihai VladanMihai Vladan, over 1 year ago

    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 :) .

    0 points
  • Eric Chu, over 1 year ago

    Looks powerful!

    Does Haiku export objc/swift like https://kiteapp.co?

    0 points
  • Andrew Richardson, over 1 year ago

    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.

    0 points
    • Zack Brown, over 1 year ago

      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/projects folder that Haiku stores your work in. The code's already there and ready to go.

      Feel free to reach out to zack@haiku.ai with any more questions! Happy to chat with your developers, too.

      4 points