https://goodpatch-tech.hatenablog.com/entry/2022/06/30/150727
こんにちは！今年こそは打ち上げ花火を見たいフロントエンドエンジニアの鈴木（@zookeeper08）です 💁♂️
Goodpatchではデザイナーとエンジニアが密に連携しデザイン・開発を行うことが多くあります。密に連携するからこそコミュニケーションの部分で互いに疲弊しない仕組みや工夫が求められます。この記事では最近感じている課題感とそれらを解決するような仕組みを考えてみた！というような内容です。実際にプロジェクトで実施したわけではなく、あくまで構想段階ですがせっかくなのでブログにしてみました！
デザインファイルを完璧にすることは不可能であるため、実装に必要なデザインがデザインファイルには存在しない、といったことに遭遇するのは当然です。そうなった時、デザイナーに追加でデザインを作ってもらうというのが安全かもしれませんが、状況によっては「エンジニアがよしなに作っておいて後から判断してもらう」といったこともあるのではないでしょうか。
ここで気になるのはエンジニアが”気を利かせて”よしなに作ったものの行く末です。何かしらの理由（シンプルに忙しい、連絡していない、タスクとして管理していないなど）でデザイナーからのレビューを挟んでいない場合、知らぬ間にデザインシステムから逸脱した負債になっている可能性があります。
特に開発が軌道に乗っていない初期フェーズではプレビュー環境がないといったケースもあり、非エンジニアからのレビューコストが高くなる関係でこのようなことが起きてそうだなと思っています。
そこで、デザイナーが気軽にコンポーネント単位で実装物にアクセスしやすい環境を用意したいなと考え、一つのアイデアとして Figma 上で Storybook を操作できる環境を目指してみました。
Figma 上で Storybook を閲覧できるだけでなく Controls 等を変更できる状態を目指しました。 Gist という Figma プラグインを利用して Storybook を埋め込んでいるだけです。Gist を採用した経緯については後述します 🤲
Figma 上で Storybook を確認できるデモ
デザイナーにもデモを触ってもらい感想を聞いてみました！ポジティブな感想を頂きつつも、やはり使ってみないとわからないという面は強いですね。