Where the design community meets.
San Francisco, California Product designer & co-founder @ Haiku Joined about 2 years ago
Absolutely: we see Style Dictionary and Salesforce Theo as forebears to Diez.
Sure! Diez ships with command-line tools that allow your team to automate the extraction of styles & images from design tools (incl. Figma,) into an OPEN, extensible, cross-platform, and native-developer-friendly code format.
In this paradigm, Figma (or Sketch/etc.) are your visual design-system "code editors." Diez's open-source tools let you sync changes from Figma (optionally, via pull requests) into your main-line "living source of truth," (in code) which can be shared across teams.
Hey DN! Our team at Haiku (haikuforteams.com) has been working on this secret project Diez for quite a while, and we're just announcing it for the first time!
Diez is now in private beta, which we're doing to gain a tight feedback+iteration loop with early users before we open-source it. If your team is interested in trying out Diez early, please fill out the survey at the top of diez.org
We hope Diez makes a difference to everyone working on design systems. I'm around today if anyone has questions!
Yes — there's a vanilla CSS/JS/SVG option if you aren't using React/Vue/Angular. Check out the "HTML embed" instructions from any published project.
Note that we CDN the vanilla files for you by default (for convenience,) but you can download those files from the CDN and deploy/manage them yourself if you prefer.
Sweet, thanks for the tip!
Oh shoot, I didn't realize someone beat me to the punch when I posted this.
That said, the previous thread seems to be dead and this one has a bit of momentum, at least by votes. Perhaps counter-productively, linking to the dead thread may be encouraging fragmentation rather than solving it.
But I'll be sure to do a search before I post next time!
Hey DN! A year ago, our team released Haiku for Mac in beta. At the time, we wanted Haiku to be a bit of everything — animation tool, UI builder, "the missing link between design and code."
Through a year of user feedback and steady improvements, we've discovered that what users loved most about Haiku was its animation capabilities. It turns out "visual animations that ship to production" were a big unmet need!
So Haiku is now Haiku Animator. Animate your Figma, Sketch, or Illustrator files with our powerful timeline. Add your animations to any iOS, Android, React, Angular, or Vue app. Stay connected between motion design & code like never before with our version-controlled Publish workflow.
Animator represents a year of dedication and progress from our team — anyone who checked it out before, we invite you to check it out again. And new users, welcome! We hope you love using Haiku Animator to create cross-platform UI animations.
Read more on our blog: https://www.haikuforteams.com/blog/haiku-is-now-animator
Thanks so much Billy — our team appreciates your support.
Thanks for the excellent feedback, Joe. We're always iterating and will continue to talk to our users and evolve the web copy for sure. I've taken note of your thoughts here.
when built on web technologies you have to take performance into account
Tell me about it! Yes, pushing the boundaries of web rendering perf is part of our challenge, at least for Haiku on the web.
Good news is, Haiku isn't bound to web tech. Haiku exporting to Lottie is proof of our ability to render Haiku content natively to iOS and Android. The only thing Lottie's missing for 100% Haiku support is support for interactions and executing user-land code. We're working on it.
...move rectangles on a webpage...
Think of it this way: Haiku "moves rectangles," but is ultimately agnostic of whether they're on web pages or in iPhone apps. At the end of the day, it's the same kind of abstraction as React Native — a Rectangle is a Rectangle. This is where we're going with "Full application design+builder for any platform"
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.