Storybook and Figma

Storybook is an open source tool for developing, testing, and documenting UI components across many. Use Storybook to:

Create code-based components that can be used across different platforms and devices.

Collaborate with designers, engineers, and product managers.

Showcase components in an interactive development environment, without needing to spin up the full application.

Show different use cases and examples for implementing components.

Install addons for prototyping, testing, and documentation.

Connect Storybook to Figma to view your designs in Storybook and view your stories in Figma.

The design addon for Storybook allows you to embed Figma files alongside your code-based components in Storybook. Meanwhile, the Storybook plugin for Figma allows you to embed stories alongside your design components in Figma.

Learn more about Storybook in their docs and tutorials.

About the Storybook plugin

Figma Storybook plugin lets you embed component stories in Figma. This lets you cross-reference the live implementation from Storybook in your Figma file. It’s powered by Storybook embeds and Chromatic, a publishing tool created by the Storybook team.

Before embedding Storybook in Figma you'll need:

Your Storybook project is published on Chromatic

Can edit permissions in Figma

Be listed as a collaborator in Chromatic

To connect Storybook to Figma, you will need to install the Figma addon.

Embed Storybook in Figma

To connect Figma to Storybook:

Install the plugin

Go to the Storybook plugin in the Figma Community.

Click Install.

In Storybook

Sign in with Chromatic.

Go to a story in a Storybook that is published on Chromatic.

Copy the URL for the story from the address bar.

In Figma

Open a Figma file.

Run the Storybook plugin in Figma.

Select the Figma component you want to link the story to. The Storybook plugin supports linking stories to Figma components, variants, and instances.

Paste the URL into the plugin modal.

Click Link story.Frame_3.png

Figma will show links to the story in the right sidebar. If a component was linked, all instances of that component will have the link.

Open a story in Figma

In Figma, select a component that you’ve previously linked to a story.

Click view story in the right sidebar.

or run the Storybook plugin.

Templates__1_.png

Embed Figma in Storybook

Storybook design addon allows you to embed Figma files and prototypes in Storybook. It’s powered by Figma Live Embeds. You can embed Figma files in Storybook, regardless of the file's sharing settings. Share private files within a team, or public files with the world.

Collaborators can interact with embeds based on theirteam or Organization permissions.

Install the addon:

npm install --save-dev storybook-addon-designs

# yarn add -D storybook-addon-designs

Register the addon in your .storybook/main.js file:

// .storybook/main.js

module.exports = { addons: ['storybook-addon-designs']

}

If you're using Storybook@5.0.x, use this module instead.

// .storybook/addons.js

import 'storybook-addon-designs/register'

For detailed instructions, check out the Figma addon readme on GitHub.

Copy the Figma URL

Copy the URL for the file or frame you’d like to embed in your story.

Open the Figma file.

Click the Share button.

Click the Copy link button. If you're using the Figma web app, copy the URL from the browser’s address bar instead.

Tip! You also have the option to select a specific Frame to embed. From the share modal, check Link to selected frame.

Paste the Figma URL in Storybook

Use a parameter to associate Figma files and frames to your story.

Open your stories file (in many cases, it’s named like *.stories.js)

Add a story parameter named design:

export const myStory = () => <Button>Hello, World!</Button>myStory.story = {

parameters: {

design: {

type: 'figma',

url: ''

}

}

}

Paste the copied URL to the URL field.

Open a Figma file in Storybook

Open Storybook

Open the Design tab in the addon panel.

Click the embedded Figma file to open it.

mceclip0.png