Which Storybook type is supported?
Public / Private storybook
Storybook with Controls
How to export to Figma?
Click on the Anima addon in your storybook to export
A specific component (the story that you are currently on)
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
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.
Select a complex component
The controls panel would be available to you in the Anima plugin
Edit the properties as you wish
Click on “Add anew variant”
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?
Specify which props should be exported in the story definition files
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 :)