はじめに

この機能を使用できるユーザー

Figmaファイルに対する編集可権限を持っていれば誰でも、デザインモードまたは開発モードでStorybookプラグインを使用できます

StorybookはさまざまなUIコンポーネントを開発、テスト、文書化するためのオープンソースツールです。Storybookを使用して以下を行うことができます。

各種プラットフォームやデバイスで使用できるコードベースのコンポーネントの作成。
デザイナーやエンジニア、プロダクトマネージャーとのコラボレーション。
インタラクティブな開発環境でのコンポーネントの表示。アプリケーションを立ち上げる必要はありません。
コンポーネント実装についてのさまざまなユースケースや例の表示。
プロトタイプ作成、テスト、文書化のためのアドオンのインストール。

デザインをStorybookに、また、ストーリーをFigmaに表示するには、StorybookをFigmaに接続します。

Storybookのデザインアドオンを使うと、FigmaのファイルをコードベースのコンポーネントとともにStorybookへ埋め込むことができます。また、FigmaのStorybookプラグインでは、Figmaにストーリーとデザインコンポーネントを埋め込むことが可能です。Figma用のStorybookは、デザイナーがデザインモードで、また、開発者が開発モードで使用できます。

Storybookの詳細については、該当するドキュメントおよびチュートリアルをご覧ください。

Storybookプラグインについて

Figma Storybookプラグインを使って、Figmaにコンポーネントストーリーを埋め込むことができます。これにより、Storybookのライブ実装をFigmaファイルで相互参照できるようになります。Storybookプラグインを動かしているのはStorybookの埋め込みと、Storybookチーム作成の公開ツールであるChromaticです。

StorybookをFigmaへ埋め込むために必要な条件は以下のとおりです。

StorybookプロジェクトがChromaticで公開されていること
Figmaでの編集可権限
Chromaticにコラボレーターとしてリストされていること

StorybookをFigmaに接続するには、Storybookプラグインを、デザインまたは開発モードでFigmaにインストールする必要があります。

FigmaにStorybookを埋め込むには

Storybookで次の操作を行います。

Chromaticでサインインします。
Chromaticで公開するStorybookのストーリーへ移動します。
このストーリーのURLをアドレスバーからコピーします。

Figmaで次の操作を行います。

デザインモードまたは開発モードでFigmaファイルを開きます。
FigmaでStorybookプラグインを実行します。
ストーリーのリンク先となるFigmaコンポーネントを選択します。Storybookプラグインでは、Figmaのコンポーネント、バリアント、インスタンスにストーリーをリンクできます。
URLをプラグインのモーダルに貼り付けます。
[ストーリーをリンク]をクリックします。
Figmaの右サイドバーに、ストーリーへのリンクが表示されます。コンポーネントがリンクされていた場合、そのコンポーネントのすべてのインスタンスにリンクがあります。

Figmaでストーリーを開く

Figmaで、すでにストーリーへリンクされているコンポーネントを選択します。
右サイドバーで[ストーリーを表示]をクリックします。
または、Storybookプラグインを実行します。

StorybookへのFigmaの埋め込み

Storybookのデザインアドオンを使って、FigmaのファイルやプロトタイプをStorybookに埋め込むことができます。このアドオンを動かしているのはFigmaライブ埋め込みです。Figmaファイルは、共有設定にかかわらずStorybookに埋め込むことが可能で、プライベートファイルをチーム内で共有したり、パブリックファイルを世界に公表したりすることができます。

コラボレーターは、チームまたは組織の権限に基づいて、埋め込みを操作できます。

アドオンをインストールします。

npm install --save-dev storybook-addon-designs
 # yarn add -D storybook-addon-designs

アドオンを.storybook/main.jsファイルに登録します。
```
// .storybook/main.js
 module.exports = { addons: ['storybook-addon-designs']
 }
```
Storybook@5.0.xを使用している場合は、代わりに次のモジュールを使用します。
```
// .storybook/addons.js
 import 'storybook-addon-designs/register'
```

詳しい手順については、GitHubのFigmaアドオンのreadmeを参照してください。

Figma URLのコピー

ストーリーに埋め込むファイルまたはフレームのURLをコピーします。

Figmaファイルを開きます。
[共有]ボタンをクリックします。
[リンクをコピー]ボタンをクリックします。Figmaウェブアプリを使用している場合は、ブラウザーのアドレスバーからURLをコピーします。

ヒント! 特定のフレームを選択して、埋め込むこともできます。共有モーダルで、[選択されているフレームへのリンク]をチェックします。

StorybookへのFigma URLの貼り付け

Figmaのファイルとフレームをストーリーに関連付けるには、パラメーターを使用します。

ストーリーファイルを開きます(多くの場合、ファイルには*.stories.jsのような名前がついています)。

designという名前のストーリーパラメーターを追加します。

export const myStory = () => <Button>Hello, World!</Button>myStory.story = {
parameters: {
       design: {
          type: 'figma',
          url: ''
       }
    }
 }

コピーしたURLをURLフィールドに貼り付けます。

StorybookでFigmaファイルを開く

Storybookを開きます。
アドオンパネルで[デザイン]タブを開きます。
埋め込まれたFigmaファイルをクリックして開きます。

···

StorybookとFigma