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 🎉
Press enter or click to view image in full size
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.
Press enter or click to view image in full size
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.
Press enter or click to view image in full size
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.
Press enter or click to view image in full size
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!
Press enter or click to view image in full size
🖇 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
, , or and sync the design into Anima with a single click. Developers can log in to Anima’s Web App and collaborate.
Press enter or click to view image in full size
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.