HN Explorer

Show HN: Anima 4 (YC S18) – Turn design work into developer-friendly React code

22 points by avishic ↗ HN
Hi everyone! We’re Avishay, Or, and Michal, co-founders of Anima (www.animaapp.com). Anima converts design (Figma/Sketch/XD) into code automatically. Up until today, we only produced HTML/JS/CSS. With our latest release, we can now also generate developer-friendly React code.

We’re here to replace image-based handoff, which involves a lot of grunt work for the engineers who have to translate all those images into code that does the same thing. For designers, the pain we solve is the ping-pong, and their vision getting lost in translation. The bottom line is that teams can deliver faster.

With our latest release, developers can now cherry-pick any design element and get code. The generated code is clean, dependency-free, and runnable. We produce HTML or React, and soon Vue.js and Angular.

Over the past few months, we've been iterating with our community (now 300,000 users) to find out what still bothers developers when getting generated code, and have been tackling these issues one by one. For examples, we recently added an automatic flex layout, our software now extracts repeating UI components automatically as React components, and it also now can detect CSS patterns and extract common behavior.

Our goal is to produce human-level UI code, leaving only business logic to humans. The code we generate is clean and developer-friendly and gets better every day.

We’d love to get your feedback on this. Check it out and let us know your questions and ideas. Criticism is welcome! Thank you!

8 comments

[ 2.7 ms ] story [ 32.9 ms ] thread
freehunter
Honestly I'm so glad we're in a renaissance of UI-based code generators. I grew up in the era of Dreamweaver and Visual Basic where you could just draw your user interface and then write code to glue it together. It wasn't perfect but it's a form of Rapid Application Development that we just don't have anymore. If it wasn't for VB.NET and its ability to turn my drawings into code scaffolding, I wouldn't be here right now. No-code and low-code are great for many use cases, and full hand-written code is endlessly powerful, but for the middle ground, these can be powerful tools.

I haven't tried Anima yet but I appreciate its very existence.

(I especially like that this UI-to-code tool isn't owned by Adobe or Microsoft... not everything was great about those old tools)

avishic
Haha thanks for the kind words!

If you're going to do React soon, give it a shot, it's free and it'll save you precious time. I'd love to hear your feedback.

hasmolo
do you have any live demos of a sketch file and it’s generated output so we can get a feel for how the code looks? any way to configure what kind of react components? can they be functional or classical? is the transition between exports as quick as the video? what type of typescript export are we looking at? does it use any? does it leverage generics? can you get css in js?
avishic
Hi!

Yes, you can actually try out a sample project without the Sketch file - After signup, select "Create sample project".

Then go to Code-mode and pick any part of the design to get React code. Developer 101: https://www.animaapp.com/resources/anima-101

In Code-mode, there's a settings icon, you can pick functional or class-based components. The idea is to have more settings coming, like styled components (CSS in React) etc.

Regarding Speed - Yes! once you've synced a design file (may take 1-2 minutes for multiple screens), you can pick any part of it and get React components code in 1 second.

Let me know how it works for you, thanks!!

adriannasui
1/ We need to be able to do a trial of the react part before buying. Unfortunately I have not been able to do this. 2/ Do you generate Functional or Class components?
avishic
Thanks!

1/ Trial - React is currently opened and free for everyone. Go to the "Developers" tab here to see how to use it: https://www.animaapp.com/resources/anima-101

2/ Both! The idea is that you'll get code that suits you. You can already decide on class/functional components. We'll add more conventions down the road.

seige
This is powerful stuff. As a UI engineer, I welcome this and think this will elevate the job to more interesting bits.

Boilerplate componentization needs to be handled by machines, not humans.

akrymski
Congrats! But IMHO, the very fact that this exists shows how broken current web design tools are. Designers are still using Illustrator-style vector graphics tools, as if they are creating print material. Graphic design is not UX design. UX devs should be using code generation tools from the start, the way Visual Basic used to work. This mentality of "design is important, lets get the guy who made our logo to draw our interface cause it's all Sketch isn't it?" is alien to me, but is unfortunately the norm in most teams today.