デザイナーにとって、多くのプロジェクトでチーム全体が一丸となって進むことはとても大切です。しかし、場所や経験レベルが絡み合う複数のメンバーの中でデザインファイルが属人的になってしまう事は進行に大きなダメージを与えてしまいます。Figmaはそれを避けるツールの1つであり、Webデザイナーの方々にとって欠かせないものとなっています。

そこで、「デザインファイルを属人化させないFigma活用・コラボ方法 Part 1」では、未経験から始める方にも親しみやすくチーム全体でデザインを共有できるFigmaの奥深さを、ロンドンに拠点を置きながらフリーランスのプロダクトデザイナーとしてご活躍中の「キャシさん」にお話しいただきました。

この記事で得られる学び

  • デザインファイルを属人化しないためのヒントが得られる
  • チームでプロジェクトを行うためのスキルを身につけることができる
  • Figma活用の幅を広げるための知識が身に付く

1. デザインファイルを属人化させないFigma活用・コラボ方法 Part 1


デザイナーの方々にとって現在人気を集めている「Figma」。個人の活動だけではなくチームで進めることが多いデザイナーにとって、多様なメンバーが一丸となって作業するプロジェクトでデザインファイルの属人化を防ぐことはとても大切です。今回の「デザインファイルを属人化させないFigma活用・コラボ方法 Part 1」では、そんなプロジェクト進行に関して悩みを抱えている方や、これからチームでプロジェクトを進めようとしている方にとっておすすめのデザインファイルの共有方法を、ロンドンに拠点を置きながらフリーランスのプロダクトデザイナーとしてご活躍中の「キャシさん」に実例を含めて教えていただきました。

2.登壇者紹介


キャシ 氏
プロダクトデザイナー／Figma Community Advocate

ロンドン拠点フルリモートで8つの時間帯をまたいで働くフリーランスプロダクトデザイナー。現在は株式会社カケハシのチームKUSABIにてお薬連絡帳Pocket Musubiの管理システム・アプリUX/UIデザイン、Figma勉強会などに従事。PM、エンジニアと一緒にデザインを作り上げていくスタイルが好き。最近はイタリアでのワーケーションにハマっている。
Figma Community Advocateとして、Figmaの魅力を発信する勉強会やセミナーで多数登壇。

キャシ氏

3. デザインファイルの属人化について

なぜ属人化するのか。

今回、チームで作業する際に注意したいことの一つとして属人化しない方法をお伝えさせていただきますが、その前になぜ属人化が発生するのかについて考えてみたいと思います。原因は色々考えられますが、主に「何となく作業している」「一部だけで暗黙の了解」「疑問・質問を放置」の3つだと認識しておいてください。まず、デザインファイルを毎日触る中で、自分ルールが形成されてしまうケースがとても多いです。それを周りに共有しないまま、自分ならではのルールやフローで何となく作業してしまう。さらにそれを周りの一部だけで運用し始めると、さらに属人化は進んでしまいます。メンバー内だけの暗黙の了解で作業してしまい、そのうち他のメンバーが疑問や質問を投げかけられなくなり、属人化が進んでしまうという場合がとても多いのではないでしょうか。

4. 属人化を解決するために大事な3つのこと

属人化を解決するヒント1

それでは属人化を解決するためには、どのようなことを行えばいいでしょうか？そのためのヒントを、「ファイル構成」「ページ構成」「Figmaを中心としたコミュニケーション方法」の観点から3つお伝えさせていただきます。
まず1つ目は、ファイル構成について「最新マスターデザインの場所を明白にする」ということです。例えばWebアプリのプロジェクトでは、ある画面のデザインを変更した際に連動してその管理画面側のデザインも変わるケースがとても多いです。そのため、バラバラのマスターデザインに分けていると必ずどこかが古いデザインのまま、更新が漏れてしまうことが起こりがちです。私が関わっているプロジェクトでは、通常のマスターデザインとリデザインに関する2つのフォルダに統一し、効果的な管理を実現しています。

プロジェクト内の構成

次にページ構成についてですが、下から上に向かって「カバー→実装済み→ボツ案倉庫→ブレスト・資料・リサーチ・要件定義所・初期wifiなど→マスターデザイン」という構成を取ることで、実装フェーズに近いものほど上位に配置し、プロジェクト全体の見通しと整理を向上させています。
ページ構成

属人化を解決するヒント2

2つ目のヒントは「どの画面が実装可能かわかるようにする」ということです。これに関しては、FigJamでお馴染みのセクションがFigmaでも使用できるようになったため、ぜひこちらを試してみてください。

具体的には、ステータスごとに色分けした7つのセクションを設定し、それぞれの段階に合わせて視覚的に把握できるようにします。「実装可能」「デザインFIX済み」「レビュー待ち」「WIP（ワークインプログレス）」「実装不要」「保留中」「ただの案・将来使えそうな」といったステータスに合わせて色分けと同時にカラースタイルも登録することにより、ステータスが変わった際に迅速に対応できるようになります。
セクションを利用した色分け

さらに、ページ構成と合わせてこのデザインファイルのテンプレートを作成し保存しているため、別のプロジェクトが始まった際にはこのテンプレートを利用して、セクションが元々ある状態から仕事ができるようにしています。

