Anima 101
A quick intro to Anima's Design to Development platform.

Getting Started with Anima

Follow these 9 steps to start using Anima and ship better products, faster.

1. Sign up

Create your Anima account here.

2. Bring in your team

Designers and Developers collaborate on Teams > Projects.

If you’re the first person on your team to join Anima, you’ll need to invite your colleagues.

3. Create a project

The next step after creating a team is to create a project where your design file will be synced to.

4. Install Anima plugin

Install Anima for Sketch. Adobe XD, or Figma.

5. Optional: Create responsive prototypes

Using Anima Pins for Sketch, Figma’s Constraints, or Adobe XD’s Responsive Resize, you may create fully responsive prototypes that adjust to the screen size.

In addition, Breakpoints make designs look great in all screen sizes.

6. Add Smart Layers (Optional)

Smart Layers help you design realistic prototypes with ease.
Anima’s prototypes are based on code. Anything you can do with code - you can do with Anima.

Using Anima’s plugin you may add Videos, Gifs, or Lottie. You can create forms with real text Inputs, add hover-effects or animations. You may even embed code right into your prototype - Such as Google maps or a live chat.

7. Preview in Browser

Click Preview in Browser at the bottom of the Anima plugin to watch the magic!

Preview in Browser lets you see your design running as code. This is a private draft of your work that only you can see to make sure it’s aced.


8. Sync to your team’s project

Click Sync when you’re ready to share.
Your private draft will update the shared Anima project.

9. Collaborate with your team

After Syncing your design, the whole team can play it, comment on it, or generate code from it.


Additional resources

The full Anima docs are available here.


Need a sample file to get you started?