【EVENTレポート】いろんな会社のFigma事情を覗き見できる「Figma見せ合いっこ」が神イベントだった

去る7月15日、UIデザインなどの業務でFigmaを日常的に使っていて、他のチームの使い方やルールを参考にしたい方を対象としたイベント、「Figma見せ合いっこ」に参加したので、そこで得た気付きなどをまとめました。
（イベント後すぐに記事を書こうと思ってたのに、気付けばもう1ヶ月前になってる…！😭 反省…）

イベント開催趣旨

イベント趣旨は以下のとおり。

UIデザインツール「Figma」は自由度が大きい分、
- ファイルの分け方
- ページの作り方
- アートボードの配置
- 派生UIの置き方
- コンポーネントの命名
などがチームそれぞれによって面白いほどに異なります。
しかし、他社のFigmaを見る機会はなかなかありませんので、見せ合いっこするだけのゆるい会を開催します。

人の数だけベストプラクティスがありますので、いいと思ったルールを積極的に取り入れましょう！

私は普段UIデザインや資料作成等でもFigmaを使っていますが、確かにコンポーネントやPageの切り方など、プロジェクトや人によって使い方が様々だなと感じています。
実際にFigmaを駆使している他社事例が見られる機会なんてそうそうないよね、めちゃくちゃいい企画だー！ と思い、鼻息荒く参加しました！

参加されていた企業は以下の通り。

クックパッド株式会社
合同会社DMM.com
株式会社ココナラ
ヤフー株式会社 PayPayフリマ
ヤフー株式会社 全社横断
株式会社Voicy
株式会社Gaudiy
株式会社エイチームライフスタイル
ClassDo Inc.
株式会社イシジマミキ
株式会社hicard
ヤフー株式会社 Yahoo!ニュースアプリ

どんなことを知りたかったか

今回のイベントで、私としては以下のようなことが参考にできたらと思っていました。

- ファイル管理の方法
- Pageの切り方
- コンポーネントの命名規則
- 共有方法　など

このあたりって、私が所属している部署でも、関わっているプロジェクトにおいても、まだ統一されたルールが定まっておらず、これぞ！という方法はないかなあと思っていたところなのです。

絶対的な大前提として、エンジニアが見てもわかりやすいFigmaデータであること以外に、気にかけておくと管理が楽になったりするポイントがあれば知りたいと思ってイベントに参加してきました！

参考にしたいと思った具体的Tips

🚩ファイルの名称のルールを統一する
例えば、GitHubでissue立てていたら、その番号をファイル名やPageの最初につけるとか。

🚩メモや議事録もFigmaで管理する
メモのフォーマットをVariant化しておくと便利そう！
参考にすべきファイルやアプリのアイコンもVariant化しておくと便利そう！
（GitHubやNotionへリンクさせている会社さんが多かった印象）

🚩デザイナー以外の人でもすぐに必要な情報にたどり着くように
未着手／作業中／開発確認／PO確認／完了など、Variant化したラベルをつけて、誰が見ても今このデータがどういう状況かがわかるようにしておく。
また、データの検索も高められるファイル名を意識するとよさそう。（現在開発中のものと、過去のものとがわかるようにするなど）

🚩様々なルールを事前に定義しておく
Marginやタイポグラフィーや、ブレイクポイントなど。ここが最初に決まっていると、エンジニアにデータを渡すときにもブレがない。

🚩FixデータはPageの一番上にする
これ、徹底している会社さん多かった！

🚩エンジニアに優しいデータづくり
既存ページに修正が入った場合、どこに修正が入ったのかの範囲を明確にしてあげると親切！
ボタンの状態変化や、インタラクションについても細かな注釈を入れるなど、デザイナーが少し気を配るだけで開発スピードがあがる！

🚩Mastre Map
各フレームへのリンクをMaster Mapとして作成し、各ファイルにコピーして使っているのが超便利らしい！（これは実際に試してみないと便利さがわからないかも…？）

特に意識したいと強く思ったこと

とある企業さんではコンポーネント作成時に、すべてのデータが一ヶ所のみで作成、あるいは編集される構造化を意識されているというお話がありました。

Figmaのデータ作りにおいては、これは本当に大事だなと最近改めて思っているところなので、常に念頭に置いておきたいなと…！
（今関わっているプロジェクトの過去に作ったデータではこれができていなかったから、今コンポーネント作りに苦労しているという😂）

ただ、マスターコンポーネントを作った場合でも、Variantsにも反映させるかどうかの判断は難しいところかなと思っています。
（Variantsの作り方については、先日部内メンバーであれこれ議論して、私たちなりの最適解を導き出したので、別途記事にしたいなあと思ってます。）

イベント中気になったプラグイン

🧩 Find and Replace
Figmaデータ内の文字検索に便利だそう！

🧩 Text Styles Generator
テキストのtextstyleをPluginで一気に作ってくれるらしく、便利そう…！

※ただし、プラグインは使いこなさないと意味がないと自分に言い聞かせております😂
（インストールだけしておいて使わないものもちらほらあるので…）

まとめ

Figma見せ合いっこ、神イベントでした…！
各社それぞれのやり方があるけれど、改めて、関わる人数が多ければ多いほど、最初にしっかりと「誰が見てもわかる」ルールを設けておいた方が、みんなが幸せになれるぞ…！と思いました。

第二回が開催されるなら、また絶対参加したいと思います！！

おまけ

実際のFigmaデータや、当日のスライドをを公開してくださっていた会社さんもちらほらいらしたので、そのURLを置いておきます。（まずかったら削除いたしますのでお知らせください🙇‍♀️）

Figmaデータ
1. イシジマミキ社
2. 株式会社hicard（Design System Template (公開用)）

スライド
1. クックパッド株式会社
2. 合同会社DMM.com
3. 株式会社Gaudiy

当日、参加者が一斉に公開Figmaファイルを見て、ものすごい数のカーソルが画面に表示されるさまも初めての体験で、とっても面白かったです！笑