Anima – FAQ’s answered4 min read

Anima is a design-to-code platform that lets designers create fully responsive prototypes that look and work exactly like the finished product, and lets developers take these designs and translate them into developer-friendly code. 

As a new technology that is the first in the market, in that it allows you to design high-fidelity prototypes and get developer-friendly code, we get a lot of questions on a daily basis from our users and the community in general. So we decided to put together the 10 most common questions we get and answer them for you in one place. 

1. Is Anima a design tool or an animation tool?

This is a question that we get often, and the answer is no. Anima is a design-to-code platform. This means that designers can turn their designs into interactive and responsive ones using their own design tools (Figma, Adobe XD, & Sketch) by using Anima’s plugin. Developers, on the other hand, can convert these designs into clean, developer-friendly code.

Anima: A design-to-code platform

2. Where can I see and play with the code generated by Anima?

This is a great (and important) question.

You can generate code in 2 different ways:

• Full flow: best suitable option if you want to generate code for a full flow (website / app) with interactions, interlinking and more). It requires you to sync the project in the Anima webapp.
• Component code inspect: select this option in the plugin to inspect / copy / download single screens or components. Click “Open in playground” to see it running.
  The code that you get is component-based, so you can navigate it easily and make changes as you need to.

3. Do you support Parallax?

This is a request that we get from designers on an ongoing basis. Great news, it has just been released! Check it out and let us know what you think.

4. What kinds of code do you support?

Anima generates versatile, high-quality code tailored to developers’ diverse needs. Supported outputs include:

• React, Vue, and HTML
• Styling Options: You can choose between Tailwind CSS, styled-components, or plain CSS for your design styles.
• React UI Libraries: Anima supports integration with popular React component libraries like Shadcn, Material-UI (MUI), and Radix, ensuring seamless compatibility with your development framework.

This flexibility empowers product teams to adopt the coding and design practices that best fit their project requirements.

Want to know how to get code for designs with Anima?

• Learn how to get Vue code for designs
• Learn how to get React code for designs
• Learn how to get HTML code for designs

5. Can I check out the code quality before becoming a Pro user?

Yes, you can! If you’re interested in checking out what Anima’s code looks like before you sign up for the Pro plan, you can sign up for the free plan and get free “code inspects” and “code copies”

6. As a developer do I need to have access to a design tool to use Anima?

The short answer is no.
The long answer is that you can do one of the following:

• Ask your designer to sync their design to Anima’s platform (see question 8)
• If your designer is using Sketch, you can simply import the Sketch file directly to Anima, with Sketch quick import (read how to do it here)

7. Is Anima free?

Anima offers several packages, including a free package.

• Free package – Ideal for hobby projects, prototypes, and testing Anima
• Pro package – Ideal for exporting code for full flows and website publishing
• Business package – Ideal for teams building at scale
• Enterprise – Ideal for mature teams needing secure and scalable solutions

You can find out more about the pricing packages here.

8. How do I sync a design to Anima?

On your design tool (Figma, Adobe XD, & Sketch):

• Download the Anima plug-in, select “Preview in Browser”
• Select “Sync to Project” in the top right corner of the screen

Read more here, for a step-by-step guide on how to sync Figma, Adobe XD, & Sketch designs to the Anima platform.

9. How do I collaborate with my team using Anima?

Eliminate the handoff back and forth with Anima, with these cool collaboration features:

• Invite team members – share your entire project with your teammates (even if you don’t have their design tool)
• Share your prototype link – lets your teammates get a real feel of the end product without even signing up to Anima
• Make comments – Collaborate on your design with the team in real-time

10. How do I make my design responsive using Anima?

A responsive design means your design will look good in any screen size. Anima lets you do that by simply defining breakpoints and customizing your constraints with the click of a button.

11. What is the difference between Anima and Frontier?

Frontier by Anima is an AI-powered coding assistant that integrates with VSCode to simplify front-end development. It complements Anima’s design-to-code capabilities. It converts Figma to React code leveraging existing codebase and reusing design system components.

Get started here!