iOS13のSF SymbolsをSketchやXDで使う
名称未設定_1

iOS13のSF SymbolsをSketchやXDで使う

平田 / U-NEXT

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形式で公開してほしいところですね...。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
平田 / U-NEXT
デザイナーの平田です。 個人ブログ( https://hirata.blog )とnoteの使い分けに困ってます