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

はじめに

こんにちは kimizuy です。

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

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

Figma

https://www.figma.com/

UI デザインツール。

Storybook

https://storybook.js.org

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

Chromatic

https://www.chromatic.com/

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

Chromatic については過去の記事もあるので、あまり詳しくない方は参考になるかもしれません。
デザイナーも確認できる!Chromatic で Storybook を公開する
デザイナーもレビューできる!チーム全体で UI コンポーネントを確認するための Chromatic

前提

  • Figma と Chromatic のアカウントがあること
  • Figma にプロジェクトが既にあること
  • Chromatic に Storybook プロジェクトが既にあること

Figma に Storybook Connect をインストールする

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

Storybook Connect の初期設定

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

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

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

Figma のコンポーネントと Storybook のコンポーネントを連携する

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


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

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

リンク例: https://main–62555aadaf9d91003a0d1469.chromatic.com/?path=%2Fstory%2Fcomponent–button

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

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


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

参考

Figma plugin

Storybook Connect Guide

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

Essential UI – Figma Ui Kit

おわりに

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

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

この機会に、オンラインで気軽に面談してみませんか?

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

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

お問い合わせしてみる!

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。