Why connect design assets to Storybook?#

When developing any UI in a project, having the design easily available makes a world of difference. Storybook addons allow you to achieve pretty much anything, and there are even addons to connect Storybook with design tools. By linking the component to the design assets for it, we can refer to the design while developing the component, but we can also refer back to it in the future in case we need to rework it. If the designers change the assets, it will be synced to the Storybook addon as well, so there's no need to keep asking for the links to the design anymore.

Let's go through the process of discovering such addons and installing them in our project.

Addons gallery#

On Storybook's official website, there is an addon gallery, which displays all kinds of addons (official and from the community) filtered by categories, alongside instructions on how to install them. Let's access it via this link: https://storybook.js.org/addons

In this course, we will use Figma, so let's try to find an addon for that. By clicking in the Design section, we see a bunch of different addons, and there we see storybook-addon-designs, popularly known as Figma designs addon. Let's click on it and follow the install instructions.

Decorator#

Remember the decorators file from the previous lesson? Given that we need to apply the decorator globally so that every story can provide a design, let's add it to our array:

// ./storybook/decorators.tsx

import { withDesign } from 'storybook-addon-designs'

// ... decorators here

export const globalDecorators = [withTheme, withDesign]

Connecting our first design#

As we recently checked the Badge component, let's connect the design in its stories. Normally, you would ask the designers for the link to the component. If you have access to your project's Figma, you can get the link of a component by right-clicking its frame and selecting Copy/Paste as > Copy Link. You could also select the frame, click on the share button at the top right, and select copy link:

You don't need to do that for this lesson as I already have the link for you:https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1906%3A3469

Adding a design to a stories file#

Once the addon is installed and you have the design link, all you have to do is add the design parameter with the correct configuration:

// src/components/Badge/Badge.stories.tsx

export default {

  title: 'Components/Badge',

  component: Badge,

  parameters: {

    design: {

      type: 'figma',

      url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1906%3A3469',

    }

  }

} as ComponentMeta<typeof Badge>

// ...stories here

There you go. You should now be able to access the component's design in the addons panel!

At the bottom, you can see the last time it's been updated, as well as a link that opens Figma with that component. There you can access the tokens and use them to help you get pixel-perfect components.