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


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

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

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

① Variants を使う方法

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

アイコン Components に Variants を適用している状態

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

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

アイコンの差し替え手順

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

右側の Properties メニューから、他のアイコンに差し替える様子

② Frame を使う方法

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

Frame の中にアイコン Components を配置した状態

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

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

アイコンの差し替え手順

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

右側の Instance メニューから、他のアイコンに差し替える様子

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

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

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

Frame を使ってカラーやタイポグラフィなどを区分けしている様子

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

Variants を適用するメリット

  • Variants が適用されると枠線(色・形状は変更可能)が表示されるため適用範囲を認知しやすく、万が一適用が漏れてもすぐ気づける
左:Variants 適用なし/右:Variants 適用あり(Variants 適用枠が表示される)

Variants を適用しないメリット

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

まとめ

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

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

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Mizusawa Minami

UIデザイナー。
サインデザインに携わった後、Web制作会社にてWebディレクターを経験。その後UI/UX設計に関心を持ち、事業会社や受託会社でUIデザインを担当。ユーザーにとって心地よい設計を考えていきます。Figmaが好き。