こんにちは！サービスデザイン部、ポイントメディア担当デザイナーの大澤です。

弊社ではUIツールとして数年前から「Figma」を導入し、メインツールとして使っています。
私たちのチームではここ最近、Figmaの運用ルールやファイル構成を大きく見直し、使いやすくリニューアルしました。

この記事では、Figmaの使い方を見直すことにした経緯やその内容、リニューアルしたことで得られた効果について話していこうと思います！

この記事が参考になるであろう方

Figmaのチームでの運用方法に課題を感じている方
1チームで複数の媒体を運用している方

なぜ「運用ルール」の見直しが必要だったのか？

簡潔に3点でまとめると、

大人数でのFigma作業の効率を高めたかったから
これまでのファイル構成に使いづらさを感じていたから
そもそもこれまではFigmaの運用ルールを統一しておらず、ファイル内が煩雑になっていたから

です！

私たちポイントメディアチームのデザイナーは、自社ポイントサイトである「ポイントタウン」と、パートナー様に向けてポイントサイトを提供する「GMOリピータス」、合わせて8つの媒体(2023年5月現在)の運用を行っています。

Figmaを導入した当時は、運用ルールやファイル構成が曖昧でも問題なく運用できていたのですが、「媒体数の増加」「携わるデザイナーの増加」「運用年数の経過」に伴って、いろいろと問題が表面化してきました。

今までのFigma運用の問題点

具体的にこれまでのFigmaファイルのどんな点が使いづらかったのかというと…

ファイルが重い

これが一番の問題でした。作業ファイル１つ開くのに1分以上かかることもあり、とにかく不便でした。

マスターページを最新に保てない

マスターページとは「本番環境のデザインデータをそのままFigma上におこしたもの」です。
理想としては、何か施策をリリースしたらその都度Figmaのマスターページにも変更を反映して、マスターページは最新に保っておきたいのです。
しかしこの「マスターページの更新」のタイミングが曖昧だったため、更新漏れが発生し、どんどんマスターページが古くなっていってしまいました。

こうなると、UI改修の施策を打とうにも最新データが揃ってないので都度パーツを作らなければならなかったり、本番環境とのデザインのずれで認識違いが発生したりと、良いことが全くありません…！

過去のデータを見つけづらい

新たなデザイン作業をするときにどこで作業をするかというルールも曖昧で、施策ごとにページを切っていたり、マスターページ上に施策デザインを載せていたり、ルールがバラバラでした。

結果として、過去に行った施策を見返すときにそのデータをなかなかFigma上で見つけられず、これも問題となっていました。

...と、まだまだ挙げればキリがないのですが、これらの問題を解決するためのFigmaの運用方法をチームで作り上げました！

新たなFigmaの運用ルール

プロジェクト・ファイル構成の見直し

まず、Figma上のファイル構成を大きく組み直しました。

こんなファイルだったものが...

このようになりました。
元々は「GMOリピータス」という一つのプロジェクト内にいろんな媒体のファイルを詰め込んでいたのですが、思い切って媒体ごとにプロジェクトを切り出しました。また、これまでのマスターファイルは用途ごとにファイルを切り出しています。

①Master Library (SP・PC共用)

コンポーネントを入れておくファイル
テキストスタイルやカラースタイルをこのファイル内で定義し、プロジェクト内の各ファイルとライブラリ機能で紐付け

②Master Page (SP・PC別)

本番環境のページデータを入れておくファイル

③施策ファイル

UI改修やバナー、LPなどのデザイン作業を行うためのファイル(後述)

④その他

①②③以外で適宜必要になったファイルは都度作成

施策ファイルの作成

サムネイルには

施策名
デザイン担当者 (アイコン)
作業ステータス
作業開始日
JIRA(チームで利用しているタスク管理ツール)のタスク番号

を表示しており、コンポーネントやvariantsを使って、内容を一括で簡単に変えられるようになっています。

