As a Senior Product Designer, it’s a huge challenge to keep Figma components up-to-date with code components. And when Figma and code are out of sync, we lose the main benefits of a shared design system: speed, consistency, and scalability.

Thankfully, there’s a solution

Anima now converts Storybook code components into native Figma components automatically, translating everything in the code into Figma parameters. That means:

• Code props become Figma variants
• Responsive CSS converts to Figma Auto Layout, and
• Design tokens translate to Figma styles

And since Anima continuously syncs code updates to Figma, I know I’m always working with the latest version of each component. This is a complete game changer when collaborating with developers to deliver digital products, and with design systems that are increasingly complex, dynamic, and difficult to maintain.

In this article, I’ll demonstrate Anima’s Design System Automation solution using MUI code components from Storybook. You can do the same with your own design system components—or any open source design system—as long as it’s documented in Storybook.

Further reading: How I built a branded design system in Figma using MUI components 

How to turn Storybook components into native Figma components

1. Run the Anima plugin in Figma

First, start by installing Anima’s plugin from your Figma file. Remember to log into Anima, select the ‘Manage Design Systems’ section in the plugin: 

The Anima plugin welcome screen: Turn Design to Code or Manage Design Systems

Then click  ‘Try with our Storybook sample’: 

Connecting Anima's Storybook sample allows you to explore the features of the integration without your own Storybook

Once clicked, you’ll be redirected to Storybook on your browser.

2. Explore components in Storybook

Storybook is a playground for front-end UI components, so you’ll be able to play around with the variants and settings of every component, and interact with a visual representation of exactly what’s in the code.  This helps you visualize the components exactly as your user will experience them in production.

3. Import components to Figma

In Storybook, click on the Anima add-on to trigger the import. Notice that each control you play with represents a property in the code. Anima turns these properties into Figma components with variants, like different alert variants, button states, or card component cases—and maps the exact same properties into Figma’s native control panel.

Next, return to Figma and paste your Figma file’s link in the Anima plugin to connect it to your selected Storybook:

It's easy to connect your Figma file to Storybook for continuous syncing

Once you’ve synced Figma to Storybook, click ‘Start generating components’: 

And watch the components you viewed in Storybook generate in Figma automatically:

Storybook code components from MUI's design system generating automatically in Figma

Here’s the MUI alert component and its variants imported into Figma:

Anima imported this MUI alert component and its variants from Storybook into Figma

And here’s a MUI button component with all of its coded variants I imported from Storybook:

A MUI button component and its variants imported from Storybook into Figma using Anima

4. Customize the components in Figma

I find it really easy and efficient to play around with the imported components and switch between variants in Figma.

Once a component is generated from Storybook, I can easily grab an instance, adjust the Figma properties, and edit it as I wish using Figma’s native control panel.

I can also apply customizations—like tweaking the text, resizing, and changing colors as I normally would. And just as Anima converts design tokens into Figma styles, it also goes the other way: designers can change styles in Figma and automatically generate updated design tokens for developers.

Switching between variants defined in the code using Figma's native control panel

5. Hand your design off

Anima’s Design System Automation solution makes handoff a breeze. Along with the design, developers can access code snippets and storybook links for every design system component in the flow—right from Figma’s Inspect Panel. And since Anima maintains all of the naming conventions from the code in Figma, developers always know exactly which components and props to implement.

A button component generated by Anima in Figma, with corresponding code snippets, properties, and Storybook links visible in Figma's Inspect Panel

And that’s it! We now have a Figma Library that’s continuously synced with production so we can easily grab, tweak, and design with the exact same components developers will use to build the product. This single source of truth will help designers like me create and deploy designs faster, with perfect fidelity, minimal iterations, and zero friction during handoff. It’ll even allow for rapid prototyping with interactive production components.

It’s safe to say this will change the way teams build, manage, and scale design systems—and make them sustainable at the current pace of innovation. All in all this Storybook integration will make it easier for designers and developers to deliver better products more consistently and efficiently together. 

Your Figma library won’t sync itself. Unless you’re using Anima.

The post How to turn MUI code components into a native Figma library appeared first on Anima Blog.

Design to code is a difficult problem to crack, there are so many variations to consider. On the Figma side, we have to consider auto layouts, design tokens, component sets, instances and Figma variables. On the code side, we have to assume that the codebase could contain both local and external components that could come from anywhere.

That’s why, when we created Frontier, we didn’t want to stick to just one coding design system. MUI, for example, is a very popular React Design System, but it’s one of <very> many design systems that are rising and falling. Ant Design is still extremely popular, as is the TailwindCSS library. We’re seeing the rapid rise of Radix-based component libraries like ShadCN as are Chakra and NextUI. However, we knew that if we wanted to reach a wide audience we could not rely on a limited subset of Design Systems, we had to create a “pluggable design system”.

Key Challenges in Implementing a Pluggable Design System

There are a few challenges to accomplishing this:

• 1. Existing Project Integration:

     You have an existing project that already uses a design system. In this case, we are expected to scan the codebase, and understand and reuse the design system. We do this when Frontier starts, it looks through your codebase for local and external components (you can restrict where it actually scans and also control how deeply it looks at the code) for your code components and usages of those code components.

  2. Design and Code Component Mismatch:

     When we look at the Figma design, we don’t assume that the designer has a clear understanding of which component system will be utilized to implement the design. Typically, if this is an Enterprise with a Design System Team, the components in the design will match in design. Still, not necessarily in their name, variants nor have a 1:1 match between the Figma and code component counterparts. In fact, the same design could be used with different Design Systems code components and fully expected to match and work.

  3. Flexible Implementation:

     Once applied, components could have multiple ways to implement overrides and children:

     1. Props / variants
     2. Component children
     3. Named slots

  4. The “Cold start” problem

     Even if you solve scanning the project’s repo, what happens when you encounter a brand new project and want to use a new library with it? In this case, you would have zero code usage examples and zero components that you are aware of…

To overcome these problems we started with a few assumptions:

• 1. Leverage Usage Examples:

     the project has a robust set of usage examples, we can take inspiration from them and understand how this particular project utilizes those components, which will help us solve the prop/overrides/children/named-slots issue.

  2. Custom Matching Model

     We had to create a custom model that understands how designers in design systems implement their components and how developers code the code components. This matching model was trained on a large set of open source Design System repos and open Figma design systems. It reached a surprisingly high matching rate on all our tests. Looks like many designers and many developers think in similar ways despite using very different conventions and actual designs.

  3. Cross-System Matching

     Once we were able to match within the same design system, the next challenge was to make the model more robust with matching across design systems – take a design that relies on AntD components and train the model to implement it using MUI components, or vice versa. This made the model much more versatile.

  4. Local Storage for Privacy and Security

     For security and privacy purposes, we have to encode and store our RAG embeddings database locally, on the user’s machine. This allows us to perform much of the work locally without having to send the user’s code to the cloud for processing.

      

Interestingly, the fact that we can store bits and pieces of this databases, also opens up possibilities with cold starts. An empty project can now easily state that it wants to use MUI and simply download and use the embeddings. That gives the usage LLMs all the context that’s needed to produce much more robust results, even when the codebase is completely empty from any actual context.

The result is that Frontier can now generate code components in projects, even if the Design System doesn’t actually match the code design library and even when the codebase is completely devoid of any actual examples.

The post Pluggable design system – Figma to your design system code appeared first on Anima Blog.

We’re excited to announce Design System Automation by Anima, which automatically turns your Storybook into a native Figma library, then keeps it continuously synced with any code updates. The generated Figma components include variants, Auto Layout parameters, Figma Styles, and actual code from Storybook.

Designers can build flows with the same components developers will use to build the product. Developers get designs containing the exact components they have in the code, along with names, props, Storybook links, and their own code references. That makes handoff and implementation a breeze.

Anima’s Design System Automation solution gives teams consistent, lightning-fast builds, perfect fidelity, and zero friction between design and development.

In this article, we’ll demonstrate:

1. How to connect Storybook to Figma using Anima
2. How to generate a Figma library from your design system code components, and
3. How Anima keeps Figma continuously synced with production.

Let’s get to it!

Step 1. Connect Storybook and Figma using Anima’s integration

First off, you will need to download the Anima plugin for Figma. Once you have it installed in Figma, go ahead and open the Anima plugin.

1. To start syncing Storybook and Figma, you will need to install the Anima CLI. For this example, we’ll use LeafyGreen—MongoDB’s design system in Storybook —and install the Anima CLI there. You can install the CLI inside your own project with the following commands:

yarn add -D anima-storybook-cli

Or, if you’re using `npm`, like so:

npm install –save-dev anima-storybook-cli

2. Once the Anima CLI is installed, we need to generate a Storybook build. In the showcase project, we are doing it with this command:

yarn build-storybook

Now that the Storybook is built, we can sync it with Anima and Figma using the Anima CLI and the token we got in the Anima Figma plugin. To sync Storybook and Figma, run the following command:

yarn anima-storybook sync -t YOUR_TOKEN

The `anima-storybook` will prepare and sync files to your Figma project and report when it finishes. The important thing here is to pass the token from the Anima Figma plugin.

3. Once the sync is finished, go to Figma and the Anima plugin will show the following prompt:

4. Then, click “Start generating components”:

After some time, Anima will wire up the Storybook and Figma and allow you to generate Figma components from Storybook.

Step 2. Generate Figma components from Storybook code

Now that the Storybook and Figma are synced via Anima’s CLI, we can generate any Storybook component right from Figma. Unimported Storybook components will appear in the Anima plugin like so:

We’ll start by expanding the carousel of unimported components and searching for ‘Button’:

Then, we’ll select the Button variants we wish to import. In this case, ‘Button’ has a lot of props, and Anima can identify and generate every possible combination as a unique variant in Figma:

When the import is finished in the plugin, we can go ahead and click “Generate” next to the Button component:

And Anima will start generating variants of the Button right in Figma:

Once complete, the Button will appear as synced and we can go ahead and preview the generated Figma components by either clicking the four dots in the plugin or navigating to the “Components/Button” page in Figma:

Anima will generate a separate page in Figma with all of the Button component variants, as demonstrated below:

We can switch between the Button’s variants using Figma’s native control panel:

What’s also great is that you can preview the code you’ll implement directly from Figma’s inspect panel. The code includes the updated props, and the naming conventions are identical to those used in Storybook:

Also, whenever you import a component that includes a button, Anima will recognize it as a subcomponent so you can edit that instance alone:

This is definitely a game-changer when it comes to bridging the gap between designers and developers. But what happens when the Button changes in the code?

In the next section, we’ll demonstrate how Anima automatically syncs Storybook code updates to Figma.

Step 3. Sync Storybook and Figma

So we changed some logic inside the Button component in the code, but how do we ensure those updates are synced in Figma? First, we need to rebuild the Storybook with:

yarn build-storybook

Next, we need to sync Storybook to Figma again using Anima’s CLI:

yarn anima-storybook sync -t YOUR_TOKEN

Once we’ve synced, the Anima plugin in Figma will notify us that we have some unsynced changes to our component library:

All we need to do is click “Update,” and Anima will sync the changes to the existing Button:

Once the changes are synced, we can see that the Button element has a change reflected. I added a letter “A” to be rendered in every button, which can be clearly seen in each variant below:

And that’s it. You can incorporate the `yarn anima-storybook sync‘ command somewhere in your continuous integration (CI) workflow so that changes are synced, for example, whenever code is pushed to the main branch of your project. This will ease the handoff process, accelerate frontend builds, and allow developers to focus on logic and backend architecture. If you have a complex, dynamic design system, this is a great solution for keeping designers aligned with production. 

Get designs built with your production components. Every time.
Try it now

The post How to sync your Storybook design system into Figma appeared first on Anima Blog.

One of the biggest challenges for product teams working with design systems is ensuring that all components across all workspaces are consistent with the ones used in production.

With Anima, you no longer have to worry. Anima automatically syncs your Figma components with your code components in Storybook, including variants, Auto Layout, and Figma Styles. It protects and ensures a single source of truth at the code level and keeps all components continuously up-to-date in Figma.

And since Anima renders your actual component code in its Live Preview, you can design and share an interactive, responsive prototype that’s 1:1 with production—without a developer. In this article, we’ll show you how it works in 3 simple steps.

Step 1. Import your code components into Figma and build a prototype

Here’s how you can easily import your code components into Figma and use them to build interactive, responsive prototypes without a developer. To demonstrate this, we’ll create a sample form based on this wireframe:

A simple form wireframe

We will be building our form using components from the Supabase design system in Storybook, but you can just as easily use your own coded design system or any other open-source design system available on Storybook.

Let’s head over to Supabase’s Storybook:

Supabase's open source design system in Storybook

Here, we’ll explore and choose components that suit our needs for our sample project. For our form wireframe, we’ll narrow down the required components to Data Inputs (With Reveal and Copy, Text Area, ListBox, Upload, Radio) and generate them in Figma automatically.

Anima automatically generates a Figma library from Storybook code components

Now, let’s take a closer look at one of the Figma components Anima generated from code.

For this alert component, you can see in the control panel that Anima turned its props into Figma variants and responsive CSS into Figma Auto Layout. Anima also translated its design tokens to Figma’s Local Styles.

Anima converts code props to Figma variants, responsive CSS to Auto Layout, and design tokens to Figma Styles 

Once we’ve confirmed our components were properly imported, we’re ready to create our first design.

Using the newly synced components in the Figma library, we can easily build our form prototype. It’s a simple yet fully functional form with just 5 components from the assets. Did I mention these components are synced in real-time with our coded components in Storybook?!

A form built with live production components in Figma

Step 2. Preview your interactive prototype

Anima allows you to transform your Figma project into a live preview or prototype that’s rendered from your actual production code. You first need to launch and sign into Anima’s plugin for Figma, and choose “Turn Design to Code” option.

Anima plugin's opening screen

Next, select the frame you would like to preview (in our case, our sample form), and click on the “Preview” button.

Preview your interactive prototype right from Anima's plugin for Figma

In the live preview, all of your components will look and behave exactly as they will in production since they’re rendered with your actual source code. For example, you can click on the dropdown menu and choose different options exactly like you can in Storybook—or in the final product.

This dropdown menu rendered from Supabase's code is fully functional

The component behavior in Storybook is precisely reproduced in Figma

If you want to change your design, all you need to do is exit the preview, make updates, and return to the preview again. You’ll see that all the changes are instantly reflected there.

Step 3. Share your interactive prototype

Once you’ve settled on your design and confirmed that it’ll be accurately reflected in production, you can easily share your prototype by syncing it with Anima’s web app. First, click on the “sync” button at the bottom of the Anima Plugin:

Syncing a Figma design to Anima's web app

You’ll be asked to choose a project to sync with. You can choose an existing project or create a new one to complete syncing.

Setting up an Anima project from the plugin in Figma

When you open your project in Anima’s web app, you can see that all components are fully interactive, just like they were in the Figma preview. That’s because each component is rendered from Supabase’s actual code.

A live prototype built with Figma + Anima using code components from Supabase's Storybook

Finally, when you’re happy with your design, you can share a public link to your web-based prototype. Connect your own domain in a few simple steps, or use Anima’s generated sub-domain. Here’s the prototype link I created. 

Anima makes it easy to share a live, public link to your prototype

Get better demos, more valuable user tests, and perfect fidelity from every prototype.
Try it now for free

The post Use live Storybook components in your Figma prototypes appeared first on Anima Blog.