Figmaを使ったデザイン管理とTIPS プロジェクト編（Gaji-Labo 暫定版）

こんにちは、Gaji-Labo UIデザイナーの今西です。

Gaji-Labo では Figma でUIデザインをしています。今回は Figma で実践しているデザインの管理について書きます。

実践しながらも試行錯誤している状況ですが、現状までのベストプラクティスはこんな感じですというご紹介です。
また、Gaji-Labo は Figma のProfessional チームで契約しているので、Professional チームでの使用を前提とした管理方法の説明になります。

ファイルとバージョンの管理

Figma のファイルは、プロジェクトに所属しています。そのプロジェクトはチームに属しています。

他のデザイン系のアプリと比べると、Figma はチームやプロジェクトの概念が新しいので戸惑うことがあるかもしれません。チーム、プロジェクト、ファイルのそれぞれにオーナーの権限がありプロジェクトやチームの管理や設定はオーナーが行えるようになっています。

Gaji-Labo では Figma のプロジェクトは、ひとつのプロジェクトやプロダクト単位としています。 プロジェクト以下に複数のファイルを置くことができるのが良いですね。

フェーズとデザインライブラリをファイル別に管理

プロジェクト以下は、バージョンやフェーズごとのファイル、デザインシステム的にスタイルやコンポーネントをまとめたスタイルライブラリ用ファイルを置きます。

スタイルライブラリ用ファイルをメインのデザインを進めるファイルと別にする理由は、フェーズを分けても同じコンポーネントやスタイルを適用するためです。
ライブラリ用のファイルはデザインシステムのように管理する必要があります。破綻ののないよう管理を続けるという点は常にあり続けますが、一旦スタイルを決めて整えると一括で反映される便利さは大きいと思います。
また、ひとつのプロジェクト内で使用するコンポーネントはスタイルライブラリファイルの方で管理するようにしています。

ファイル内のページの管理

Figma にはファイル内でのヒストリー機能があります。このヒストリー機能は一時のスナップショットを残すことはできますが、デザインのバージョン管理をするには扱いづらいと私は感じるところがあり、ほぼ使っていません。

そこで、デザインのバージョンをどう管理するかというとページの名前を「Ver. 0.5」などとして、バージョンを切っています。
Figma ではページごとにURLで共有することも可能なので、クライアントに共有するボリュームもページでバージョンを切っておくと分けやすいです。

作業中の画面やコンポーネントは、「 [WIP] Draft」という名前のページで作業中のフレームを置いておきます。
ファイル内（1フェーズ内）の提案レベルのコンポーネントは、「[WIP] Component」のページに置いておき、デザイン作業を進めます。デザインの確定次第でスタイルライブラリファイルにコンポーネントのマスターとして移動します。

プロジェクト移管

Figma も使用されている会社も増えてきているので、お客さまの Figma チームでUIデザインをすることが多いです。
とはいえ、Figma チームアカウントがお客様の方で無い等の理由がある場合、一旦 Gaji−Labo チームに Figma プロジェクトを作成し、デザインの完了したプロジェクトを受け渡し納品しています。

デザインデータ納品のようなかたちでお客さまのチームに移動する場合は、Figma プロジェクトと移管する先のチームオーナー権限の一致をする必要があります。
いろいろ試した結果、Figma プロジェクト共有用の踏み台チームを用意して移管する先のチームオーナーを踏み台チームに招待、オーナーアカウントから移管先のチームにへ移動していただいています。
お客様に少々お手数をかけてしまいますが、Figma の権限管理の都合上この方法がよさそうです。

まだまだ暫定なので管理方法も育てる

Figma の Inspect は以前よりも表示が見やすくなりました。まだ Zeplin との連携をしたほうがよさそうかと考えていましたが、そろそろ Figma だけでフロントエンドの開発・実装まで進められるようになりそうです。

案件やプロジェクトに依って調整しながら、Figma プロジェクトやファイルの管理方法も試している状況です。
書いている方法も今のところのベストになりそう、なので、まだまだ育てていきたいと思います。

Figmaのプロジェクトやファイルの管理について書きましたが、次回はコンポーネントの管理について書きます。
つい先日のアップデートで、コンポーネントに Variant 機能が追加されました。そのあたりも含めてデザインしたコンポーネントの管理について考えられればと思います。