SF Symbolとは？
SF SymbolsはAppleが提供しているシンボルフォントです。iOSなどでの使用を念頭においてデザインされており、開発の場面で使う事も多いかと思います。
SwiftUIであれば、以下のようにして使うことができます。
import SwiftUI
struct SymbolTest: View {
var body: some View {
Image(systemName: "face.smiling")
}
}
各種Modifierを使って色や大きさを変えることができますし、そのままダークモードにも対応できるのが強みです。さらに数字を含むシンボルはローカライズに対応しているので、海外展開を考えるなら積極的に採用してもいいかもしれません。
基本的には公式サイトから一覧のアプリを入手して、目的のものを探すことになると思います。iOSのバージョンによっては使えない物もあるとはいえ、続々とシンボルが追加されています。
ただ、UIとして使う場合には多くの人が見慣れたものを使う方が操作しやすいのは明らかです。
ということで独断ではありますがよく見るシンボルの名前をまとめてみました。
共有ボタン
square.and.arrow.up
主に何かを共有するときに使われているシンボルです。SF Symbolsの多くはこれに限らず、名前の末尾に.fillを加えることで塗りつぶしたものに変更できます。左の、塗りつぶしなしの方が多く使われている気がしますね。
送信ボタン
paperplane
TextFieldの横に配置されたりする送信ボタンに使われていることが多いです。こちらは塗りつぶしありの方がメジャーかもしれません。
ダウンロード
arrow.down.to.line
こちらもよく目にしますね。実は2種類あって、わかりにくいですが右の.altの方が若干矢印が長くなっています。
設定
gear
こちらは設定画面を表すときによく使われる歯車のデザインです。ただ、より単純なデザインのgearshapeはiOS14以上でしか使えない模様。
検索
magnifyingglass
検索を表す時の虫眼鏡のようなデザイン。画像以外にも多くのバリエーションがあるので、検索するコンテンツごとに使い分けてもいいかもしれませんね。
履歴、最近の項目
clock
よくある機能ですが、主に時計のデザインで表現されることが多いです。例えばMacのFinderの「最近の項目」にはこれが使われています。一番右のclock.arrow.circlepathはiOS14以上対応ではありますが、似たものがSpotifyで使われていました。
最後に
アイコンの画像をプロジェクトに追加したりしなくても良いのは便利ですね。また、デフォルトのアプリと同じ意味合いで使えば操作しやすさにもつながるかと思います。
SF Symbolsは今後も追加されていくそうなので楽しみです！