チームで管理して効率化＆品質担保！Figmaのマスター運用を見直した話
こんにちは、hacomonoプロダクトデザイナーのメイさんです。
最近、芋焼酎にハマっていまして三岳のソーダ割りをよく飲んでいるのですが、寒くなってきたのでお湯割りもいいな〜と思ったり。
寒くなってきたといえば、個人の肌感ですがおでんの出汁割りができる（しかも日本酒か焼酎か選べる）お店ってそんな多くない気がしていて、見つけると「おっ⤴︎」ってなっちゃいます。
マスターのセンスによって肴やお酒のチョイスが変わるので、居酒屋やバー巡りって本当に楽しいですよね。
さて、マスター違いですが、最近hacomonoデザインチームではマスターデータの運用見直しを行いました！
（マスターデータ＝この記事ではプロジェクトの最新データが集まる、元になるデータのことを指します）
今回はその見直しポイントと、その結果得られた成果について紹介していこうと思います！
ちなみに、今回の見直しはだいたい3〜4ヶ月かけて課題の洗い出しから解決するためのアウトプットを整備し、それをもとに運用を3ヶ月ほど走らせているところです。
日々のプロダクト業務と並行して進めたので、無理のないスケジュール感で進めることも大事なポイントですね。
複数人でプロジェクトを横断してデータ管理をしている方の参考になれば幸いです。
（Figmaを利用しているので、その体でまとめていきます〜！）
なぜマスタデータの管理・運用の見直しをしたのか？
一言で表すと、『作業コストがかかっていたから』です。
Figmaはデザインツールとして非常に使いやすいですが、管理が混乱すると作業の重複やミスが増え、チーム全体の生産性が下がる原因になります。
私たちのチームでも「これって何が正しいんだっけ？」と手が止まることがありました。
そこで、チームから挙げられた課題の中から特に作業コストに影響していた2点について、抱えていた課題感と解決方法をまとめていきます。
課題1：人によってデータの組み方が違う
効率的なレイアウト管理ができるようにAutoLayoutで組みたいところですが、当時はルールの整備・周知ができておらずGroupで作られたデータや、人によってレイヤー位置を絶対位置で指定したりなど混在していました。
（セロリ風に言うと、「働いてきた環境が違うから」）
そのため、マスターデータの手入れや新しいissueに着手する際はAutoLayoutでの組み直しやレイヤー構造の確認、コンポーネント化されたデータの入れ直し等の手戻りが発生…。
作業始めるぞ〜〜！となっていた気持ちが、ちょっと「うっ…」となりますよね。
逆に、AutoLayoutで組まれているととても嬉しい。
例：同チームかんちゃんの心の声
解決方法：画面ごとに正しく定義されたlayoutを作成
今回マスター運用の改善に一緒に取り組んでくれた、同チームかつデザインシステム構築をリードしてくれているもえさんに担当してもらい、主要画面をあるべき構造で整理しlayoutを作成しました。
作成内容としては下記を盛り込んでいます。
Figmaが理想の組み方になっている
全AutoLayout
バリアブルがセットされている
各コンポーネントが正しくセットされている
実装画面に合わせたレイヤー名になっている
最低限paddingなどがわかる
PC版・SP版がある
得られた成果
layoutができたことで、新プロジェクトは複製して作業スタート、既存データがある場合はあるべき構造に手直しできる指標ができ、チーム全体で一貫したデザインを保ちながらプロジェクト業務を進められるようになりました！
また、以前は新しいメンバーを迎えると「このデータの作りはあっているか？」「こうして欲しい」などのやり取りが発生していましたが、layoutを参照すればだいたいのことが解決するので確認コストも減りました。
（layoutを導入したタイミングで新メンバーが3名増えましたが、データの扱いにスッと慣れてくれていた！嬉しい！最高！GOGOGOGO！）
課題2：マスターデータが古いのか新しいのかわからない
この課題の背景として補足をすると、私たちのチームはプロジェクトごとにデザイナーが1〜2名（メイン・サブ）アサインされます。
そのため、デザインFIXやリリースタイミングもプロジェクトやissue単位で異なり、マスターへのデータ反映作業は個々に委ねられていました。
そうなると当時どんなことが起きていたかというと、
FIXしたデザインデータをマスターへ複製する作業を忘れてしまう、後回しにしがち
マスターが古いままで別のメンバーが同画面や共通パーツを扱う際に最新データを探す旅に出なければいけない🚃
FIXしたと思ってマスターへ反映したが実はリリースはまだされていない箇所があった
リリースされていないUIを別のメンバーが参照して別プロジェクトで進めてしまいエンジニアとのコミュニケーションに手間取る
マスターを更新しても誰も周知しないため（サイレント更新…）誰がどの画面をいじっているのかわからない
解決方法：管理ルールを策定し、月末に「もくもく会」を実施
まずは、新旧データの混乱の原因になっているマスターデータへの反映フローを定めました。
各フローで行う作業は簡単にまとめるとこんな感じです。
フローをもとに、私たちは各プロジェクトで作成したデザインを下記手順でマスターデータへ反映していきます。
1.デザインFIX
コンポーネント化されていない要素がないかチェック（デタッチしたままになっていないか）
2.リリース後
コンポーネント更新作業を行い、必要に応じてSlackで共有する（新しくアイコンを追加したなど）
Figmaのカバーステータスを「リリース済」に更新する
3.notionのタスクステータスを「マスター反映前」に変更
これをすることで、月一のもくもく会（マスターへ各自のデータを移行する会）で自分がどのデータを反映すべきか管理できます
4. 月1回のもくもく会でデザインデータをマスターに反映
Meetで集まり、notionのタスクリストをもとにマスターにデータを黙々と移動する
時間内で終わらない場合は個人で作業時間を確保し完了させる
作業した内容はスレッドに簡単に共有し、お互いの作業内容を把握する
5.マスタ反映したタスクのステータスをreleaseに変更して作業完了！
得られた成果
ルールを策定したことで、各自の作業データが漏れなくマスターへ反映されるようになり、各担当タスクの進捗もより見える化されました。
また、今回定めたフローをnotionでドキュメント化しました。
これによって、今いるメンバーにはルールが怪しくなった際に参照元ができたこと、新メンバーが入社した際は実務に入る前のオンボーディング資料に使うなど新しいメンバーに理解しやすい体制作りができました。
運用開始後、チームヒアリングしてみた
今回の記事では2つの課題解決について紹介しましたが、その他運用改善も含め2ヶ月くらい経った頃に浸透度の確認と、そこから出てきた追加の改善点はないかKPT形式でチームヒアリングを行いました。
チームから出てきた内容としては
デザインの初動速度が上がった！（マスターデータの正確性が上がった）
もくもく会、皆でやるから集中できる！
皆で継続できていることが最高！
などの効果を感じた声から、取り組んでみて見えた次の課題も。
完了したデザインが layoutを踏襲できていないケースがまだありそう（ぱっと見だとGroupで組まれたのままのデータと見分け辛いため、古いマスターデータをコピーしたまま作業を進めてしまうことがある）
定義したデータ通りに作れているか、作業着手時のチェックも大事そう
この結果を通じて、一定の運用改善の効果を感じた一方で、運用ルールを守る文化を醸成するためには定期的な振り返りとルールの見直しが必要だと感じました！
まとめ
Figmaはとても使いやすいツールなので、チーム内での管理体制を整えることでより効率的にデザインを進められることが今回の取り組みでわかりました。
まだ運用改善は走り出して間もないですが、定期的なルールの周知と改善を繰り返すことで、効率的かつ品質担保されたプロダクト提供を行なっていきたいと思います。
最後に
一緒に働きませんか？
現在プロダクトデザインチームでは、デザイナーを募集しています。 hacomonoに少しでも興味を持っていただけましたら、お気軽にお声がけください。
Pickup note
デザインチーム紹介と取り組みについては、下記noteでも発信しているので、気になった方はぜひ読んでみてください。
最後のさいごに…
最近ふと気がついたら、飲み屋でチョイスするグラスや酒のつまみとネイルがシンクロしていたので、奇跡の3コマを最後まで読んでくださった方にお届けして締めようと思います。
乾杯！（深爪！）
