Figmaデータと実装の差分をモブデザインで解消する話

スマートキャンプ株式会社　デザイン戦略部デザイナーのむらです。

2019年にスマートキャンプより提供を開始した「BALES CLOUD（ベイルズ クラウド）」というサービスがあります。 今回は、このBALES CLOUDのFigmaデータ（デザインデータ）と実装の差分をモブデザインで解消する話をさせていただきます。

BALES CLOUDとは？
BALES CLOUD（ベイルズクラウド）はセールス業務の管理、効率化を実現するセールスエンゲージメントツール。直感的な操作で、リードに対する行動データの蓄積、可視化、分析を行えます。
詳しくはサービスサイトへ

BALES CLOUDのデザインデータを、デザイナーたちがFigmaで作り続けてきました。
しかし、ツールリリースから4年経過し、その間デザイナー以外のエンジニアなどが行ったデザイン変更があり、ところどころ実装したものとFigmaの画面とで差分が出てきてしまいました。

差分が出てきてしまっているため、デザインや機能検討をするにも、いちいち実際の画面と照らし合わせて合っているかどうか確認しないといけなかったりと、非効率な状況に…。
その差分を埋め、かつ差分を埋めた状態のものをコンポーネント化をしたい、とPdMの柿森より相談があり、BALESデザイン部だけでなく、デザイン戦略部全体で取り組むことになりました！

📝どうやって進めたか？

最初は既にあるFigmaデータと差分を確認しながら進めようとしたのですが、微妙にボタンの大きさが違う箇所や、色の設定が違う箇所など出てきてしまい、それをいちいち確認するのに大変時間を取りそうなので、実際の画面をFigmaデータに変換していくことにしました！

具体的なやり方

1. 実際の画面をFigmaのプラグイン「html.to.design」を使ってFigmaデータを抽出。
   会員登録をしないと入れない画面で、URLからFigmaデータを取得できないため、Chromeにプラグインをインストールし、Figmaデータを抽出するためのファイルを生成し、そのファイルをFigmaに配置してFigmaデータを抽出。

2. Figma上で配置したデータを実際の画面を見ながら整える
   html.to.designは、かなりデザインの再現性も高いのですが、ところどころ崩れてしまうため、手動で整えていきます。

3. 共通化できそうなものをコンポーネント化
   その後、ページが出来た後、ボタンなどコンポーネント化できそうなものをまとめます。

ほぼすべての作業は、参加デザイナーで時間を合わせて、一緒に一つのFigmaページ内で作業を行い、モブデザイン的なやり方で行いました。
個々にこのページやってね、と渡してやってもらうという方法も出来たのですが、今回は同じツールの画面となるので、共通の項目が多そうだな…ということからこのやり方を取り入れました。

実際モブデザインといっても、デザインするというよりは、ほぼ整える作業ですが、共通パーツがあったり、きっとみんな悩むところが一緒かなと予想をしたので、みんなで作業をしました！
オンライン経由のモブデザインは、割と動画をつなぎながらやることが多いのですが、今回は作業に終始することから、最初の集合だけGoogle Meetで行い、その後作業するFigmaページに集合し、Figmaの通話機能を使い、行いました。

📝やっていく中で、特に迷ったこと困ったこと

現状ページのボタンやリンクの挙動のパターンのバリエーションが多い😭

色が変わるボタンと、アニメーションが付くボタンと付かないボタン、そしてアイコンのバリエーションが多くなってしまっており、現状ボタンのコンポーネントとしてまとめにくい…となりました。他にもアイコンやカラーのバリエーションが機能ごとに違うことが発覚。

そこで、プロダクト全体でコンポーネントをまとめると、膨大な量になり、どの場面にどれを使うのが適正か判断ができないため、プロダクト全体ではなく、機能ページごとにまとめることにしました！

これもモブデザインで行ったので、色をまとめる人、ボタンをまとめる人、アイコンをまとめる人と分担することで、効率よくできたかなと思っています。

おわりに

無事に差分が解消することができ、新しい機能の開発などをスムーズに行うことができるようになりました！
しかし、今のフローのままだと、また差分が発生していってしまうため、PdM、エンジニアと協力して新しい仕組みづくりを考えようと動いています。

他の部門や業種の方々とコラボレーション（Collaboration　※スマートキャンプの行動指針の一つです）するのは、大変な面もありますが、デザイナーだけで何かを作るよりも、はるかに幅広いプロダクトに携わることができ、より様々な対象に届けることができるのが魅力だと感じています。またそういったコラボレーションができるというのは、とても重要なスキルだと思います。
現在スマートキャンプのデザイン戦略部のメンバーはその重要性を理解しているので、今回のような取り組みが問題なくできる、かつ新しい取り組みに繋がったと感じています。
これからもたくさんのコラボレーションを通して、よいプロダクトを作っていきたいです！