Storybook Figma addon
By: Shota Fuji
Tags: React, Features, Storybook, Figma, Design Systems

Storybook Figma addon

Design files are a mess. There are hundreds of artboards and states that developers need to sort through to find out what to build.

You end up tabbing back and forth between your UI implementation in the browser and pictures in the design tool.

The storybook-addon-designs for Figma shows design and implementation side-by-side in Storybook. That saves you time because you don’t have to scroll through Figma files or remember where to find the component design.

Why an addon?

My initial motivation for creating the Figma addon was simple:

“Wouldn’t it be great to see the Figma design alongside the actual implementation?”

When I typed “storybook figma” in Google I found an existing community addon. But it was no longer maintained and was only for React.

I decided to write my own addon that improves the Figma to Storybook workflow. Here’s what it does:

Embed Figma designs alongside stories

Embed other design specs, websites, images, PDFs

Framework-agnostic

Once I figured out the core features, I started building. Luckily, the building addons is fast and my company allowed me to do it on work time.

Quick Start

Before we start, make sure Storybook is installed in your project and you have a Figma file to embed. You can also embed other websites, images, and PDF but most users embed Figma.

First, install the addon from npm.

# npm

$ npm install --save-dev storybook-addon-designs # yarn

$ yarn add -D storybook-addon-designs

Register the addon in main.js .

Storybook configuration file

Now you’re ready to embed a Figma design into your story. Copy the URL of your Figma file and paste it as the value for url property!

In the addon panel, you’ll see a live view into the Figma file. If you update the design, it will also update the embed in Storybook.

Easy, right? You can also define the parameter at the file level and embed multiple files (pass an array of the object). Read about how to use story parameters in the documentation.

Add to Storybook Docs

Storybook Docs is an addon that automatically generates documentation and allows you to customize it with Markdown. The designs addon also includes Design Doc Blocks that are compatible with Storybook Docs. Use them to reference your designs alongside your UI component documentation.

What’s next

Showing static previews is the first step. I’m working on a rich Figma preview feature that supports outlines, colors, margins, padding, properties, and various customizations. All in addition to the ongoing development below:

Easier setup

Stability improvements

Support more design tools

Developer-focused features (e.g. change detection)

Screenshot of work-in-progress rich Figma preview. Learn more in this issue.

If you encounter a bug or have a feature request, please file an issue or open a pull request.

Helpful resources

storybook-addon-designs showcases how you can extend the Storybook workflow to support Figma. If you use other design tools check out similar addons for Adobe XD, Zeplin, and Abstract.

I encourage you to reference the code as you write your own addon, especially if you want to leverage the UI components and API provided by Storybook. If you want a hands-on tutorial, check out this addon tutorial.

Looking for more addons? Browse the Addons Catalog!