What's new in SF Symbols 7

ハイライト

SF Symbols 7 は Draw アニメーションシステム、Variable Draw、Magic Replace の強化、グラデーションレンダリング、そしてカスタムシンボルのための guide points 注釈ワークフローをもたらします。

主要内容

これまで、App 内のシンボルに対する細かなフィードバックを実現しようとすると、開発者はしばしば二択の板挟みに陥っていました。静的な SF Symbol をそのまま使うと表現力に欠けるし、かといって SVG を自作して Lottie で書くと、あらゆる状態遷移やプログレス指示をすべてカスタムアニメーションにする必要がありました。結果としてアイコンライブラリは肥大化し、スタイルは乱雑になり、システムネイティブの遷移とも噛み合わなくなってしまいます。Apple デザインチームの Kelsey さんがこの session で提示した答えは、「描画」という行為を SF Symbols 自体に組み込むことです。

SF Symbols 7 は一つの主軸に沿って展開します。シンボルを「固定された画像」ではなく「一筆一筆書かれる文字」のように扱うのです。Draw アニメーションはシンボルをパスに沿って描画・消去させ（01:49）、Variable Draw はそのパスを定量化可能なプログレスバーに変えます。Magic Replace は「外枠」を認識して保持するようになり、関連する二つのシンボル間の遷移がより連続的に（06:03）。グラデーションレンダリングはすべてのレンダリングモードに統一的に適用され、カスタムシンボルは guide points システムを通じてこれら一連の機能を利用できるようになります。すべてこれらは馴染み深い symbolEffect 修飾子と SymbolEffect 型にカプセル化されており、App 側では数行のコードを変えるだけでアップグレード可能です。

詳細

Draw アニメーションシステム（01:49）。新しいアニメーションプリセットが二つ追加されました。Draw On はシンボルを画面上に描画し、Draw Off はシンボルを消去します。既存の再生オプションを継承します。By Layer（デフォルト、レイヤーごとに開始時間をずらす）、Whole Symbol（すべてのレイヤーを同時に描画）。そして新しく Individually オプションが追加され、レイヤーを直列に一つずつ描画し、前のレイヤーが完了してから次を開始します（03:08）。各シンボルは自分自身の描画方向を定義します。風は左から右へ、アラビア文字は右から左へ、対称なシンボルは中心から外へ（03:28）。複合シェイプ（矢印など）は描画中に矢印がパスに沿って移動することをサポートします（03:56）。Draw Off には reverse スイッチが追加され、元の方向に沿って消し続けるか、逆方向に消すかを決定できます（04:35）。

Variable Draw（04:48）。これは Draw の注釈を再利用しますが、一つのレンダリングプリセットとして機能します。指定したパーセンテージの位置にパスを描画し、その下に透明度を下げた完全なレイヤーを重ねます。ダウンロードプログレス、温度計、ヨガの完了度など、段階的に進む可視化に適しています。一つのシンボルは Variable Color と Variable Draw の両方をサポートできますが、レンダリング時にはどちらか一方しか選べません。未指定の場合は .default に任せるとシステムがシンボルの優先モードを選択します（05:50）。

Magic Replace の強化（06:03）。Magic Replace は一致する enclosure（外枠、例えば四角や円環）を認識するようになり、それらを保持して異なる中身だけを置換します。同時に Draw を Magic Replace に導入。退出シンボルは Draw Off で、進入シンボルは Draw On で描画され、両者が enclosure と組み合わさって最も連続的な遷移を提供します。

グラデーションレンダリング（07:00）。単一のソースカラーから滑らかな線形グラデーションを生成し、シンボルに光と陰影の深みを与えます。システムカラーとカスタムカラーの両方をサポートし、monochrome、hierarchical、palette、multicolor の四つのレンダリングモードすべてにグラデーションを重ねられます。サイズが大きいほど効果は顕著になります。

カスタムシンボルの注釈（08:05）。Draw アニメーションは guide points に依存します。一つのパスには少なくとも 2 つのポイントが必要です。起点（白抜きの円）、終点（塗りつぶされた円）。複雑なパスは角にポイントを追加する必要があり、急なカーブは corner point としてマークします（菱形のインジケーターで、同側の二つのポイントを特別に関連付けます、17:38）。複数の subpath を持つ円：最初の guide point を配置するとシステムが二つの subpath にまたがっていることを認識し、それを起点+終点として扱います。デフォルトは時計回りに描画し、右クリックメニューで反時計回りに切り替え可能（14:13）。矢印付きの複合シェイプ：矢印を既存の guide point にドラッグすると attachment を作成します（描画要素ではなく、パスに沿って移動します、15:11）。9 段階の weight、3 段階の scale に対し、regular、ultralight、black の三つの weight だけに注釈を付け、システムが残り六段階を補間します。三つの weight の guide point 順序は一致している必要があり、guide point numbers をオンにして順序を確認できます（19:43）。

API 更新（20:51）。Draw、Variable Draw、Gradient はすべて既存のエントリーポイントから SwiftUI / UIKit / AppKit に統合されます。SwiftUI で Draw On/Off をトリガー：

Image(systemName: "trash")
    .symbolEffect(.drawOn, options: .speed(0.8), isActive: !isHidden)

