Announcing Anima 43 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

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, 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

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!

The Developer environment in Anima

🖇 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, Adobe XD, or Figma 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.

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

Join the discussion or show off your designs on  Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima team