こんにちは！今年こそは打ち上げ花火を見たいフロントエンドエンジニアの鈴木（@zookeeper08）です 💁♂️
Goodpatchではデザイナーとエンジニアが密に連携しデザイン・開発を行うことが多くあります。密に連携するからこそコミュニケーションの部分で互いに疲弊しない仕組みや工夫が求められます。この記事では最近感じている課題感とそれらを解決するような仕組みを考えてみた！というような内容です。実際にプロジェクトで実施したわけではなく、あくまで構想段階ですがせっかくなのでブログにしてみました！
エンジニアがよしなに作ったその後
デザインファイルを完璧にすることは不可能であるため、実装に必要なデザインがデザインファイルには存在しない、といったことに遭遇するのは当然です。そうなった時、デザイナーに追加でデザインを作ってもらうというのが安全かもしれませんが、状況によっては「エンジニアがよしなに作っておいて後から判断してもらう」といったこともあるのではないでしょうか。
ここで気になるのはエンジニアが”気を利かせて”よしなに作ったものの行く末です。何かしらの理由（シンプルに忙しい、連絡していない、タスクとして管理していないなど）でデザイナーからのレビューを挟んでいない場合、知らぬ間にデザインシステムから逸脱した負債になっている可能性があります。
特に開発が軌道に乗っていない初期フェーズではプレビュー環境がないといったケースもあり、非エンジニアからのレビューコストが高くなる関係でこのようなことが起きてそうだなと思っています。
そこで、デザイナーが気軽にコンポーネント単位で実装物にアクセスしやすい環境を用意したいなと考え、一つのアイデアとして Figma 上で Storybook を操作できる環境を目指してみました。
成果物
Figma 上で Storybook を閲覧できるだけでなく Controls 等を変更できる状態を目指しました。 Gist という Figma プラグインを利用して Storybook を埋め込んでいるだけです。Gist を採用した経緯については後述します 🤲
デザイナーからの感想
デザイナーにもデモを触ってもらい感想を聞いてみました！ポジティブな感想を頂きつつも、やはり使ってみないとわからないという面は強いですね。
- 実装との差分が手軽に Figma 上で見れるのありがたいと思った！サクサク確認できそう！
- UI と実装物のスタイル、命名の差分が分かるのいい（デザインファイルと実装の同期）
- コンポーネント用法のドキュメントが Figma で閲覧できるのいい
- アニメーションがイメージ通りか確認できるのいい
- コンポーネントの区切りと Variants の区切り方の差分がわかるのいい
- あとはちょっと使ってみないとわからなさそうかも
上記以外の恩恵として以下のようなものも考えられると思います。
- やり方次第でデザイナー側でアニメーションの調整が完結できる（Controlsで調整できる）
- UI stack の再現のしやすさ（エッジケースの再現）
Storybook 直接みたらええやんについて
当たり前ですが Storybook を直接閲覧すれば全く同じことができます。なぜ Figma から Storybook を操作できる環境を目指したのか、その理由を書いていきます。
非エンジニアからしたら Storybook というツールが増えるのめんどくない？
開発が軌道に乗っていない慌ただしい時期に Storybook 見といてと言わるのはちょっとコストが高い気がしています。 非エンジニアからすると Storybook を見ること自体に最初は負荷がかかると思うので、普段使っているツールからサクッと見れることは非常に大きな違いがあると思っています。Figma を見ながら議論してる説
Storybook で各コンポーネントの実装物を見ながら議論するよりも、全体デザインを見つつ一部コンポーネントの実装物を確認したいという流れの方が自然な気がしています。特にデザイナーと密にコミュニケーションをとる場合は尚更だと思います。デザイナーとエンジニアの両者で責任を持つ環境
実装側とデザインファイルが同期されている（乖離がない）状態を実現するには、エンジニアとデザイナーのどちらかが頑張るだけでは限界があります。デザイナーは実装物にアクセスしやすく、エンジニアはスタイリング以外の要素（Figmaファイル上の命名や Variants など）を意識しやすい環境は、成果物に対して互いに責任感を持てる状態になるのでは無いでしょうか。
どうやってやったか
Storybook Connect という選択肢
今年の3月頃に Storybook から Storybook Connect というFigmaプラグインがベータ版でリリースされています。これを利用すれば Figma から Storybook が見れるのですが、 Controls を操作することはできず本当にただ見れるだけなんですよね。それと Chromatic でホスティングする必要があるのも少しネックなポイントです（これのために Chromatic に移行するのは釣り合っていない感）。まだベータ版なのでこれからが楽しみという感じです。
Gist というプラグインを知る
Storybook Connect に期待を込めてからしばらくして、@sekikazu01 さんが Gist というFigmaプラグインを紹介しているツイートが流れてきました。Gist は Figma 上でドキュメントを見れるようにしたら便利じゃん！（意訳）というプラグインで、任意のURLを渡すと iframe で表示してくれます。
今回はドキュメントの URL ではなくホスティングした Storybook の URL を渡すことで、Figma 上に Storybook を表示させているというわけです。iframe で埋め込んでいるだけなので当然 Storybook の機能を余すことなく享受することができます。
コンポーネントにドキュメントの URL を紐付けて Figma 内でも読めるようにできる(iframe で表示)プラグイン良さげ。Figma 外でドキュメント作ってる時 Figma でも二重管理したくないよねhttps://t.co/r44DMxCGDd
— seya (@sekikazu01) June 11, 2022
以下のデモでは Chromatic でホスティングした Storybook を利用していますが、ただ埋め込んでいるだけなので別に Chromatic である必要はないです（Storybook Connect の検証で作ったものがあったので楽したかっただけです😘 ）
ちなみに Chromatic を利用する場合はビルドされるたびにURLが変わってしまうので https://<branch>--<appId>.chromatic.com という形式で URL を与えると常に最新の状態の Storybook が表示されるようになります。
最後に
「エンジニアとデザイナーが密にコミュニケーションを取りながらデザイン・開発をしていく」というのは聞こえはいいですが、異なる専門性を持つ者同士が会話し、モノを作っていくことは非常に難しいことだと日々感じています。今回はあくまで構想編ということで実際にプロジェクトで実施したわけではありませんが、エンジニアとデザイナーが互いに疲弊せずに気持ちよく連携していける仕組みを今後も模索していきたいです 💁♂️
グッドパッチではデザイン好きな仲間を募集しています。 少しでもご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！
