We’re excited to announce Design System Automation by Anima, which robotically turns your Storybook right into a native Figma library, then retains it constantly synced with any code updates. The generated Figma parts embrace variants, Auto Structure parameters, Figma Kinds, and precise code from Storybook.
Designers can construct flows with the identical parts builders will use to construct the product. Builders get designs containing the precise parts they’ve within the code, together with names, props, Storybook hyperlinks, and their very own code references. That makes handoff and implementation a breeze.
Anima’s Design System Automation answer offers groups constant, lightning-fast builds, good constancy, and eliminates friction between design and growth.
On this article, we’ll display:
- Tips on how to join Storybook to Figma utilizing Anima
- Tips on how to generate a Figma library out of your design system code parts, and
- How Anima retains Figma constantly synced with manufacturing.
Let’s get to it!
Step 1. Join Storybook and Figma utilizing Anima’s integration
First off, you have to to obtain the Anima plugin for Figma. After you have it put in in Figma, go forward and open the Anima plugin.
- To start out syncing Storybook and Figma, you have to to put in the Anima CLI. For this instance, we’ll use LeafyGreen—MongoDB’s design system in Storybook —and set up the Anima CLI there. You possibly can set up the CLI inside your individual challenge with the next instructions:
yarn add -D anima-storybook-cli
Or, if you happen to’re utilizing npm
, like so:
npm set up –save-dev anima-storybook-cli
- As soon as the Anima CLI is put in, we have to generate a Storybook construct. Within the showcase challenge, we’re doing it with this command:
Now that the Storybook is constructed, we are able to sync it with Anima and Figma utilizing the Anima CLI and the token we received within the Anima Figma plugin. To sync Storybook and Figma, run the next command:
yarn anima-storybook sync -t YOUR_TOKEN
The anima-storybook
will put together and sync information to your Figma challenge and report when it finishes. The vital factor right here is to move the token from the Anima Figma plugin.
- As soon as the sync is completed, go to Figma and the Anima plugin will present the next immediate:
- Then, click on “Begin producing parts”:
After a while, Anima will wire up the Storybook and Figma and let you generate Figma parts from Storybook.
Step 2. Generate Figma parts from Storybook code
Now that the Storybook and Figma are synced by way of Anima’s CLI, we are able to generate any Storybook element proper from Figma. Unimported Storybook parts will seem within the Anima plugin like so:
We’ll begin by increasing the carousel of unimported parts and trying to find ‘Button’:
Then, we’ll choose the Button variants we want to import. On this case, ‘Button’ has a whole lot of props, and Anima can establish and generate each doable mixture as a singular variant in Figma:
When the import is completed within the plugin, we are able to go forward and click on “Generate” subsequent to the Button element:
And Anima will begin producing variants of the Button proper in Figma:
As soon as full, the Button will seem as synced and we are able to go forward and preview the generated Figma parts by both clicking the 4 dots within the plugin or navigating to the “Elements/Button” web page in Figma:
Anima will generate a separate web page in Figma with all the Button element variants, as demonstrated under:
We are able to change between the Button’s variants utilizing Figma’s native management panel:
What’s additionally nice is which you could preview the code you’ll implement straight from Figma’s examine panel. The code consists of the up to date props, and the naming conventions are similar to these utilized in Storybook:
Additionally, everytime you import a element that features a button, Anima will acknowledge it as a subcomponent so you possibly can edit that occasion alone:
That is undoubtedly a game-changer relating to bridging the hole between designers and builders. However what occurs when the Button modifications within the code?
Within the subsequent part, we’ll display how Anima robotically syncs Storybook code updates to Figma.
Step 3. Sync Storybook and Figma
So we modified some logic contained in the Button element within the code, however how can we guarantee these updates are synced in Figma? First, we have to rebuild the Storybook with:
Subsequent, we have to sync Storybook to Figma once more utilizing Anima’s CLI:
yarn anima-storybook sync -t YOUR_TOKEN
As soon as we’ve synced, the Anima plugin in Figma will notify us that we have now some unsynced modifications to our element library:
All we have to do is click on “Replace,” and Anima will sync the modifications to the present Button:
As soon as the modifications are synced, we are able to see that the Button ingredient has a change mirrored. I added a letter “A” to be rendered in each button, which will be clearly seen in every variant under:
And that’s it. You possibly can incorporate the yarn anima-storybook sync
command someplace in your steady integration (CI) workflow in order that modifications are synced, for instance, every time code is pushed to the primary department of your challenge. This may ease the handoff course of, speed up frontend builds, and permit builders to concentrate on logic and backend structure. In case you have a posh, dynamic design system, this can be a nice answer for retaining designers aligned with manufacturing.