誰が見ても分かりやすく！ Figmaデータを整理整頓した話

はじめまして！デザイナーのほまんです。
今年2月にマネーフォワードに入社し、福岡拠点で「クラウド経費」「クラウド債務支払」のUI/UXデザインを担当しています。

私が入社後、初めて担当させていただいたのは「クラウド経費」モバイルアプリの機能追加プロジェクトでした。
そこで「モバイルのデザインデータはこれです！」とFigmaデータを教えてもらったのですが、当初制作されたSketchデータを移行後、そのまま使っているということもあり、いろんな情報がMIXされた、初見の私にとって分かりづらいものになっていました。

今後このデータを触るデザイナーやエンジニアが増えたりすることを考えると、誰もが一目で分かるデータにしたい！
とはいえ、ファイルを作り直すって結構な時間と労力もかかる…う〜ん…

がしかし、この整理をやっておくことで、後々の自分やチームメンバーの業務効率化にも繋がるはず…！
よし！誰が見ても分かりやすいデータの作成と運用ルールを作ろう！と気合い入れました。

まずは現状の不明点を洗い出す

前職ではXDを使用していたので、実際Figmaで何ができるのか？どのようにデータをまとめるのが運用しやすいのか？などの情報を漁るところから開始しました。

Figmaはブランチが使える！コンポーネントもVarientsで細かい設定ができる！コメントも直接入れられるじゃん！！おぉ〜。（歓喜）
ナイスな機能はたくさんあれど、どう整理したらよいものか…

ということで、まずは福岡のデザインチームメンバーの意見も伺い、現状の不明点を洗い出しました。
主な点は以下３つ。

１．最新データがどれかわからない

いろんな施策のPagesが増殖しており、検討中のものなのかFIXなのか、またどのコンテンツに含まれる画面なのか、分かりにくいものとなっていました。

２．コンポーネントは別ファイルで管理した方が良いのか…

現状では同じファイル内にコンポーネントを集めたページが存在していましたが、恐らく使われていないであろう古いデータも残っていて混沌としている。
これは…別ファイルで管理した方が良さそう…？

３．ブランチを使う場合、マージするタイミングはいつがベスト？

Figmaにはブランチ機能があるじゃないか！と喜んだんですが、実際の運用でどのように使うのがベストなのか悩みました。ヨクワカラナイ…

このほかにも細々した不明点なども洗い出し、Figmaマスターのさとるさんに相談させていただきました。
さとるさんはFigmaへの愛も綴られているので、こちらの記事もぜひ。

こんな感じで整理してみた。

そしてファイルを以下のように整理することにしました。

画面デザインファイルとコンポーネントファイルは別で管理する。

コンポーネントを外部ファイル化するメリットとしては、後々差し替える時も楽になりますし、ボタンやアイコン、タイポグラフィ…などコンポーネントごとにファイルを分けて管理することもできます。

余談ですが、整理する前のファイルで、[Component]というページが存在していたんですが、うっかりブランチ内で更新してしまい、ページ単位でマージすることができず、いつまでもブランチをマージできなくなったという苦い思いもしました。。

コンポーネントを外部ファイル化することで、少なからずこのようなミスは防げますね。（私だけ…？）

画面デザインファイルのページは、「機能単位」や「サイトのディレクトリ構造」に倣う。

これは、さとるさんが実際に制作されたデータを拝見し、パクらせて参考にさせて頂いたページの分け方です。

頭にアイコンをつけて分かりやすくし、かつサイトのディレクトリ構造に倣ってページを分けておくと、エンジニアさんにも分かりやすいデータが作れる！なるほど〜〜。

README ページでは、データ制作のルールなんかをまとめているので、初見の人でも安心して触れますね。

SSOT！メインファイルは実装状態を保つ！

SSOT (Single Source Of Truth) ＝「信頼できる唯一の情報源」という理念に基づき、メインファイルは、実装されている状態の最新データのみとし、検討中の内容はブランチを切って管理することにしました。
ブランチの切り方はプロジェクト単位として、検討するページは自由に増殖してOK。その中でワイヤーやプロトタイプを作成します。
そして実装反映後、本番環境にリリースされたタイミングでマージし、常にメインファイルを実装状態に保つ、というルールにすることにしました。

こうしておおまかなルールを定めて、少しずつ空いた時間でモバイルアプリのデザインデータを粛々と整理しました。まだ完成ではありませんが、ある程度できてきてスッキリ♪
チームメンバーにも共有させていただきました。

さいごに

Figmaは、デザイナーだけでなくエンジニアにも直接連携できる素晴らしいツールです。
だからこそ、自分だけが分かれば十分ではなく、誰がみても分かりやすいデータにしておくことが大切ですね。

また、今回はこのような運用ルールを策定しましたが、運用しながらみんなが使いやすいデータにどんどんアップデートしていきたいと思っています。

デザインデータ、整理したいけど実際どうしたら…とお悩みの方に、少しでも参考になれば幸いです。

---

マネーフォワードの採用サイトが生まれ変わりました！こちらも是非ご覧ください。

採用情報 - 株式会社マネーフォワード