WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Create custom symbols

Create custom symbols

DesignSF SymbolsSVG
元の動画を見る

ハイライト

SF Symbols 3 では、カスタム SVG シンボルが 3.0 テンプレート データ、レンダリング モードの注釈、および補間ソースを保持できるため、開発者はアイコンをモノクロ、レイヤード、パレット、およびマルチカラーのレンダリング プロセスに統合できます。

主要内容

多くのアプリでは小さな問題が発生します。システム アイコン ライブラリは非常に大きく、ビジネス上の意味を完全に満たすアイコンはまだ存在しません。

スピーチの例はカードゲームでした。 SF Symbols はすでに 4 つのスーツとデッキアイコンを提供しています。ただし、アプリにはゲーム内の特別なカードを表す「ハートの女王」のシンボルが必要です。システム ライブラリにはこの特定のアイコンがありません。

これまでは、デザイン ツールで通常の SVG を描画し、それを画像として使用していました。これでは SF シンボルの利点が失われます。アイコンは必ずしもテキストのベースラインと一致するとは限らず、太字のテキスト、さまざまなコントロール サイズ、システムの外観の変更に従うこともできません。

SF Symbols 3 は、カスタム シンボル テンプレートを使用してこれを行います。テンプレート自体は SVG ですが、その中にはデザインのバリエーション、マージン、パス、レンダリング モードのデータが含まれています。開発者が独自のパスをテンプレートに追加した後、システムはそれを SF シンボルとして引き続き使用できます。

この講義は完全なプロセスを中心に展開します。まず、既存のクラウン シンボルからカスタム シンボルをコピーし、次に 3.0 テンプレートをエクスポートし、デザイン ツールを使用してパスを変更します。次に、それを注釈用に SF Symbols アプリにインポートし、最後に使用するために Xcode または同僚にエクスポートします。

3.0 テンプレートは古いテンプレートの制限を解決します

SF Symbols 3 では、3.0 カスタム シンボル テンプレートが導入されています。 Xcode 13 以降が必要です。

新しいテンプレートのマージン ガイドには、より明示的な名前が付けられています。Regular-Mサフィックス。サフィックスが特定のデザイン バリアントと一致する限り、テンプレートの左右のマージンがシステムによって認識されます。これにより、個々の重量やサイズに合わせて光学的センタリングを調整できます。

3.0 テンプレートには、レンダリング モード情報を埋め込むこともできます。新しい階層モードやパレット モードと同様に、モノクロとマルチカラーをテンプレートに書き込むことができます。カスタム シンボルは単なる白黒のパスではなくなりました。

アノテーションによりパスがレンダリング可能なレイヤーになります

カスタム シンボルを SF Symbols アプリにインポートして戻した後、注釈を付けることができます。アノテーションの基本単位はパスです。開発者はパスをレイヤーに結合し、色または階層グループをレイヤーに割り当てます。

マルチカラー モードでは、レイヤーに色が割り当てられます。階層モードでは、レイヤーにはプライマリ、セカンダリ、ターシャリなどの階層グループが割り当てられます。パレット モードでも、同じ階層アノテーション データが使用されます。

これにより、よくある問題が解決されます。デザイナーはアイコンを描画しましたが、エンジニアはどの部分にブランド カラーを使用する必要があり、どの部分がシステムのアクセント カラーに従うべきかを知りません。 Annotation は、この情報をシンボル ファイルに戻します。

補間により 27 種類のバリエーションの手描きが削減されます

SF Symbols の完全なテンプレートには、複数のウェイトと 3 つのサイズがあります。 27 のバリエーションすべてを手で描くと間違いが起こりやすくなります。

SF Symbols 3 は変数のセットアップを提供します。テンプレートに Ultralight-Small、 Regular-Small、Black-Small の 3 つのデザイン ソースがあり、パスの数、パスの順序、およびポイントの数がすべて互換性がある場合、システムは補間を通じて他のバリアントを生成できます。

これにより作業負荷が変わります。開発者は最初に Regular-Small を実行し、次にそれを他の 2 つのソースにコピーして、既存のポイントとコントロール ポイントのみを移動しました。パスが追加または削除されない限り、パスが再配置されず、ポイントが追加または削除されない限り、テンプレートは残りのバリエーションを生成できます。

詳細

3.0 カスタム シンボル テンプレート

(03:01) SF Symbols 3 のカスタム シンボル テンプレートのバージョンは 3.0 です。 Xcode 13 以降が必要です。テンプレートは、マージン、レンダリング モード データ、および高度なビルド情報を保存できます。

講演では、3.0 テンプレートの左右のマージン ガイドラインではデザイン バリアント サフィックスが使用されることが明確に述べられました。Regular-M。バリアントに光学マージンを設定する場合は、それに応じてガイド名の接尾辞を付ける必要があります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3300 2200">
  <g id="Guides">
    <path id="left-margin-Regular-M" d="M 960 0 L 960 2200" />
    <path id="right-margin-Regular-M" d="M 2340 0 L 2340 2200" />
  </g>
  <g id="Symbols">
    <g id="Regular-M">
      <path id="crown-outline" d="M 1000 1400 L 1200 900 L 1500 1250 L 1650 760 L 1800 1250 L 2100 900 L 2300 1400 Z" />
    </g>
  </g>
</svg>

キーポイント:

  • <svg>カスタム シンボル テンプレートが SVG 形式を使用することを示します。
  • left-margin-Regular-M標準フォントの太さと中サイズの左マージンのガイドを示します。
  • right-margin-Regular-M同じデザインのバリエーションを表す右マージン ガイド。
  • Regular-Mこれはデザインのバリエーションをグループ化したものであり、サフィックスはマージン ガイドに対応する必要があります。
  • pathはシンボルのベクトル パスであり、SF シンボル アプリはこれらのパスに基づいてレンダリング モードの注釈を作成します。

ここで焦点を当てるのは特定の座標ではなく、命名規則です。 3.0 テンプレートは、サフィックスを利用してマージンをデザインのバリエーションに関連付けます。

既存のシンボルからカスタム シンボルを作成する

(04:53) SF Symbols アプリからの講義crownシンボルが始まります。アプローチは検索することですcrown、コンテキスト メニューから選択しますDuplicate as Custom Symbol、 またCustom.crownに名前を変更Queen.heart。

このプロセスの利点は、既存のシンボルの重み、サイズ、および配置の参照が直接継承されることです。カスタム アイコンは空白のキャンバスから始まりません。

SF Symbols app
1. Search: crown
2. Context menu: Duplicate as Custom Symbol
3. Rename: Custom.crown -> Queen.heart
4. File -> Export Template, or Command + E
5. Choose 3.0 template, static setup

キーポイント:

  • Search: crown既存の SF シンボルを設計参照として使用します。
  • Duplicate as Custom Symbolシステム シンボルをカスタム シンボル コレクションにコピーします。
  • Queen.heartこれは、エンジニアリング文書や設計文書でのその後の識別を容易にする、より具体的なシンボル名です。
  • Export TemplateSketch、Illustrator、または Figma で編集できる SVG テンプレートをエクスポートします。
  • static setup1 つまたは 2 つのバリアントのみが設計されるシナリオに適しています。

講演では、古い 1.0 および 2.0 のカスタム シンボル テンプレートを SF Symbols アプリにドラッグできることにも言及しました。アプリケーションはそれらを現在のコレクションに追加し、3.0 テンプレートに変換します。

描画時にレンダリング モードを中断しないようにする

(08:56) カスタム シンボルがモノクロ以外のレンダリング モードをサポートする場合、最終デザインは 3 つの条件を満たす必要があります。ライブ ストロークを保持しない (ライブ ストローク)、オープン パスを使用しない (オープン パス)、グラデーションやシャドウなどの特殊な塗りつぶしを使用しない。

理由は簡単です。多色およびレイヤー化されたレンダリングでは、閉じた形状に色を付ける必要があります。開いたパスには閉じた塗りつぶし領域がないため、色を受け取ることができません。ライブ ストロークはデザイン ツールでは線のように見えますが、エクスポート後に注釈用の安定した塗りつぶし形状として使用できない場合があります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <path id="closed-heart" fill="#000000" d="M60 96 L22 58 C8 42 18 18 40 24 C50 27 56 36 60 44 C64 36 70 27 80 24 C102 18 112 42 98 58 Z" />
  <path id="closed-crown" fill="#000000" d="M20 92 L28 42 L48 66 L60 28 L72 66 L92 42 L100 92 Z" />
</svg>

キーポイント:

  • closed-heart閉じたパスです。使用してくださいZ閉鎖。
  • fill="#000000"通常のプレーン塗りつぶしを使用します。これは、後でレンダリング モード データに置き換えることができます。
  • closed-crownこれは閉じたパスでもあり、マルチカラーまたは階層的なラベル付けプロセスに入るのに適しています。
  • コードには含まれていませんstroke、最終的な形状をライブストロークに依存しないようにするため。
  • テンプレート内のレンダリング データの上書きを避けるために、コードにはグラデーション、シャドウ、またはマルチカラーの塗りつぶしはありません。

スピーチでの操作提案は、デザインする際に、まず普通～中程度の線幅に合わせてストロークを使用し、形状を確認してからストロークをパスに変換するというものです。変換後は、丸すぎるまたは大きすぎる赤いハートの内側のカーブを調整するなど、光学的な修正を続けることができます。

ラベルのマルチカラー、レイヤー、およびパレット モード

(12:06) 注釈を付けるとき、開発者は SF Symbols アプリのギャラリー ビューでレンダリング モード タブを開きます。モノクロ、階層、パレット、マルチカラーの 4 つのモードが利用可能です。非モノクロモードでは、現在のモードに対応するレイヤーを作成および編集できます。

マルチカラー モードでは、クラウンを 1 つのレイヤーに配置し、システム イエローに設定します。ハートを別のレイヤーに置き、赤に設定します。システム カラーは明るいシーン、暗いシーン、高コントラストのシーン、鮮やかなシーンに適応するため、Apple は最初にシステム カラーを使用することをお勧めします。

Multicolor annotation
Layer 1: crown
  Paths: crown paths
  Color: system yellow
Layer 2: heart
  Paths: heart paths
  Color: red
Layer 3: crown hollow parts
  Paths: transparent interior paths
  Opacity: lower opacity
Layer 4: heart hollow parts
  Paths: transparent interior paths
  Opacity: lower opacity

キーポイント:

  • Layer 1統一したカラー設定を容易にするために、クラウン パスをグループにグループ化します。
  • Color: system yellowシステムの外観の変化を追跡するには、システム カラーを使用します。
  • Layer 2ハートのパスを分離し、クラウンと色を共有しないようにします。
  • Layer 3そしてLayer 4不透明度を低くして、ストロークと塗りつぶしの間のグラデーションをシミュレートします。
  • 同じパスを複数のレイヤーに表示できます。これにより、プレゼンテーションでストロークと塗りつぶしの効果が実現されます。

(14:36) 階層モードでは同じレイヤーアイデアが使用されますが、レイヤーデータは色から階層グループに変更されます。スピーチでは、頭頂部が二次的なものとして設定され、心臓が主要なものとして設定されます。

Hierarchical annotation
Layer 1: crown
  Paths: crown paths
  Group: secondary
Layer 2: heart
  Paths: heart paths
  Group: primary
  Clear Behind: enabled

キーポイント:

  • Group: secondaryレイヤード レンダリングでクラウンにセカンダリ レベルを使用させます。
  • Group: primaryレイヤード レンダリングでハートをメイン レベルにします。
  • Clear Behind: enabled透明なハートの下に王冠が見えないように、重なった部分を作業します。
  • この階層化されたデータは、パレット レンダリング モードでも使用されます。

(16:01) パレット モードは 2 色または 3 色を受け取ります。 2 つの色が渡されると、その色は使用可能な階層グループに割り当てられます。 3 つの色が渡されると、最初の色が原色に与えられ、2 番目の色が二次色に与えられ、3 番目の色が三次色に与えられます。

// 对应使用方式见本场结尾推荐的 “SF Symbols in SwiftUI” 与 “SF Symbols in UIKit and AppKit”
Image(systemName: "queen.heart")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.red, .yellow)

キーポイント:

  • Image(systemName:)シンボリック名を使用して SwiftUI イメージを作成します。
  • .symbolRenderingMode(.palette)パレットレンダリングモードを要求します。
  • .foregroundStyle(.red, .yellow)2 つの色を入力すると、システムはシンボルの階層的な注釈に従って色を割り当てます。
  • このコードは、Xcode をインポートした後の使用入り口を示しています。特定の API の説明は、関連するセッションで説明されています。

アノテーションの失敗を避けるためにパスの順序を維持する

(10:15) 依存関係パスの数とパスの順序をマークします。プレゼンテーションでは、フォルダーのプラス記号記号を使用します。両方のバリアントに 4 つのパスがある場合、マルチカラー レンダリングは一致します。正しいバリアントがパスの順序を乱す場合、緑色のプラス記号がフォルダーに適用される可能性があります。

Compatible path order
Variant A: [folder-fill, folder-stroke, badge-circle, badge-plus]
Variant B: [folder-fill, folder-stroke, badge-circle, badge-plus]

Broken path order
Variant A: [folder-fill, folder-stroke, badge-circle, badge-plus]
Variant B: [folder-fill, badge-circle, folder-stroke, badge-plus]

キーポイント:

  • Variant AそしてVariant B2 つのデザイン バリエーションが示されています。
  • 最初のグループのリスト内のパスの数は同じであり、パスの順序も同じです。
  • 2 番目のリスト セット内のパスの数は同じですが、順序が異なります。
  • マルチカラーデータはパス順序で一致します。順序を間違えると、色が間違った方向に落ちてしまいます。
  • シンボルに注釈が付けられている場合、そのポイントを安全に変更できます。パス全体を削除、追加、または再配置すると、注釈データが同期しなくなります。

補間を使用して追加のデザイン バリアントを生成する

(18:24) SF Symbols 3 では、3 つ以上のデザイン バリエーションをサポートする予定がある場合、変数テンプレートを使用して手動で描画する手間を減らすことができます。開発者が提供するデザイン ソースは、Ultralight-Small、 Regular-Small、Black-Small の 3 つだけです。システムはパスの互換性とポイントの互換性をチェックした後、残りのバリアントを生成します。

Interpolatable custom symbol requirements
Sources:
  - Ultralight-Small
  - Regular-Small
  - Black-Small
Path compatibility:
  - same number of paths
  - same path order
Point compatibility:
  - matching paths have the same number of points
Editing rule:
  - move existing points and control points only

キーポイント:

  • Ultralight-Small、Regular-Small、Black-Small3つのデザインソースです。
  • same number of paths各ソースのパスが対応していることを確認してください。
  • same path orderパスが正しいコンポーネントに対応していることを確認してください。
  • same number of points各パス内のポイントを 1 つずつペアにできることを確認します。
  • move existing points and control points onlyは、補間可能なシンボルを作成するときの中心的なルールです。

(20:52) 補間の 3 つの条件は次のとおりです。3 つのデザイン ソースがある。すべてのソースからのパスが一致します。対応するパス内のポイントの数が一致します。講義では、まず Regular-Small を作成し、それを Ultralight-Small と Black-Small にコピーし、既存のポイントの位置を調整するだけであると提案しました。

2.0 および 3.0 テンプレートをエクスポートする

(23:01) カスタム シンボルを配布するには、2.0 テンプレートまたは 3.0 テンプレートをエクスポートする 2 つのオプションがあります。

2.0 テンプレートは、iOS 14 などの古いシステムへのバックデプロイメントに使用されます。これには、単色のデータのみが含まれます。 2.0 への変換は損失の多い操作であり、ラベル データと明示的なマージンが削除されます。

3.0 テンプレートは、マルチカラー、レイヤー化されたデータ、カスタム マージンを保持できますが、下位互換性はありません。プレゼンテーションでは、現在の設計ツールでは埋め込まれた注釈データが完全には保存されない可能性があるため、エクスポートされた 3.0 テンプレートを Xcode に直接与えるか、SF Symbols アプリに再インポートする必要があると強調しました。

Distribution decision
Minimum deployment target: iOS 14
  Export: 2.0 template + 3.0 template
  Runtime: choose asset by OS version

Minimum deployment target: iOS 15 or later
  Export: 3.0 template only
  Runtime: use the 3.0 asset

Collaboration
  Export: 3.0 template
  Receiver: import into SF Symbols app before editing

キーポイント:

  • iOS 14古いシステムは 3.0 データを理解できないため、2.0 テンプレートが必要です。
  • 2.0 template + 3.0 templateプロジェクトがシステム バージョンに基づいてリソースを選択できるようにします。
  • iOS 15 or later3.0 テンプレートのみを使用できます。
  • Collaborationこのシナリオでは、編集を続けるために 3.0 テンプレートを SF Symbols アプリに戻す必要があります。
  • このデザイン ツールは、単色表現の編集には適していますが、注釈付きデータを含む 3.0 プロダクトを直接変更するのには適していません。

重要ポイント

1. 製品固有のコンセプトの SF シンボルを作成する

  • 作業内容: メンバーシップ レベル、タスクのステータス、お気に入りのタイプなど、アプリの中心となるオブジェクトのカスタム シンボルを作成します。
  • 価値がある理由: テンプレート 3.0 では、カスタム アイコンがテキストの配置、太さ、サイズ、レンダリング モードを継承できます。
  • 開始方法: SF Symbols アプリで似た形状のシステム シンボルを見つけて使用します。Duplicate as Custom Symbol、3.0 静的セットアップをエクスポートし、最初に Regular-Medium を完了します。

2. ブランドアイコンにマルチカラーとダークモード対応を追加します

  • 対処方法: ブランド アイコンを複数のパス レイヤーに分割し、マルチカラー モードでシステム カラーまたはカスタム カラーを異なるレイヤーに割り当てます。
  • 価値がある理由: システム カラーは、明るい、暗い、高コントラスト、鮮やかなシーンに適応します。
  • 開始方法: すべての最終形状を閉じたパスに変換し、SF シンボル アプリにインポートし、マルチカラー モードでレイヤーを作成し、色を割り当てます。

3. ツールバーのシンボルに階層セマンティクスを追加する

  • 対処方法: ツールバーのカスタム シンボルに、主色、副色、弱色間の明確な階層を持たせます。
  • 実行する価値がある理由: 階層モードとパレット モードは同じ注釈データを使用できます。プロジェクト側でレンダリングモードとカラーを選択するだけです。
  • 開始方法: 階層モードで、主要なオブジェクトをプライマリに、背景または装飾をセカンダリまたはターシャリに配置し、重なっている領域の背後をクリアをオンにします。

4. 完全なアイコン セット用の補間可能なワークフローを構築する

  • 機能: よく使用されるカスタム シンボルのセットに対して 27 の重さとサイズのバリエーションを生成します。
  • 価値がある理由: 3 つのデザイン ソースに互換性がある限り、SF Symbols 3 は補間によって残りのバリアントを生成できるため、1 つずつ描画するのにかかる時間が短縮されます。
  • 開始方法: 3.0 変数設定をエクスポートし、最初に Regular-Small を完了してから、Ultralight-Small と Black-Small にコピーし、既存のポイントとコントロール ポイントのみを移動します。

5. 古いシステムのダウングレード リソースを準備する

  • 対処方法: iOS 14 をサポートするプロジェクトで 2.0 と 3.0 の両方のカスタム シンボル リソースを準備します。
  • 価値がある理由: 2.0 テンプレートは古いシステムで単色のシンボルを表示でき、3.0 テンプレートは新しいシステムで複数色およびレイヤー化されたデータを保存できます。
  • 開始方法: SF Symbols アプリから 2.0 と 3.0 のテンプレートをそれぞれエクスポートし、プロジェクト内のシステム バージョンに応じて対応するリソースを選択します。

関連セッション

  • SF Symbols の新機能 - SF Symbols 3 の新しいシンボル、レンダリング モード、カスタム シンボル機能について説明します。
  • UIKit および AppKit の SF シンボル — UIKit と AppKit で色付きのシンボルを使用し、レンダリング モードを構成する方法を学びます。
  • SwiftUI の SF シンボル — SwiftUI でシンボルを作成し、アクセシビリティ ラベルを設定し、パレット レンダリングを適用する方法を学びます。
  • SF Symbols 3 アプリを探索する — SF Symbols 3 アプリの検索、プレビュー、カスタム シンボル管理、エクスポート プロセスに精通していること。

コメント

GitHub Issues · utterances