キーポイント：

• Image(systemName:)：従来通りの SF Symbol で、アイコンリソースを置き換える必要はありません。
• .symbolEffect(.drawOn, ...)：新しい drawOn プリセットを使用。isHidden 状態の切り替え時にシンボルはまず Draw Off してから Draw On します。
• options:：他の symbol effect と同様、デフォルトの By Layer をオーバーライドして Whole Symbol や Individually に変更可能です。

UIKit / AppKit で Draw をトリガー：

imageView.addSymbolEffect(.drawOn)
imageView.addSymbolEffect(.drawOff)

キーポイント：

• UIKit / AppKit では Draw On と Draw Off は二つの独立した addSymbolEffect 呼び出しで、必要に応じてトリガーします。
• 既存の API 表面を利用し、新しいビュータイプは必要ありません。

Variable Draw レンダリングを有効化：

Image(systemName: "thermometer")
    .symbolVariableValueMode(.draw)
    .symbolEffect(.variableColor.iterative, value: progress)
    .imageScale(.large)

キーポイント：

• .symbolVariableValueMode(.draw)：variable value が Color ではなく Draw を使うようにシステムに指示します。記述しない場合はシンボルの優先デフォルトを使用します。
• value: progress：プログレス（0–1）を variable value として入力し、シンボルはパーセンテージに応じたパスを描画します。

グラデーションレンダリングを有効化：

// SwiftUI
Image(systemName: "heart.fill")
    .symbolColorRenderingMode(.gradient)

// UIKit / AppKit
let config = UIImage.SymbolConfiguration(colorRenderingMode: .gradient)
imageView.preferredSymbolConfiguration = config

キーポイント：

• SwiftUI は .symbolColorRenderingMode(.gradient) 修飾子でグラデーションを有効化します。
• UIKit / AppKit は SymbolConfiguration(colorRenderingMode:) で設定。monochrome、hierarchical、palette、multicolor のいずれと組み合わせても有効です。
• SF Symbols アプリの Copy Code ボタンは現在のプレビュー状態に対応するコードをコピーしてくれるので、パラメータを暗記する必要はありません（22:01）。

重要ポイント

• 何をするか：重要な状態遷移を Draw + Magic Replace にアップグレードする。 なぜやる価値があるか：チェック完了、エラー通知、オンboardingステップといった重要な节点で、以前はフェードイン/フェードアウトではフィードバックが弱すぎ、カスタムアニメーションはシステムの他の部分と切り離されていた。Draw + enclosure マッチングはゼロのアートコストでシステムと一貫した筆致感のある遷移を実現できる。 どう始めるか：App 内で最も頻繁にタップされる 5 つのアイコン変化（いいね、お気に入り、再生/一時停止、チェック、削除）をリストアップし、それらを .symbolEffect(.drawOn) と Magic Replace に置き換えて、一つずつ体験を比較する。

• 何をするか：プログレス系 UI を Variable Draw で表現する。 なぜやる価値があるか：ダウンロードバー、温度計、トレーニング完了度といったリニアなプログレスは、以前は ProgressView を使うか自前で円環を描く必要があった。Variable Draw は一つのシンボルだけで「形状 + プログレス」の二層のセマンティクスを担え、二つのビューを削減できる。 どう始めるか：既存の ProgressView シーンを一つ見つけ、セマンティクス的に近いシステムシンボル（例：arrow.down.circle、thermometer）を選び、Image(systemName:).symbolVariableValueMode(.draw) に変更してプログレス 0–1 を value に書き込む。

• 何をするか：カスタムシンボルが guide points の補完が必要か監査する。 なぜやる価値があるか：古いカスタム SVG シンボルは guide points を持たず、Draw、Variable Draw、Magic Replace を利用できない。補完しないと App を SF Symbols 7 にアップグレードした後、視覚的一貫性が断絶する。 どう始めるか：SF Symbols アプリで最も近いシステムシンボルを複製し、その guide points を削除して最初から注釈を付け直してルールに慣れ、それから自社の custom symbol に戻る。regular / ultralight / black の三つの weight だけに注釈を付け、残りはシステムに補間させる。

• 何をするか：大サイズのヒーローアイコンでグラデーションレンダリングを有効にする。 なぜやる価値があるか：グラデーションは大サイズシンボルで最も効果が顕著で、設定ページのヘッダー画像、空状態イラスト、onboarding の大きなアイコンに深みを持たせ、新規リソースを導入せずに済む。 どう始めるか：App 内で size ≥ 64pt のすべての SF Symbol 使用箇所を見つけ、一つずつ .symbolColorRenderingMode(.gradient) を追加し、小サイズはそのままにする。

関連セッション

• Bring Swift Charts to the third dimension — Swift Charts が 3D になり、Draw アニメーションと組み合わせてデータ可視化を行います。
• Build an AppKit app with the new design — AppKit の新デザイン言語の実装、macOS での Symbol 更新と併せて紹介されます。
• Create icons with Icon Composer — Icon Composer で App アイコンを作成、SF Symbols とデザインシステムを共有します。
• Elevate the design of your iPad app — iPad の新デザイン実践、シンボルアニメーションは体験向上の一環です。