みんなFigmaの運用どうやってる？ REALITYの運用方法を公開しちゃうよ！

運用方法が変わったので新しく記事を書きました↓↓

UIデザイナーの超簡単です。最近は、インド亜大陸のムスリムにその起源を持つ混ぜご飯料理「ビリヤニ」作りにハマっています。

REALITYではデザインツールとしてFigmaを使っているのですが、運用方法を公開している企業や個人が少なく、「これって本当に効率的なんだっけ？」と思うことがあります。

そこで、まずは自分たちのやり方を公開して、「こっちの方がいいよ！」「うちはこうしてるよ！」みたいな人がもっと増えてくれるといいなーと思い記事を書きました。

こんな人に読んで欲しい
- 他社がどんな風にしてFigmaを運用してるか知りたい人
- いまいちFigmaの運用に自信がない人
- 1〜30人くらいの小中規模のチームでプロジェクトを運用している人

Teams

早速ですが、Teamsの構成から。

REALITYはグリーグループの企業なので、グリーが契約しているエンタープライズアカウント内にある一つのチームとして存在しています。

GREE全体で共通のデザインガイドラインがあるわけではないのですが、他プロダクトの運用やデザイン等を参考にできるといったメリットがあります。

Projects

ProjectsはDesign、PM、Otherの3つに分けており、実質的にはここで開発チームごとの区分けをしています。

Designには実装済みのUIや作成途中のデザインが入っており、UIデザイナーがメインで作業する場所になっています。

PMには企画中のラフデザインファイルが入っており、基本的には企画担当であるPMが作業をする場所です。企画段階のものをデザイナーやエンジニアと共有する際には、ここのファイルを見ながら話を進めることが多いです。

OtherにはiOS・Androidの共通コンポーネントやREALITYのデザインガイドラインなどを入れています。ここにあるデータはLibraryとして登録してあるので、iOSやAndroid標準のUIを使う際にはここからデータを引っ張ってきます。

Figmaの公式ブログではTeamsでiOSやAndroidといったプラットフォーム等でチームを分け、施策ごとにプロジェクトを作成して管理することが推奨されてたりもします。だた、後述のようにREALITYでは一つのデザインファイル内で「マスター・実装中・実装済み」のデータを管理しているので、ここでは施策ごとにプロジェクトを分ける運用は行っていません。

Files

Projectの中にあるファイルは、iOS, Android, Unity, WEBといったプラットフォームごとにファイルを分けています。（Designプロジェクト内の場合）

ファイルの中身自体は「マスターUI」「実装前のUI」「実装リリース済みのUI」の3つに区切っており、機能がリリースされ次第マスターデータにマージしています。

施策ごとにファイルを作成して管理する方法もありますが、ファイルやSymbolの管理が大変そうなので現状はこのように運用しています。

まとめ

Symbolの作り方や画面の整理、Libraryの管理など、細かな所に関してまだまだ説明したりないですが、一旦今回は大まかな運用方法を説明しました。

チームの規模やプロダクトがカバーするプラットフォームによって効率的な運用方法は変わってくると思うので、「うちはこうしてるよー」、「こうした方がいいよー」みたいなのがあれば是非コメントください！

大事なお知らせ

REALITYではこれらのFigmaファイルの運用をほぼ1人で管理しており、そろそろ一人で運用するのは限界に近づいてきました。笑

少しでも気になったり、REALITYのUIをもっとよくしたいという方はぜひ↓からご応募ください（カジュアルに話を聞いてみたい！でも全然OKです！）

全然興味ないーという方は、応援の気持ちでスキのタップと記事のシェアをしていただけると嬉しいです！笑

おまけ