FigmaからSF Symbols 5のカスタムシンボルをエクスポートするプラグインを作った
先日、AppleのSF Symbolsのカスタムシンボルを作成するFigmaプラグインを個人開発しました。
開発の経緯と利用方法について説明します。
SF Symbolsとは何か？
SF Symbolsは、Appleが公式に提供しているアイコンライブラリで、5,000種類以上のシンボルが収録されています。現在正式リリースされているバージョンはSF Symbols 4で、次期バージョとしてSF Symbols 5がベータ提供されています。
AppleのシステムフォントであるSan Franciscoフォントとともに利用しやすいように、９種類のウェイトと３種類のスケールが提供されています。
SF Symbolsには複数のカラーを適用できるマルチカラーの仕組みがあります。SF Symbols 5からは手軽にアニメーションを利用できるシンボルアニメーションの仕組みが導入されました。
このようにSF Symbolsを利用すると、通常の画像ファイルのアイコンでは実現できない様々な表現を、Appleプラットフォーム上で手軽に実現することができます。
カスタムシンボルの作成
SF Symbolsには、ユーザーが作成したカスタムシンボルを追加する機能があります。カスタムシンボルを作成するにはSF Symbolsアプリケーションに規定のフォーマットでSVGファイルを追加します。現在ベータ提供されているSF Symbols 5での作成手順を説明します。
カスタムシンボルの作成手順
1. https://developer.apple.com/sf-symbols/ から「Symbols 5 Beta」をダウンロード、インストールします。
2. SF Symbolsを起動するとウィンドウにシンボルの一覧が表示されます。いずれかのシンボルを選択した状態で、メニューの「ファイル」から「テンプレートを書き出す」を選択します。
3. 書き出したSVGファイルをAdobe illustratorなどのベクターデザインツールで編集します。テンプレートを元に Small Ultralight, Small Regular, Small Black の３種類のシンボルをアウトライン化されたベクターレイヤーとして配置します。SF Symbolsの仕組みにより、この３種類をベースにその他のスケールとサイズのパターンが自動で作成されます。
4. 3で編集したSVGファイルを、SF Symbolsの「カスタムシンボル」にドラッグして追加します。
5. プロパティインスペクタからはマルチカラーやアニメーションのための設定を行うことができます。
SF Symbols 5からはシンボルアニメーションが追加されました。現在ベータ提供されているSF Symbols 5のアプリケーションからカスタムシンボルのレイヤーを編集すると、レイヤー毎に時間差を伴ったアニメーションを簡単に利用することができます。 pic.twitter.com/m23rHHa4nl
— 鈴木慎吾 / TSUMIKI INC. (@shingo2000) July 27, 2023
詳細はWWDCの以下のセッションが参考になります。
6. 追加したカスタムシンボルを選択し、メニューの「ファイル」の「シンボルを書き出す」から書き出します。
7. 書き出したSVGファイルはXcodeからAssetsして追加して実装に利用することができます。
このような手順でカスタムシンボルを追加できますが、テンプレートを元にSVGファイルを編集するのには多くの手間がかかります。カスタムシンボル用のSVGフォーマットをFigmaから直接エクスポートできると手間が劇的に軽減できそうです。そこでFigmaプラグインとしてSF Symbols Optimizerを開発することにしました。
SF Symbols Optimizer の使い方
1. Figmaファイルを開いた状態でプラグイン「SF Symbols Optimizer」を検索し、プラグインウィンドウを開きます。
2. SF Symbolsに変換したいアイコンをFrameまたはComponentまたはInstanceレイヤーとして用意します。
3. 変換したいレイヤーを複数選択した状態でプラグインウィンドウの「Scan」ボタンを押します。レイヤー未選択の場合はページ内のすべての該当レイヤーが読み込まれます。
4-1. 単一のウェイトのシンボルを書き出す場合： タブ「Single Weight」を選択し、一覧の中から書き出したいものを選びエクスポートアイコンを押します。
4-2. 複数ウェイトのシンボルを書き出す場合： タブ「Multi Weight」を選択し、「Ultralight」「Regular」「Black」の３種類のウェイトにそれぞれのアイコンのレイヤーを指定し、「Export」ボタンを押します。
5.ファイル名を確認してSVGファイルを保存します。
エクスポートされたSVGファイルはSF Symoblsアプリにカスタムシンボルとして追加します。前述のカスタムシンボルの作成手順の4以降の手順に進んでください。
複数ウェイトのシンボルとしてカスタムシンボルを作成した場合は、標準シンボルと同様にXcodeから９種類のウェイトを利用することができます。
マルチカラーやアニメーションも、簡単な実装で利用することができます。
実装時に９種類のウェイトで利用できる
こんな感じでFigmaから簡単にSF Symbolsのカスタムシンボルを作成することができるようになりました。
TwitterでもUIデザインについて発信しています。感想やコメントなどいただけると嬉しいです！
この記事が気に入ったらサポートをしてみませんか？