Skip to content
On this page


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

variants match

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

Media-queries as Variants

5. Code snippets embedded in instances

Know for each component if it already exists in your source code, and which properties to use 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 into design tokens. You can use the Anima plugin to create tokens that are not (yet) supported by Figma, like typography.

typography token creation

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.

Manage Design Tokens - create a PR

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.