サムネイルを設けた意義として特に大きいのが「作業ステータス」で、マスターページへの反映漏れを防ぐために、以下のような4つのステータスでチームのデザイン作業の進捗状況が一目でわかるようにしています。

施策ファイルの中身は4つのページで分かれています。

①thumbnail & link

ファイルのサムネイル、gitHubのリンクなどを置いておくページ

②workspace

デザイン作業を行うページ

③fix

全ての作業が終わった後にFIXしたデザインを入れておくページ

④parts

作業で使える便利なパーツが置いてあるページ(後述)

施策ファイルを簡単に作れるように、「施策テンプレート」ファイルを各プロジェクトにピン留めしており、これを複製することですぐに作業に入ることができます！

便利なコンポーネントを作成

上で挙げたように、施策ファイル内にはこのようなメモ用のコンポーネントが入っています。

主に

デザインの説明や仕様を残したいとき
コーディング用のメモを書いておきたいとき
デザインレビューのとき
マスターページの古くなっている部分を見つけたとき

などに使用しています。実際のファイル内を少し覗いてみるとこんな感じで使用されています。

今まではデザイナーそれぞれの方法でメモを残していたのですが、これらの方法を統一したことでアイデアや考えをデザイン上に残したり、意見の共有がやりやすくなりました！

ファイル編集時のルール決め

以下の2点をドキュメントにまとめています。

施策ファイルの運用フロー
Figma編集時のルール

日頃Figmaを使う上での悩みや、実際にファイルを整理するタイミングで出てきた課題などをチームで出し合い、解決策をまとめたものをFigma上にドキュメントとして置いています。

得られた効果やメリット

まだ改善して日は浅いですが、日々の活動で改善の効果を大きく実感しています。

ファイルが重い
→ファイルを用途ごとに細かく分けたことで、ファイル一つ一つをかなり軽くすることができました！

マスターページを最新に保てない
→マスターへの反映状況をサムネイルで可視化したことで、チーム全員が状況を把握できるようになり、更新漏れを防げています。

過去のデータを見つけづらい
→ファイル構成を統一したことで、過去のファイルを見つけるためにいろんなところを探しに行く必要がなくなりました。
各施策のサムネイルにキーワードをたくさん盛り込んでいるので、Figmaの検索機能を用いたファイルの探索がやりやすくなりました。
またGitHubのプルリクやJIRA(チームのタスク管理ツール)のリンクとも紐付けることで、過去の施策へいろんな方法でアクセス出来るようになりました！

それだけではなく、先程紹介した「施策ファイル」は、デザインの作業効率が上がったり、チーム内でのデザインレビューがやりやすくなったりと、こちらは想定外の大きな改善ポイントでした！

課題

ここまで新しい運用ルールの良い点をお話ししてきましたが、残念ながら課題もあります。それは「新ルール移行のためのファイル整理に手間と時間がかかる」ことです。

特に大変だったのが、古くなっていたマスターページを最新の状態にする作業です。運用ルールの見直しにあたって、チーム内のほぼ全てのファイルに手を加えましたが、その中でもマスターページの更新は特に骨が折れる作業です。

全てのマスターページを最新にしたいところではあるのですが、作業が膨大になってしまうためそれは諦め、私たちのチームでは使用頻度の高いファイルから優先的にマスターページの更新を進めました。作業は主に、個人で乗務時間の合間を縫って行ったり、チームでまとまった時間を作って話しながら行っていました。

Figmaを便利を使うためとはいえ、ファイル整理に時間をかけすぎてしまっては本末転倒なので、ファイル整理をどこまで徹底して行うかは、チームやプロジェクトの規模をよく考えて決める必要がありそうです。

まとめ

Figma自体はとっても使いやすい便利なツールです。しかしチームで一つのファイルの管理方法や作業フローなどを決めておかないと、その扱いはチーム規模に比例して難しくなってしまいます。

Figmaのチーム運用に何かしら課題を感じている方にとって、この記事が少しでも役に立っていたら幸いです。

ここまで読んでくださりありがとうございました！