FigmaのStorybookプラグインで制作フローをこんな風に変えられるかもしれない

この記事の概要

StorybookのFigmaプラグインについてsneak peekの記事が出ました。

こちらを読んで、今後こういう変化が起きたら良いなあと思っている内容をまとめてみます。

あくまで予想というか、妄想というか、そういった記事です。

プラグインの簡単な説明

元記事を読むに、おおよそ以下のようなことができそうです

• Storybook上のStoryとFigmaのComponentが結びつく
• Main componentとStoryが結びつけば、それらのInstanceやVariantsにも紐付く
• Inspect機能のようなものがあり、Storybookを開かずともFigmaとの比較ができる

思い描く将来のフロー

1. Figmaでさっとモックアップを作る
   1. 0から1を作り出すとか、低精度でバリエーションを出すフェーズはFigmaの従来の操作性を活かす
2. ひとしきりのモックアップが完成した時点で、Componentをベースにコードを書く
   1. 1つ1つの画面単位での実装はせず、まずは全てのComponentをコードに落とし込むイメージ
3. StoryをFigmaに逆輸入して、実際のデータをもとにした挙動や各種stateを確かめる
   1. 静的モックアップでは限界のある部分をStorybookとの連携で拡張する
4. 問題なければそれぞれの画面を実装する
   1. 2で作ったコンポーネントをレイアウトするのみ、といったイメージ

これができたら良いなと思う理由

• 静的モックアップ→コードにせよ、コード→静的モックアップにせよ、一方通行で完成させるのは難しい
  • ものを作るにあたって、どうしてもいったりきたりは発生する
  • むしろそういう営みを挟んだ方が最終アウトプットは良いものになるまである
  • そのため、上記のような静的モックアップ→コードベースのコンポーネント一覧→stateの網羅されたモックアップ→Productionと進められると良いのではないかという予想
• 複数のサービスをまたぐと面倒
  • 一応FigmaとStorybookという2つのプロダクトを使うものの、プラグインとして利用可能であれば実質的な隔たりは少なそう
• ProductionとFigmaの乖離はなくしやすそう
  • Productionにも使っているデータであるStoryをFigmaにimportして使えるのであれば、Figmaのためだけのメンテナンスはあまり要らないのでは？

最後に

early accessのために準備はしましたが、いつ頃連絡が来るのか、抽選なのか先着なのか、何も分かっていません。

もし早めに試せることがあればまた記事にしようと思います。