“Anima’s goal is to create a continuous design-to-code process”

JAXenter: What are the main pain points in the collaboration between developers and designers?

Avishay Cohen: I come across the same issue over and over again. There’s tension between developers and designers when it comes to building software products with rich UX. Both sides are frustrated; the designers create every component for a purpose, every detail is important. Developers on the other side of the production pipeline, have a lot of grunt work that is accompanied by unnecessary mistakes. Things just get lost in translation. This is a frustrating process for everyone involved and requires compromises due to time constraints.

When a designer hands off their designs to the developer, it comes with a long list of elements including source design files, prototypes, design specs, fonts, images, SVGs, and a ton of notes. Translating all of this into the designer’s vision brings with it a lot of time-consuming back and forth. Usually, developers are the production’s bottleneck, with immense pressure to deliver on time. They work on business logic, bugs, architecture… They don’t really have time for design details or do-overs.

JAXenter: How can these pain points be solved?

Avishay Cohen: By addressing the pain point head-on with minimal changes to the way the teams work. I know there are plenty of solutions out there that try to solve this problem by reinventing the way teams design or code.

For simple use-cases, there are great No-code tools out there, WYSIWYG editors like Wix or Webflow are all you need to create a stunning website. But if you have developers in the picture, this path isn’t for you. The code coming from no-code tools wasn’t made for anyone to read and maintain. So product companies, companies building SaaS, apps and complex websites need a different solution.

Today, most product companies are using handoff tools like Zeplin, InVision, or Figma’s built-in tool. That’s much better than emails or dropbox which were in use beforehand. However, developers are still looking at images and reproducing them in code. That’s a lot of grunt work, and again, things get lost in translation.

And so, we’ve built Anima. A design-to-code platform that automates the process. Designers keep using their tools (i.e Figma) and developers produce code for the UI using Anima. And most importantly, the code is developer-friendly, matching the developers’ conventions.

SEE ALSO: Why Companies Should Be “Dogfooding” Their Own Software

JAXenter: How does design-to-code work under the hood?

Avishay Cohen: Anima works similar to a compiler.

The high-level flow is that Figma/Adobe/Sketch designs are processed into an abstract syntax tree. Next, that AST turned into code node by node. There’s also the developers’ input – What type the code the developer asked for, i.e. React/Vue/HTML.

The hard part here is that we’re trying to mimic human-developer behavior. So we have to optimize the AST into a hierarchy that makes sense to engineers, resulting in clean, developer-friendly code.

For example, we find patterns in the designs and turn them into Components. Or, we rename meaningless nodes so they’ll convert to readable names. The list goes on as updates are deployed weekly. This is where the magic happens.

JAXenter: What does “developer-friendly code” mean and why is it important?

Avishay Cohen: Developer-friendly code is code that is generated for humans. It is easy to understand and navigate. It also integrates the developers’ preferences of coding language and framework. It is important that the produced code will benefit the developers if it’s going to save them time and grunt work.

JAXenter: What is the demand for your platform? What kind of response are you getting?

Avishay Cohen: There are over 20 Million developers and 5 Million designers that suffer from this problem every day.

Tens-of-thousands of people sign up to Anima every month and are very excited to find a real solution for many use cases.

The most excited users are teams building something new. For these teams, it’s 10x faster to go from zero to production.

Amongst our customers, you can find developers and designers from companies such as Google, Netflix, Disney, Facebook, and Amazon.

JAXenter: How is Anima different from other solutions on the market?

Avishay Cohen: There are other solutions to this pain of taking great user experience from design to production. We can group the competition to No-code tools, Hand-off tools, and Visual-IDEs.

Handoff tools like Zeplin, InVision, or Figma’s built-in tool are what most teams use today. Using those, developers are looking at images and reproducing them in code. That’s a lot of grunt work, and things get lost in translation. With Anima, developers get code rather than images, and it takes them 10 steps ahead.

No-code tools – WYSIWYG editors like Wix or Webflow are all you need to create a stunning website. However, the code coming from no-code tools wasn’t made for anyone to read and maintain. These tools are meant to host that code and no custom servers can be connected to it. So product companies, companies building SaaS, apps and complex websites need a different solution. Anima’s code is meant for teams with engineers. The code is developer-friendly and goes to the teams’ GitHub, and connects to the users’ APIs and logic.

Visual IDEs try to solve this problem end-to-end. Meaning you have a visual editor, where designers design and developers see it reflected in code. This involves changing the main design environment for designers and usually choosing code conventions for engineers, and that’s a bit hard to adopt. Anima’s code is developer-friendly, they choose the code conventions. And for designers, Anima connects to their favorite design tool instead of asking them to switch.

SEE ALSO: “Low-code solutions allow a single company to create hundreds of applications”

JAXenter: What new capabilities and features have been released with Anima 5?

Avishay Cohen: Anima 5 is a massive milestone for our users and us. For the first time, we bring code components into the design tool (code-to-design!). Using Anima 5, product designers can use real code components in Figma/Adobe XD and create POCs that feel way more real. For developers, it will produce much more relevant code that references code they already use.

It’s really exciting because we are now the first design-to-code platform that the initial release supports Google’s Material Design components directly in Adobe XD and Figma, and we’ll be adding more and more popular open-source projects.

Material Design is a popular open-source UI library by Google that is used widely by developers and designers. Up until now, designers would attach image-based mockups of Material Design components to their prototypes. Now, designers can build code-based prototypes with Material Design components that behave just like the final product should. And developers get code that uses Google’s code, as they would code it themselves.

JAXenter: Can you share any future plans for Anima? What is currently being worked on that we can look forward to?

Avishay Cohen: Anima’s goal is to create a continuous design-to-code process. By automating the grunt work of front-end, teams can be free to innovate and deliver products 10x faster. We have a few exciting things coming up in the near future.

At the moment we are focusing on enabling integration with GitHub, allowing designers to use real code components in their design tools. The final result is advanced prototyping features that can be added to Figma, Adobe XD & Sketch. Not only that, but developers will also benefit by getting very relevant code that they can actually work with.

We also have a few releases in the pipeline for more developer tools. This will give developers a lot more control over the code they produce.