Figmaのプラグイン「Storybook Connect」の代替案
Figma向けのStorybook Connectは、StorybookのストーリーをFigmaのデザインにリンクさせ、UIレビューとハンドオフを効率化することを目的としています。しかし、Storybook Connectには制約があるので、そちらも踏まえながらお話ししていきます。
主なポイント：
- FigmaのStorybook Connectでは、Storybookのストーリーに対応するFigma上のデザインとは連携可能だが、コンポーネントを直接Figmaにインポートして操作できない。
- Figmaプラグインは手動でのURL連結に依存しているため、リンク切れの危険性があり、セットアップに手間がかかる。
- 代替案のUXPin Mergeは、プロトタイプのためにStorybookライブラリ全体をインポートでき、より包括的なソリューションを提供できる。これによってデザインと開発間に「信頼できる唯一の情報源（Single source of truth）」を持つことができる。
UXPin Mergeで、Storybookのコンポーネントをデザインプロセスに取り入れてみませんか。詳細とアクセスリクエスト方法については、こちらのUXPin Mergeの専用ページをぜひご覧ください。
StorybookはFigmaで使えるか？
Storybook Connectは、Chromaticが開発したStorybook Figmaの公式プラグインです。Storybookのクラウドサービスで、UIフィードバック、ビジュアルリグレッションテスト、ドキュメント作成のワークフローを自動化します。
Figmaの Storybook Connect プラグインとは
Storybook Connectは、Storybookストーリーを対応するFigmaデザインに連携します。このプラグインにより、チームは、実際のデザイン仕様と実装を比較することができ、デザインのハンドオフとUIレビューのプロセスがスピードアップします。
以下は、Storybook Connect の主な特徴です：
- Storybook のストーリーを Figma のデザインコンポーネントやバリアントを連携し、デザインと実装を同期する。
- デザイナーは、FigmaのStorybookコンポーネントを使用して、コンポーネントの機能をすぐに確認することができます。
- 再利用可能なコンポーネントを特定し、プロジェクト間の一貫性を維持する。
- 実装されたUIとデザイン仕様の忠実さを比較する。
- 非公開のプロジェクトをつくり、アクセスを制限する。
代替のベータ版プラグイン：story.to.design
この記事を書いている時点では、story.to.designはStorybookストーリーのFigma UIキットを作成することを目的としたベータ版プラグインです。また、GitHubのプライベートレポジトリには対応していないので注意しましょう。
story.to.designは期待できそうですが、開発者がFigmaにストーリーをインポートして更新するには、特定の構文とレイアウトを使用しなければなりません。
また、story.to.design プラグインのセットアップには技術的な知識が必要であり、ライブラリが story.to.designのコード要件に沿うように、別のレポジトリをセットアップしないといけない可能性があります。
Storybook との Figma の使い方
Storybook Connect をインストールしたら、ストーリーを Figmaのコンポーネントに連携するためのステップが以下のようにあります：
- Figmaコンポーネントまたはバリアントを選択する
- Storybook Connect のプラグインを実行する
- ウィンドウが開き、特定のストーリーへのリンクを貼り付けることができる
- 右側のコンポーネントのプロパティの下に、Storybook のロゴが表示される
- View Story（ストーリーを見る） をクリックすると、Figma内に新しいウィンドウが開き、Storybookコンポーネントの実装が表示される
以上がステップです。デザイナーは、Storybook のコンポーネントを使用して、動作を理解し、インタラクションをFigmaにコピーすることができます。
FigmaとStorybook Connect統合における制約
ここでは、Storybook Connect を使用する上での制限や課題を以下で見てみましょう。
StorybookのコンポーネントをFigmaにインポートできない
最も大きな制限の一つとして、Storybook ConnectプラグインではStorybookのコンポーネントを直接Figmaにインポートできないことです。
その代わりとして、Storybookのストーリーを、該当するFigmaでのデザインと連携することができます。Figma内でライブ実装をすることはできますが、StorybookコンポーネントをネイティブのFigmaの要素として操作したり、プロトタイピングに使用したりすることはできません。
URLのリンク付けに依存する
Storybook Connect は、StorybookとFigma間のURLのリンク付けに大きく依存します。プラグインの実行後は、正しいストーリーを見つけてFigmaにリンクをコピー/ペーストしないといけません。
また、URLの構造が変わったり、接続が途切れたりすると、リンク切れになることがあるため、その場合は手動で修復する必要があります。
UIレビューのために特定のアドオンに限定される
Storybook Connectは、MeasureのアドオンやOutlineのアドオンなど、UIレビュー用の Storybookのアドオンがいくつかありますが、デベロッパーが Storybook で使っているアドオンに全て対応しているわけではないので注意しましょう。
Storybook Connect ではデザインと開発のギャップを埋めることはできない
デザイナーは引き続き画像ベースツールやコンポーネントで作業し、デベロッパーはコードで作業する必要があるので、デザインと開発のギャップを埋めることはできません。
プラグインでは、コンポーネントライブラリを参照するためにFigmaとStorybookの切り替えを無くすことによって、デザインとデザインのハンドオフをわずかに効率化します。
UXPinでFigmaのStorybook の制約を解決する方法
UXPin Mergeがあれば、Storybookのライブラリ全体をUXPinにインポートし、コンポーネントを使ってプロトタイプを作成およびテストできます。
Storybook Connectと違い、デザイナーとエンジニアが別々のライブラリを使うことはありません。代わりに、エンジニアが最終製品の開発に使用するのと同じUI要素をデザイナーがプロトタイプに使用することで、デザインと開発間に「信頼できる唯一の情報源（Single source of truth）」を持つことができます。
UXPin Mergeとは？仕組み
MergeはレポジトリからUXPinのデザインエディターにコードコンポーネントを同期します。デザイナーはインポートしたコンポーネントを使って、最終製品同様のインタラクティブなプロトタイプを作成できます。
Mergeを使ってコードコンポーネントをインポートするには以下３つの方法があります：
- Git統合（Reactのみ）： 任意の GitHub レポジトリに直接接続し、それによってパターン、バージョン管理、および JSXオーサリング などの Merge機能に完全にアクセスできる。
- Storybook統合： React、Vue、Ember、Angular など、あらゆる Storybook ライブラリを接続できる。
- npm統合： Mergeコンポーネントマネージャー を使って、npmレジストリ上のオープンソースライブラリからコンポーネントをインポートする。
FigmaのStorybookでの制限をUXPin Mergeが解決する方法
StorybookのコンポーネントをFigmaにインポートできる
Storybook ConnectはコードコンポーネントをFigmaにインポートしないため、デザイナーはコードコンポーネントをプロトタイプに使えません。一方、UXPin MergeのStorybook統合では、StorybookコンポーネントをUXPinにインポートしてプロトタイプに使うことができます。
URLのリンクに依存しない
MergeはコンポーネントをインポートするのにURLやその他の手動での方法ではなく、UI要素、テンプレート、パターンを StorybookのレポジトリからUXPinにインポートします。
初期設定と接続が完了すれば、Mergeはレポジトリの更新をUXPinに自動で同期し、変更箇所をデザインチームに通知します。
UIレビューのために特定のアドオンに限定されない
Mergeではアドオンやプラグインを使用する必要がありません。リポジトリに直接連携するため、プラグインやアドオンは同期に影響しません。この連携は開発ワークフローやベストプラクティスに支障がないため、製品開発チームは簡単に導入することができます。
デザインと開発のギャップを埋める
Mergeは単一のコンポーネントレポジトリを通してチームを同期させることによって、デザイナーとデベロッパーは同じレポジトリから同じコンポーネントを使うことができるので、デザインと開発のギャップを埋めることができます。
「UXPinでは、UIコンポーネントの外観と動作は、デベロッパーが使うものとまったく同じなのでデザインと開発のギャップが効果的に埋まります。まさに「信頼できる唯一の情報源（Single source of truth）」です。」 – dotSource – ドイツを拠点とするデジタル製品コンサルティングおよび開発会社
UXPin MergeのStorybook統合を使用するその他の理由
- ユーザーテストの強化： デザイナーは、最終製品を正確に表現するプロトタイプを作成できるため、エンジニアのサポートなしでも複雑なインタラクションや API統合までテストできる。
- 有意義なフィードバック： ステークホルダーは Mergeのプロトタイプを最終製品と同じように操作することができる。これにより、デベロッパーは、反復と改善のための有意義で実用的なインサイトを得ることができる。
- ハンドオフの効率化： UXPin では Merge コンポーネントを変更する方法が、プロパティパネルで使える Storybook Args 以外にないため、Mergeのハンドオフは一般的なデザインからコードのワークフローよりもスムーズになる。
- ゼロ・ドリフト：Storybook Connect では、デベロッパーが自由に解釈または無視できるコンポーネントをデザインするためのリファレンスをデザイナーに提供する。Mergeコンポーネントでは、デザインチームにデベロッパーと同じ制限と制約をもたらすことでデザインのズレや矛盾をなくす。
UXPinとStorybookの使い方
MergeのStorybook 統合では、オープンソースまたはプライベートのStorybookに統合することができ、トークンベース認証でコンポーネントを安全に保ち、チーム内のライブラリ アクセスを管理することができます。
セットアップ
Merge の Storybook統合はレポジトリに直接連携するため、適切にセットアップするにはエンジニアの技術的なサポートが必要です。
開始のお手伝いをする UXPin のテクニカル サポート チームの連絡先など、詳細については UXPinのドキュメントをご覧ください。
UXPin で Storybook コンポーネントを見つける方法
セットアップが完了すると、新しい Storybook ライブラリが UXPinのデザインシステムライブラリのタブの左側のバーに表示されます。
Storybookライブラリは、下の Material UI の例のように、ライブラリ名の左に Storybook のロゴが表示されます。
UXPin の Storybook コンポーネントの使い方
UXPin のデザインシステムライブラリから Storybook コンポーネントをクリックするか、キャンバスにドラッグします。
StorybookのArgsで定義されたコンポーネントのプロパティがプロパティパネルに表示され、調整することで、好きなバリアント、ステート、インタラクティブなどの設定ができます。
また、UI要素を追加して、UI、プロトタイプを構築します。プロパティパネルの上部にあるインタラクション機能（Interactions）を追加し、ページ遷移やその他のインタラクティブ機能を加えることができます。
デザインハンドオフ
プレビューと共有機能を使って、デザインやプロトタイプをデベロッパーと共有しましょう。
デベロッパーはスペックモードを使ってUIの分析や、各コンポーネントの検証ができます。
UXPinは自動でコンポーネントのストーリーとリンクするので、デベロッパーがどのパターンやUI要素を見ているのかわからなくなるようなことはありません。
以上です！これで、UXPinでStorybookライブラリをセットアップし、コードコンポーネントを使ってプロトタイプを構築する方法がわかりましたね。
「Code-to-Design（コードからデザイン）」のワークフローで製品開発を効率化する
Storybook Connectは、Figmaにコンポーネントを埋め込み、デザイナーが参照できるようにします。このプラグインは、FigmaとStorybookの切り替えという、デザインチームにとっての１つの課題を解決します。
コンポーネントを１つずつ手動で連携する作業は、時間がかる上に、ミスも起こりやすくなります。さらに、もしFigmaで間違ったストーリーを接続してしまった場合、チームで混乱が起き、デザイナーとエンジニアの間に摩擦につながります。
ここで、UXPin Mergeの「Code-to-Design（コードからデザインへ）」のワークフローにより、手作業によるプロセスや更新が不要になります。
レポジトリのリリースに合わせてUIキットを手動で更新・管理することに時間とリソースを費やす必要はないので、DesignOpsに集中することができます。
UXPin Mergeは無駄な作業を自動化し、デザイナーとエンジニアの橋渡しとしての役割を果たします。
これによって、デザインから開発への移行がシームレスになり、デベロッパーは最終製品を構築するのに必要なドキュメントが少なくて済むようになります。
「UXPin Mergeのワークフローのおかげで、無駄なプロセスをなくし、デザインシステム更新によるUX負債をなくすことができました。UX一貫性においての問題はなくなり、デザインドリフトもありません。」- dotSource – ドイツを拠点とするデジタル製品コンサルティングおよび開発会社
１つで強力なツール「UXPin Merge」の自動化でデザインと開発を同期させませんか。詳細と開始方法についてはこちらの専用ページをぜひご覧ください。
