Figma のアイコン管理方法を調査してみました

こんにちは、UIデザイナーの水澤です。

Figma で UI デザインデータを作るとき、そのデータの中にはアイコンも含まれることがほとんどだと思います。アイコンもボタンのように Component 化すれば、後から違うアイコンに差し替えるのが楽になりますね。

いくつかのプロジェクトを通じて感じたことですが、アイコンの管理方法は 2パターンに分けられそうです。細かな違いではありますが、まとめてみました。

① Variants を使う方法

1つ目は、Variants を使った管理方法です。

ボタンのステートの種類など Components は Variants でより便利になるため、アイコンも同様の方法で管理することは自然に思えます。

Community で公開されているデザインシステムでは、デザイン庁・SmartHR・IBM（Carbon）でこの方法が使われていました。

アイコンの差し替え手順

Instance（＝子Component）を選択した状態で、右側の Properties メニューから他のアイコンを選ぶと反映されます。

② Frame を使う方法

2つ目は、Frame を使った管理方法です。
Frame を使うと、ディレクトリ構造を作ることができます。

Frame はその中に要素を含むことができるため、上記の例ではIcon - B/という Frame のディレクトリ階下にアイコン Components がある構造になっています。

Community で公開しているデザインシステムでは、Material Design でこの方法が使われていました。

アイコンの差し替え手順

Instance（＝子Component）を選択した状態で、右側の Swap instance メニューから他のアイコンを選ぶと反映されます。先述した Variants を使う方法と比べて、他のアイコンを選ぶときにメニューの場所が微妙に異なることがわかります。

デザインシステムの運用管理では Frame は必須

アイコン管理について、ここまで Variants を使う方法と Frame を使う方法をご紹介しました。

実際にはアイコンだけでなくカラーやタイポグラフィ、余白など、他の要素を含めたデザインシステム全体の運用管理が必要になると思います。その場合、カラーやタイポグラフィなどの区分けのために Frame が使われます。

つまり、デザインシステム全体の運用管理を行う場合、先述した Frame を使う方法は行われる前提として、Frame 内にあるアイコン Components に Variants を適用するか否かが大きなポイントになります。

Variants を適用するメリット

• Variants が適用されると枠線（色・形状は変更可能）が表示されるため適用範囲を認知しやすく、万が一適用が漏れてもすぐ気づける

Variants を適用しないメリット

• Auto layout を適用できるため、アイコンを追加するときに楽（Auto layout グループに追加するだけでOK）
• 他のアイコンに差し替えるとき、見た目のイメージが表示されるためアイコン名に頼らずに選べる

まとめ

ここまで読んでいただきありがとうございました。

デザインシステムの運用管理をする観点では Frame を使った区分けを前提としているため、その上で Variants を適用するか、しないかが大きなポイントでした。

Variants を適用しない場合では、アイコンの差し替えでイメージを確認できたり Auto layout で自動整列することもできるため、作業の効率化に繋がりやすいと感じました。他のデザイナーとの協働でも役立ちそうですね。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。