All Collections
Developer's Guide to Anima
Storybook Guidelines
Storybook Guidelines

What to expect from Anima's Storybook-to-Figma Integration

Shira Westrich avatar
Written by Shira Westrich
Updated over a week ago

⭐️ Be sure to check out our DSA Docs for a thorough guideline on how to navigate this integration. ⭐️

Which Storybook type is supported?

  1. Public / Private storybook

  2. Storybook with Controls

How to export to Figma?

Click on the Anima addon in your storybook to export

  1. A specific component (the story that you are currently on)

  2. Your entire storybook

What to expect in Figma?

1. A native Figma library file

The library file - we create a library of native Figma components - that you can share and use in all other Figma files as if you’ve manually created it.

The components - Each component is generated by the controls in your code and can be used in Figma native panels. Each control is translated into a property in Figma. So if you have a button with 2 controls:

a. Size: S / M / L

b. Disabled: True / False

We will generate a button with 6 variants in Figma:

(1) S - Disabled (2) S - Active (3) M - Disabled

(4) M - Active (5) L - Disabled (6) L - Active

Storybook, Figma and code - all match

2. Support of complex properties

Some code properties can not be generated in Figma (e.g., arrays, see pic below). These properties can be edited via the anima plugin.

  1. Select a complex component

  2. The controls panel would be available to you in the Anima plugin

  3. Edit the properties as you wish

  4. Click on “Add anew variant”

Array example

3. Auto-layout support

Your components would be automatically generated with Figma auto-layout, defined by your CSS properties

4. Variants limitation - 1024 variants

Some components have multiple controls that can reach a huge amount of variants in Figma. To keep your Figma components manageable - we are limiting the number of variants to 1024.

Missing a variant you need?

  1. Specify which props should be exported in the story definition files

  2. Or generate it with the complex component panel in Figma (see "Support of complex properties" section above)

How to provide feedback?

We are constantly working on improving our fidelity, auto-layout support, storybook structure support, and UX. If you find any issues or missing a capability - please let us know :)

  1. Via the “Provide feedback” button in your plugin

  2. In our discord

  3. Request access to the beta

Did this answer your question?