Anima’s Design System Automation is now available to all3 min read

Anima’s powerful design system automation tool connects your component library in code with your design library in Figma, creating a single source of truth for your design system. After 3 months of limited access, it’s now publicly available directly from Anima’s plugin.

This tool ensures seamless collaboration between designers and developers, lasting consistency between code and design, and the bottom-line benefits of a robust design system—with minimal manual effort.

How it works

To connect your coded component library with Figma, you’ll first need to create a Storybook. If/when you’ve populated a Storybook with your code components, Anima will translate them into Figma components automatically. Once they’re linked, your Figma component library will match your code component library.

Full documentation here

Two methods for connecting your Storybook

1. URL method (basic)

This is the quickest and easiest way to get started. All you need to do is paste your Storybook’s URL into Anima’s plugin. You’ll be able to explore your code components right from Figma and generate a library immediately.

When to use 

The URL method is a great choice if you want to quickly prove the concept—and don’t need continuous updates or automated maintenance.

Main benefits:

• Speed: This is a fast, frictionless way to generate a library in Figma based on your code components—as long as you don’t need continuous updates.
• Ease of use: There are no complex technical steps to execute this method. Simply copy and paste your Storybook’s URL into the plugin.

2. CLI method (advanced)

If you want more advanced capabilities, you can use the CLI method. By using CLI command on your local or CI machine, you establish a permanent link between your Figma library and Storybook. 

When to use

The CLI method is necessary when you need to establish a continuous automated workflow, including automatic updates in Figma whenever a component changes in the code.

Main benefits:

• Continuous updates: Anima’s continuous update feature monitors code changes and displays them in Figma. Designers are notified of the updates and can easily communicate with developers to approve and pull changes, or disapprove and talk to their developers.
• Design tokens usage: With the CLI integration, the generated components will have the design tokens that exist in the code, and designers will be able to edit and push changes to GitHub.

Optional methods for connecting Storybook to Figma: import via URL or sync via CLI

TL;DR

• Anima automatically connects your component library in code with your design library in Figma to create a sustainable single source of truth for your design system.
• Anima’s Design System Automation solution enables seamless collaboration and unparalleled consistency between design and development.
• Anima offers two methods for integration: URL (immediate POV) and CLI (continuous workflows).
• Whichever method you choose, you’ll reap the benefits of a robust design system—including speed, consistency, and scalability—without the costs.

Reap the benefits of a robust design system without the costs. Sign up now!