普段デザインツール上で「アイコン」を扱う際、多くの方がSVG形式のアイコンをインポートして作業を行っているのではないでしょうか。
特にUIデザインをする場合は大量のアイコンを扱う必要があるため、作業を行う上でSVGファイルは必要不可欠な存在です。
SVGファイルは画像としての性質とテキスト (DOM) としての性質を併せ持っているため、様々なロールのクリエイターにとって扱いやすい形式のファイルです。

一方でSVGファイルは誰でも簡単に書き換えることができるような扱いやすいデータであるからこそ、脆くて管理が難しい存在でもあります。
前述のようにUIデザインをする場合は大量のアイコンを扱う必要があるのでSVGファイルの量も必然と増加しますが、このSVGファイルにはファイル間で秩序を維持する仕組みや、ルールに則ってベクターデータを変化させる仕組みは存在しません。

この記事ではそんなSVGファイルでアイコンを扱う上での具体的な課題とその対策について紹介します。

SVGファイルの課題とフォントファイルの優位性

デザインツール上でアイコンをSVGで管理する際には以下のような課題があります。

1. SVGファイルをダウンロードしてコンポーネントをセットする作業が手間

2. ウエイトやスタイルがアイコン毎に異なってしまう懸念がある

3. アイコンが更新された場合のアップデート対応にコストがかかる

4. サイズを変えても等倍のスタイルになってしまう

特に4番目の「アイコンのサイズを変えても等倍のスタイルになってしまう」課題はデザインを行う上で顕著な課題です。
下記の表はMaterial Symbols Rounded (Medium)に収録されているフォントをフォント形式とSVG形式でそれぞれ出力し、24pxから48pxに拡大した際のレイアウトを表したものです。
フォント形式の場合は一定のストロークウェイトを維持したままサイズが変わりま。その一方でSVG形式の場合は等倍の大きさのまま拡大されるため、ウエイトはMediumでありながらも実際のスタイルはBoldのように強調して表示されてしまいます。

上記のような差異が生まれる背景には「オプティカルサイズ」の存在があります。
オプティカルサイズはバリアブルフォントに備わる値の一つです。
フォントサイズの変化に応じてストロークのような文字の大半を占める要素からヘアラインのような些細な要素まで、フォントにおけるあらゆる要素を変化させるための値です。
上記の表のfontとsvgの大きな違いは、このオプティカルサイズが可変しているか否かという点にあります。

Material Symbolsはオプティカルサイズを備えたバリアブルフォントとして提供されているため、以下の画像のように拡大縮小しても常にストロークウェイトが均一になるようにレイアウトすることができるのです。

アイコンフォントでできるようになること

SVGファイルではなくフォントファイルでアイコンを管理することによって以下のような恩恵を受けられるようになります。

1. アイコンを追加してコンポーネント化する際のコストを抑えられる

2. アイコン毎にウエイトやスタイルなどの差異が発生する懸念が減少する

3. アイコンの更新はフォントファイルの差し替えによって一括で対応できる

4. サイズを変えてもオプティカルサイズによってスタイルが維持される

5. Fill (塗り) を1つのコンポーネントで切り替えられる

5つ目のメリットもオプティカルサイズと同様にバリアブルフォントだからこそ享受できるものです。
バリアブルフォントにはFillもオプションの一つとして備わっており、0から1までの値を指定することで塗り状態を柔軟に表現することができます。

SVGファイルではなくフォントファイルでアイコンを管理することによって堅牢かつ柔軟にアイコンを扱うことができるようになります。

アイコンフォントの導入方法

続いて、FigmaにMaterial Symbolsを導入するための方法を紹介します。

Step.1 マシンにフォントをインストール

GitHub上のmaterial-design-iconsリポジトリにあるvariablefontから、使いたいフォントの.ttfファイルをダウンロードしましょう。

フォントファイルのダウンロードが完了したらフォントをマシンにインストールします。

Step.2 Figmaにタイポグラフィを登録

FigmaのLocal Stylesにタイポグラフィを登録します。
ここではMaterial Symbolsのサイズ展開だけではなく、Variableで登録可能なオプティカルサイズやFillも登録すると活用時にグッと捗るようになります。

また、デザイントークンを採用し、アイコン専用のタイポグラフィトークンを登録することでより楽にアイコンを登録することもできます。
とはいえ、2023年12月現在はFigmaのVariables機能にタイポグラフィを登録することはできないので、Tokens Studio for Figmaを使って登録するのがベターです。
とはいえ (2回目) 、Tokens StudioでもVariableフォントの設定は登録できないので、最終的な調整はLocal Stylesで行う必要があります…
Variablesにタイポグラフィの管理機能が実装されることを祈りましょう。

Step.3 アイコンコンポーネントを作成

デザインファイル上に登録したいアイコンをMaterial Symbolsの公式サイトから見つけます。

登録したいアイコンが見つかったらアイコン名をコピーしましょう。Androidタブから簡単にコピーすることができます。
Rocket Launchアイコンの場合は「rocket_launch」がアイコン名です。

Figmaにコピーしたアイコン名をテキスト形式でペーストし、そのテキストに対してStep.2で登録したタイポグラフィを適用するとアイコンが表示されます。
あとは表示されたアイコンを選択し、Create Componentを実行することでコンポーネント化が完了します。

私の場合は登録したアイコンコンポーネントは以下のように管理しています。
Material Symbolsではアイコンがカテゴリに分類されているため、コンポーネントもカテゴリ毎に整理してあげると探しやすくなるのでおすすめです！

Step.4 アイコンコンポーネントを使おう

コンポーネントの登録が完了したらコンポーネントインスタンスを作成して好きな箇所に挿入しましょう。
サイズやFillを変えたい場合はインスタンスのタイポグラフィを変更することで修正できます。

まとめ

FigmaでアイコンをSVGファイルではなくフォントファイルから参照する方法について紹介しました。
今回紹介した方法はフォントファイル (バリアブルフォントだと尚良し) であればMaterial Symbols以外のフォントでも活用することができます。
例えばAppleが提供しているSF Symbols (SF Pro) でも再現することができるので、iOSなどのUIをデザインする際にも効果的な手法です。

この方法はFigmaを使うユーザー全員がアイコンフォントをマシンにインストールする必要がありますが、Figmaのビジネスプランかエンタープライズプランに加入している組織はフォントファイルをFigmaの環境 (Resouces) にインストールすることができます。
チームの共用フォントとして管理することができるので、作業者がそれぞれフォントをインストールする必要を省くことができます。

組織にカスタムフォントをアップロード – Figma Learn - ヘルプセンター

また、今回紹介したFigmaでのアイコンフォントの活用方法はFigma上で操作できるサンプルを用意しておりますので、もしよろしければ気軽に試してみてください！

アイコンと仲良しになりましょう🤝

この記事はGoodpatch Advent Calendar 2023 14日目の記事でした。