SF Symbols は 2019 年に導入され、UI デザイナーや開発者にとって大きなサプライズとなりました。
SF Symbols (SF は San Francisco の略) は基本的にはアイコンフォントで、デザインに使える 2,400 以上の無料のシンボルセットを提供しています。そして、それらは簡単に使用できます。
UI デザインにおいて、これらのアイコンは本当に魔法のように機能します。
まず、アイコンをデザインしたり購入したりする負担を軽減してくれます。ナビゲーションバー、ツールバー、タブバー、コンテキストメニュー、ウィジェットなど、多くの UI 要素でコンテンツを表すために SF Symbols を使用することができます。
一番のメリットは、画像を使用できる場所であればどこでもシンボルを使用できることです。そのため、SF Symbols を使ってアイコンをデザインするときでも、開発者は個別のアイコンファイルを必要としません。必要なのはアイコンフォントだけで、これらは iOS 13 以降の Apple 製品にはじめから同梱されています。
アイコンを使用する際の通常の課題のひとつに、位置合わせがあります。数値的な中心にすべてのアイコンを配置すると、視覚的には揃っていないように見えてしまうのです。San Francisco フォントを使用すれば、垂直方向と水平方向の位置合わせが自動的に行われます。
さらに、標準シンボルとカスタムシンボルのどちらでも負のサイドマージンを与えることができます。これにより、他のフォントとの視覚的な位置合わせが可能になります。
2.0 のアップデート以降、SF Symbols はカラー化できるようになりました。導入されたマルチカラーシンボルは、外観モードやアクセシビリティ設定に自動的に適応するという点でユニークです。可能性は無限大です。
たとえば、ブランドやアプリの雰囲気に合わせて色を選択することができます。Curve では、スポイトを使って簡単にマッチする色を選ぶことができます。
SF Symbols が普通のアイコンと違うことは、先に述べた通りです。SF Symbols はフォントのようなもので、非常に簡単に編集できます。San Francisco フォントのウェイトに合わせて、ウルトラライトからブラックまで 9 種類のウェイトが用意されています。これにより、シンボルはテキストと調和します。
しかし、SF Symbols はスケールのような他の項目で設定することもできます。スケールは、線、行間、ウェイトなどの他の属性はフォントと同じにしたまま、シンボルをのサイズを調整する方法です。スモール、ミディアム、ラージの 3 種類から選択できます。
さらに、ポイントサイズやテキストスタイルによる編集を行うこともできます。この強力なアイコンを使えば、いろいろなことができます。
そこが難しいところです。これらのアイコンは Apple のエコシステム以外では使えません。iOS/macOS 用のアプリをデザインしている場合は問題ありません。しかし、そうでない場合は、モックアップの表示以外には使用できません。