Connect your components with Figma
To connect your component library in code with Figma, you will need to have a Storybook for your components. Anima will then translate your Storybook into Figma components, creating a library in Figma that matches your library in code.
Two methods to connect
There are two ways to connect your Storybook with Anima and Figma:
(Basic) By providing a URL to your Storybook - great for seeing the results instantly
(Advanced) By using CLI command on your local or CI machine - great for a continuous automated workflow
When to Use Each Method?
The
URL method
is the quickest and easiest way to get started. It allows you to see your components in Figma and generate a library immediately, making it a great choice if you want to quickly prove the concept.The
CLI method
allows more advanced capabilities. This method offers two main benefits:Continuous updates: Anima's continuous update feature monitors code changes and display them on 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. How to configure continuous updates
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.