これにより新しいプロジェクトの開始段階から一貫性を持たせ、作業がスムーズに進むようになりました。それではこのセクションの運用はどのように行ったらいいのでしょうか。

実際の運用方法

例えば、プロジェクトの進行においてフレームa,b,cが最初から実装可能な状態と仮定します。ここでフレームbに多少のデザイン変更が生じると、フレームbのみが紫色=WIP（ワークインプログレス）のステータスに戻ります。作業が終わり、黄色＝レビュー待ち状態になった後はデザイン定例を行います。そうして、実装側とすり合わせる前の段階に進むと、青色=デザインFIX済みに変わります。さらにそこから、実装側との調整が複雑で工数が割に合わない場合、初期スコープから外す結果になります。この結果、赤=実装なしに変わり、最終的に実装に回るのはaとcのフレームだけになるという運用方法を行っています。
実際の運用方法

属人化を解決するヒント3

属人化を解決する3つ目のヒントは、「デザイン意図や提案、仕様を残しておく」ということで、特にこれは大切にして欲しいと思っています。私が関わっている実際のプロジェクトでも、デザイン意図や提案をFigmaのコメントとメモコンポーネントを併用して残しているのですが、これまでセクションを使用せずにコメントを残していた際は、何かの拍子でFigmaのコメント自体がズレてしまうという事象が発生してしまいました。

一方、セクションの中にフレームを入れると、その部分のコメントが外に出なくなるため、多少ズレが生じてもどこのセクションのどのフレームのことに関するコメントなのか分かるようになります。

さらに仕様書の提案をする際やデザイン変更があった際に、その場でメモを取り全部残しておくことで、後で見返してもわかりやすく、プロジェクトに関わるメンバー全員の効率化に繋げることができます。

5. 気をつけたいこと

Figmaコメントのメリットとデメリット

ここでFigmaコメントのメリットとデメリットをお伝えしたいと思います。1番のメリットは、スマホのFigmaアプリやブラウザ、デスクトップアプリなどどこからでもチェックできる点です。

ただし、デメリットとしてフレームを移動させコピーアンドペーストした際にFigmaコメントが反映されないことです。そこでメモコンポーネントが重要になってきます。メモコンポーネントの場合、フレームを移動させコピーアンドペーストしてもコメントが反映されるため、実装側の意図や事情も伝えやすく円滑なやり取りが可能です。
実際こんな感じで運用中です

仕様書を別ファイルとして書かない

3つ目のヒントのところで仕様書のお話が出てきたと思いますが、工数が増えてしまうため基本的に仕様書を別ファイルとして書きません。仕様書を別ファイルで書くと、まず書くこと自体が工数になり、さらに別の場所に置くことでそれを見に行く工数が発生し、更新することも工数を増やすことになってしまいます。

特にデザインを頻繁に変えていくチームの場合、仕様書を探し出したり見に行ったり、更新するだけで重労働になってしまいます。それをメモコンポーネントとして現場においておくと、もうそこにある状態なので探しに行かなくていいことと、過去の仕様書は過去のファイルで残っているため更新も必要ありません。

さらに別にファイルにしてしまうと仕様書を見逃してしまったり、アクセス権限の付与のやり取りなどをしたりということが起こりがちですが、それも避けることができます。

6.質問コーナー


最後に、参加者の方からの質問に答えていただきました。

Q1.デザインシステムを更新すると過去のデザインが更新されてしまいますが、過去の検討も履歴として残しておきたいので悩んでいます。

A.オススメなのは、過去のデザインファイルのところだけでローカルのコンポーネントを作成することです。コンポーネント名の前にドットやアンダーバーを追加するとローカルのコンポーネントが作成可能で、さらにローカルのコンポーネントは、チームのライブラリに入りません。そのため過去の本当に変えたくないデザインは、こうして切り離すことができます。

Q2. コンポーネントってなんでしょうか。

A.デザインの再利用性を高めるために作成した部品のようなもののことですね。ボタンやアイコンをイメージしてもらえるとわかりやすいかもしれません。今回はそれの応用で、自分が書きたいことを書けるメモを作れるコンポーネントのインスタンスをオーバーライドしているような感じで作成しています。

Q3.デザインデータが重くならないように何か工夫などはされていますか？

A.デザインデータが重くなる原因って大体画像のサイズだと思うので、画像はほとんど全て圧縮するかサイズをかなり小さくするようにしています。

Q4.デザインを属人化しない分、他の人がうっかりいじって戻せないなどの問題はありますか？

A.その可能性はあります。ただFigmaのツールバーのファイルという項目にバージョンヒストリーというものがあるので、他の人がうっかりいじって問題が起きてしまった場合はそこで以前の状態に戻します。

7.まとめ


今回はデザインファイルを属人化させないFigma活用とコラボ方法を、実用例も含めてお伝えいただきました。これからチームの一員としてプロジェクトを進める方も、現在進行形でプロジェクトの進め方に悩まれている方も、新しいヒントを学ぶ一歩になったのではないでしょうか。ぜひこれからの活躍に役立てていただければと思います。