Design + Sketch
Published in

Design + Sketch

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

Sign up for early access

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!

🖇 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

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Recommended from Medium

Stacks on Stacks

There’s nothing like conducting research in an authentic context

construction productivity analysis

Are Steel Windows Worth Saving?


frustrated woman bites her pencil behind computer

Design Sprints: They Work for Enterprises, Too

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
Anima App's medium blog

Anima App's medium blog

Design to development platform

More from Medium

Why You Need A Design System. (part 1)

design system

Lift UX with Progressively Decoupled Drupal & React

Design system for the win

How to export designs from Figma to React Native code — Sizze Plugin