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

Sign up for early access

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

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

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

Anima 4 generates React components.

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

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

📦 Automatic Flexbox Layout

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

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

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

💎 Sketch Integration & Web Collaboration

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

As always, we’re excited to hear your feedback!

Stay creative!
❤️ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store