Friday, March 29, 2024
HomeRuby On RailsTips on how to Sync Your Storybook Design System Into Figma

Tips on how to Sync Your Storybook Design System Into Figma




Cover

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:

  1. Tips on how to join Storybook to Figma utilizing Anima
  2. Tips on how to generate a Figma library out of your design system code parts, and
  3. 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.



Open Anima plugin



Anima plugin opened

  1. 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
  1. 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.

  1. As soon as the sync is completed, go to Figma and the Anima plugin will present the next immediate:



Copy and paste link to Figma

  1. Then, click on “Begin producing parts”:



Figma link saved

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:



Showing unimported components

We’ll begin by increasing the carousel of unimported parts and trying to find ‘Button’:



Search for a Button component

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:



Importing a button

When the import is completed within the plugin, we are able to go forward and click on “Generate” subsequent to the Button element:



Button imported

And Anima will begin producing variants of the Button proper in Figma:



Button generating

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:



Button synced in Figma

Anima will generate a separate web page in Figma with all the Button element variants, as demonstrated under:



Button generated in Figma

We are able to change between the Button’s variants utilizing Figma’s native management panel:

Changing button variants

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:



Show Button code

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:



Button as a subcomponent in Figma

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:



Unsynced changes in Figma

All we have to do is click on “Replace,” and Anima will sync the modifications to the present Button:



Syncing changes

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:



Changes synced

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments