🎨
WWDC21『SF Symbols 3 Appの詳細』セッションのまとめ
シンボルを見つける方法
コレクションの作成
- コレクションを作成し、使うシンボルを一箇所にまとめておくことで見つけやすくできる
シンボルを検索する
- 必要なシンボルをツールバーで検索できる
対応OSを確認する
- 情報インスペクタで対応OSを確認できる
ローカライズを確認する
- 情報インスペクタはシンボルの見た目が別の言語でどのように変わるかを表示できる
レンダリングモードをプレビューする
- レンダリングインスペクタで各種レンダリングモードのプレビューができる
カスタムシンボルの管理
元になるシンボルを複製する
- ビルトインの王冠のシンボルを元にカスタムデザインをする
-
crown.fillを選択し[ファイル] > [カスタムシンボルとして複製]からシンボルを複製する - Library > Custom Symbolsに複製される
-
queen.heart.fillなどの説明的な名前に変更する
デザインを修正する
- SVGテンプレートファイルをエクスポートする
- ベクトル編集ツールで開いてデザインを修正する
SF Symbolsアプリにインポートする
- 編集済みのテンプレートをSF Symbolsアプリにドラッグアンドドロップする
マルチカラーモードの注釈をつける
-
ハートを選択して新しいレイヤーにドラッグする
-
新しいレイヤーの色を赤にする
-
王冠の下側の古いレイヤーを黄色にする
階層モードの注釈をつける
- デフォルトのレイヤーはプライマリに設定されており、王冠の下側の2つのレイヤー部分を選択し、それらを新しいレイヤーにドラッグする
- 既にプライマリレイヤーが存在するので新たに作成されたレイヤーは自動的にセカンダリに設定される
コレクションにまとめる
- 作成したシンボルをコレクションに追加して、他のシンボルと一緒に保存する
- コレクションに含めておくと、シンボルの見た目を他のシステムシンボルと並べて確認できる
シンボルをプロジェクトで使う
システムシンボルをベクトル編集ツールで利用する
- システムが提供しているSF Symbolを使用して、シンボルをテキストの横に置き、モノクロレンダリングモードを使用する例
- [編集] > [シンボルをコピー]を選択してベクトル編集ツールにペーストする
- シンボルをテキストとしてペーストする
- 同じテキストボックスで「ルール」という言葉をシンボルの横に追加する
- シンボルをベクトル編集ツールに組み込むにはSFフォントを使用する
- SFフォントを使用すると貼り付けられたシンボルが周囲のテキストに揃えて配置とフォントの重みが調整される
カスタムシンボルをベクトル編集ツールで利用する
- カスタムシンボルはSFフォントを使用できない
- SF Symbolsアプリにイメージをコピーしてデザインカンプで使うためのサポートが追加された
- マルチカラー、階層などのレンダリングモードを使用する時も同様
- シンボルを選択しツールバーの重みを指定しレンダリングインスペクタを設定する
- [編集] > [イメージをコピー]を選択する
- シンボルはPNGまたはSVG形式でコピー可能
- ポイントサイズやピクセルスケールを指定できる
- コピーされたイメージには垂直方向に余白が追加される場合がある
- シンボルの垂直方向の中心が揃えられる
- SFフォントの使用とは異なりこれらのイメージは重みの整合や周辺のテキストとの自動整列は保証されない
参考資料
Discussion