Features
Generate Figma components automatically
Use Anima DSA to generate your entire code components library as a Figma library, with a single click. Anima will translate all of your components (as they are represented in Storybook), as native Figma components.
1. Figma variants sync to a component's props
A component's property will be translated to a Figma variant
2. Figma's Auto-layout sync to a component's CSS flex layout
Anima will automatically convert the CSS flex styles into Figma Auto-layout
3. Figma styles sync to design tokens
Anima will create your design tokens as Figma styles, ready to use and edit directly from Figma
4. Media-queries to Figma variants
Have components that look different on different screens? We’ve got you covered. When importing your component to Figma, you’re able to define which viewports you’d like to see in Figma. Anima will add a “Viewport” size property to your component, with all selected sizes
5. Code snippets embedded in instances
Know for each component if it already exists in your source code, and which properties to used for the selected instance
Manage design tokens
Whether it's rebranding, accessibility tests, or touch-ups, your design system is constantly evolving. Translating those changes into words and tasks often leads to pixels and colors that get lost in translation.
Here's how Anima keeps your design tokens in sync across your designs and codebase
1. Create, update, and delete design tokens
Anima supports all of Figma's native styles and converts them to design tokens. You can use the Anima plugin to create tokens that are not (yet) supported by Figma, like typography.
2. Create pull requests for design tokens updates directly from Figma
Anima lets you connect your Figma with GitHub, so you can make changes to your design tokens in Figma and push those changes back to GitHub.
3. Pull design tokens updates from GitHub to Figma
By connecting to GitHub, you can pull any changes made to the code and have those changes reflected in Figma.