Storybook + Figmaで始めるデザイン駆動コンポーネント開発

こんにちはhiro08です。

Storybookのアドオンを使えばFigmaのデザインデータを埋め込みすることができます。

利点として、実際のFigmaで作成されたデザインデータを見ながらコンポーネントを開発することできます。個人的にDXが爆上げで、必須のアドオンになっています。もちろん、Storybook自体をホスティングができるので、エンジニアとデザイナーの間でコミュニケーションの差異がないか確認しながら作業できるのも魅力です。

前提

create-react-appで作成したプロジェクトをベースにしています。初めてStorybookを使う場合は、こちらの記事も一読してください。

https://microcms.io/blog/storybook-react-use/microcms.io

新規でStorybookを導入する場合は、下記のコマンドを実行することでセットアップすることができます。

$ npx sb init

今回書いたコード

github.com

セットアップ

Figmaのデザインデータを埋め込みすることができる、Storybookのアドオンがあります。こちらをインストールしてください。

$ yarn add storybook-addon-designs

github.com

アドオンは、.storbyookの中にあるmain.jsに登録することで使えるようになります。

.storybook/main .js

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

Figmaからリンクを取得

Storybookの埋め込みするために、Figmaのリンクが必要になります。Figmaで埋め込みたいデザインデータを開いて、右上のShareボタンから-> Copy linkをクリックしてリンクを取得してください。

StoryにFigmaのデザインデータを表示

こちらはButtonコンポーネントのStory例です。ポイントは、decoratorsでアドオンの読み込みとparametersでFigmaのリンクを指定するところです。your-figma-linkには、先ほど取得したリンクを入れてください。

import React from "react";
import { withDesign } from "storybook-addon-designs";
import { Button } from "./Button";

export default {
  title: "Button",
  component: Button,
  decorators: [withDesign],
  argTypes: {
    backgroundColor: { control: "color" },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};
Primary.parameters = {
  design: {
    type: "figma",
    url:
      "your-figma-link",
  },
};

それでは試しにStorybookの開発サーバーを立ち上げてみましょう。下記のコマンドを実行します。デフォルトではlocalhost:6006になっているので、アクセスしてください。

$ yarn storybook

その他

今回使ったアドオンのリポジトリに紹介されてましたが、Adobe XD用のアドオンもあるみたいです。
github.com

最後に

今回はStorybook上でFigmaのデザインを確認できるアドオンを紹介しました。もし、プロダクトでStorybookを使用する機会があれば、ぜひ導入したいです。