Sketch to React and Developer-friendly Code. Announcing Anima 4.

Sign up for early access

Anima App
Anima App
Jun 26, 2019 · 3 min read

Anima is the fastest way from design to production.
By converting web design to code, we bridge communication between designers and developers. This results in boosted productivity and high-performing teams.


Today we have some exciting news about what’s coming in Anima 4 🎉
- Request early access here

Anima 4 introduces a completely new way for designers to collaborate with developers. For the first time, developers can access relevant, developer-friendly, runnable, React code.

During the past 2 years, we have been diligently researching what makes frontend code developer-friendly. Our first product to generate code from design has been an enormous success and it helped us learn a lot.

In Anima 4, we have taken in all the feedback and crafted a solution that developers would love.

A sneak peek into Anima 4 — Sketch to developer-friendly React code

Anima 4 Highlights

⚛️ React Components

React is the most popular Frontend development framework. Using React means writing reusable components. This makes the code more readable and easy to maintain.

Anima 4 generates React components.

Automatically-generated reusable React component being used on developer-playground

By leveraging Sketch symbols, we detect which parts of the design are reused. These symbols are translated to developer-friendly React components.


📦 Automatic Flexbox Layout

For the past 20 years, developers have been testing plenty of code generation tools. But it always comes down to one characteristic that makes the generated code unusable. The dreaded CSS property “position: absolute;”.

Anima 4 is the first code generation platform to make this problem go away.

Using Computer-Vision algorithms, we automatically detect and apply a Flexbox layout. Just like a human developer would do.

X-Ray mode reveals the Automatic Flexbox layout

Flexbox layout means relative positioning, so layers can now push each-other as they expand according to content. By having this done automatically, we save a lot of time for developers.


👩‍💻 Customized Developer Environment

The Developer environment in Anima was built from the ground up to make developers life easier. Developers can navigate through components straight from the design, tweak generated code online, and instantly see the result rendered in real-time.

Developer preferences enable developers to pick and choose between different coding styles and conventions. Do you prefer Styled-components? Functional components over Class-based components? Tabs over spaces? You got it!


🖇 Can Be Used in Existing Projects

Having easy navigation between self-contained, reusable components makes the generated code easy to read.

Since the components have no dependencies, copying and pasting into an existing code-base will just work.


💎 Sketch Integration & Web Collaboration

Designers work in Sketch and sync the design into Anima with a single click. Developers can log in to Anima’s Web App and collaborate.

Anima 4 is already being used by teams and we are happy to invite more teams to experience the fastest way from design to production.

Request an invite to Anima 4


Join the discussion or just show off your designs on Facebook or Twitter.
❤️ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Anima App

Written by

Anima App

Empowering designers. Changing the game.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

More From Medium

More from Design + Sketch

321

More from Design + Sketch

More from Design + Sketch

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade