Anima syncs Storybook and Figma for a single source of truth
Tags: storybook, devops, productivity, react
Published: 2022-08-25 08:34:12

---
title: Anima syncs Storybook and Figma for a single source of truth
published: true
date: 2022-06-16 10:22:09 UTC
tags: storybook, devops, productivity, react
canonical_url: https://www.animaapp.com/blog/product-updates/single-source-of-truth-between-storybook-and-figma/
---
![Anima syncs Storybook and Figma for a single source of truth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndzdgvsiyfaktrvyw4bu.png)

If you have a large, dynamic product and a design system in Storybook, you know how hard it is to keep your Figma design library in sync with your codebase.

Thats because until now, designers and developers have had different sources of truth, one in Figma and one in code. But not anymore.

We're excited to announce that Anima now turns your Storybook into a native Figma library - automatically - in a single click. 🚀

![Turn your Storybook into a native Figma library with all variants and responsive properties, in a single click.](https://cdn.hashnode.com/res/hashnode/image/upload/v1660646733695/8Cfu4zXdi.gif)

`Just export from Storybook and watch Anima build your production components in Figma.`

## The problem: designers and developers have different sources of truth

**Designers** use Figma libraries to design products, and **developers** use code libraries to build them.

In an ideal world, these libraries are kept in sync. But if you're a growing or established software company with a complex product and segmented teams, you know its a massive, never-ending task.

So how do you keep your design library up-to-date with your code components? Or identify which components have been developed and which ones only exist in Figma? What about preventing new developers from using the wrong components - or rebuilding existing ones - because they don't know the codebase yet?


## The solution: a single source of truth between design and development


### What _is_ the single source of truth?

Is it your **Figma library** or your **code library**? This is a controversial question, and we don't claim to have the answer. But in our humble opinion, **code is the single source of truth**.

Why? Because despite the fact that we create components in Figma before developing them, code determines what users will actually _see_.

With that in mind, we've enabled designers and developers to build products together with the exact same code components.

## Introducing Animas Storybook integration for Figma

Now you can turn your Storybook into a native Figma library in a click to create a single source of truth between design and development.

- **Generate** a Figma library from your code components in Storybook - automatically - including all variants and naming conventions
- **Publish** and share the library with your team, or with distributed teams across your organization (using Figma)
- **Build** flows with the exact components your users are seeing **using Figma's native capabilities**


## Who is this for?

### For designers

- Generate a Figma library based on your existing code components. You'll get:
  - a real-time visual inventory of **all of your production components** including variants - laid out on your Figma canvas

![Get an inventory of all of your production components from Storybook right in your Figma canvas.](https://cdn.hashnode.com/res/hashnode/image/upload/v1660647358270/tQlhU-Sl1.jpeg)

- all properties defined in the code automatically mapped into **Figma variants** , and all responsive CSS converted into **Auto Layout definitions**

![Anima turns Storybook components into Figma components, converting props to variants and css to Figma Auto Layout definitions.](https://cdn.hashnode.com/res/hashnode/image/upload/v1660647647105/4YyqYAgFH.gif)

- Design as usual, knowing developers will use the exact same components to build the product
- **Use Figma's native control panel** to switch between variants so theres no need to change how you work

![Use Storybook components in Figma, and use Figma's native control panel to switch between variants defined in the code.](https://cdn.hashnode.com/res/hashnode/image/upload/v1660647460423/pwqSnoisR.jpeg)

- Know you're designing **what users will actually see** , and get notified when a components code has changed so you can update it in Figma

### For developers

- Help designers **reuse existing components** instead of reinventing the wheel
- Get designs containing the **exact components you have in the code** , including:
  - the same **names and properties**
  - **a link to each component** in Storybook

![Design with production components in Figma, then give developers a link to the component in Storybook.](https://cdn.hashnode.com/res/hashnode/image/upload/v1660647499523/jzpKVot6_.jpeg)

- Know if the design you're handed is reusing existing components, or contains new components you'll need to build
- Prevent new or junior developers that aren't familiar with the codebase from using the wrong components or building new ones unnecessarily
- Keep your codebase free of redundant components, or new components that might confuse users or clash with your existing design system

### Were almost there!

Got new ideas or requests? Let us know!

Were working hard to perfect our Anima + Storybook integration for Figma, and wed love to hear your thoughts. Let us know what you like, what you don't, and what features or changes would make this the perfect integration for _you_. Don't hold back - we're all ears!

Feel free to reach out to us using our [forum](https://forum.animaapp.com/) to ask questions, provide feedback, report bugs, and request features 🙂

* * *

**Considering Anima for your organization?** [Schedule a demo](https://bit.ly/3vRQ3dT) to start.

[![5_Schedule-anima-demo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658303030130/Ze--Fwk_k.png)](https://bit.ly/3vRQ3dT)

* * *

The post [Anima syncs Storybook and Figma for a single source of truth](https://www.animaapp.com/blog/product-updates/single-source-of-truth-between-storybook-and-figma/) appeared first on [Anima Blog](https://www.animaapp.com/blog).