Storybook Connect を使って Figma で Storybook のコンポーネントを確認する

2022.5.26

はじめに

こんにちは kimizuy です。

今回は Storybook Connect プラグインを使って Figma と Chromatic 上の Storybook をを連携する方法を紹介します。

Figma と Storybook を連携することで Figma 上に Storybook のウィンドウを表示させることができ、よりシームレスに UI コンポーネントの確認が進められます。

UI デザインツール。

UI カタログ化ツール。コンポーネント実装を一覧するのに便利。

Storybook をホスティングするサービス。UI のレビューやテストもできる。

Storybook Connect を Figma にインストールします。

右クリックを押して Storybook Connect プラグインを実行します。

Chromatic との認証が求められるので指示どおりに進めましょう。

以上で Storybook Connect プラグインの初期設定が完了しました。

互いのコンポーネントを連携します。

Storybook と紐づけられるのは Figma のコンポーネントです。レイヤーとの紐づけはできません。
コンポーネントかどうかは左サイドバーのアイコンから判別できます。四葉のクローバーみたいな形をしていますね。

Chromatic のパーマリンクを取得して入力します（パーマリンクの取得方法）。以下のリンク例はメインブランチの Storybook を表示します。

「Link Story」ボタンを押下すると紐づけられます。

連携が上手くいくと以下のように Storybook が表示されます。

Chromatic 上の Storybook を更新すれば変更が即時反映されるので、実装とデザインの比較をすぐに行うことができます。デザイナーさんにレビューをもらう際に捗りそうですね。

本記事では、こちらの Figma テンプレートを例にさせてもらいました。

Figma と Storybook のコンポーネントを一対一で有機的に紐づけられれば、デザイナーさんのフィードバックがもらいやすくなって、より速くプロジェクトを改善していけそうですね。

以上、お読みいただきありがとうございました。

現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでの面談でお話しましょう。ぜひお気軽にお問い合わせください！

Gaji-Laboの社内デジタル環境でいろいろなお手伝いをしているがじ専務＆じら常務。みんなのシリーズ記事をまとめたり、卒業したスタッフの過去記事を記録したり、Twitterをやったりしています。