SF Symbols をデザインファイル上で使うのに少しつまずいたので、使い方を共有しておきます。

SF Symbolsとは

SF Symbols は先日のWWDC19の中で発表された、Apple公式のアイコンフォントです。用意された数多くのアイコンを、気軽にアプリの中で使用できます。アイコンのラインの太さを9段階から選べます。

SketchやIllustratorの中で使うには

1.

まず、こちらのサイトからSF Pro フォントをダウンロードし、インストールします。すでにインストールしている人も、2019年6月より以前にダウンロードしていた方は、一度アンインストールして入れ直してください。

2.

次に、こちらのサイトから SF Symbols app をダウンロードし、インストールします。すこしわかりづらいのですが、文中の「download the SF Symbols app.」というリンクをクリックするとダウンロードできます。

3.

先程インストールした SF Symbols アプリを起動すると、アイコン一覧が表示されます。使いたいアイコンをクリックして選択し、⌘Cでコピーします。

4.

Illustrator, Sketch等の使用したいデザインソフトを起動します。テキストを挿入し、先程コピーしたアイコンをペーストします。この時点では上の画像のように文字化けするか、なにも表示されないと思います。

5.

先程のテキストのフォントを「SF Pro Display」に変更すると、指定したアイコンが表示されます。フォントウェイトを変更することで、アイコンのスタイルも変わります。

※ Figmaで使用するには Figma Font Helperの設定 を先にすませておく必要があります。

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

以上です。便利っちゃ便利なのですが、Sketchでのシンボル運用を考えるとLibrary形式で公開してほしいところですね...。