This App Turns Designs Into Working Code

Gif: Anima

Creating apps from prototypes is a huge problem. Dragging boxes around a screen and picking fonts is hard enough. Then, once the designer is done, a coder has to plug all of that in to a back end.

Advertisement

A new app called Anima aims to solve that problem by turning designs imported from popular apps like Figma into working code.

The use cases for an app like this are myriad. Being able to send React Javascript code to your developer after dragging and dropping a few simple images and buttons is a far sight better than sending a flat Photoshop file or (and this happens) a PowerPoint deck. What Anima does is surprising in that it creates reusable chunks out of repetitive data, allowing you to automatically create interfaces.

Advertisement
Illustration for article titled This App Turns Designs Into Working Code
Screenshot: Anima

For example, take this chunk of HTML. When you generate code for this box, the system automatically notices that there are four similar buttons and generates simple code to programmatically generate each one.

function App() {  return <Search searchesTitle="Trending searchs" buttonTitle={["Indie", "Techno", "Ortez", "Electro"]}  }

This particular example is obviously a bit simplistic, and the code the app generates is limited to what it’s given—it can’t build complex web apps for you quite yet. But the important thing is that you can easily replace the buttons with other automatically generated ones as necessary.

Advertisement

“The code underpinning Anima’s prototypes enables designers and developers to finally speak the same language,” co-founder Or Arbel said of the app.

John Biggs is a writer from Ohio who lives in Brooklyn. He likes books, board games, watches, and his dog. He is the Editor-in-Chief of Gizmodo.

Share This Story

Get our newsletter

DISCUSSION

sosukethedamned
Danny Nguyen

You may want to look at the Anima link. For some reason it links to a Dropbox for watches?