自訂 SF Symbols：可變範本與 3 個必要來源

Apple 提供超過 6,900 個 SF Symbols，SF Symbols App 也可免費使用；但多數應用程式最後都會需要 Apple 沒有提供的圖示：品牌標誌、特定領域的圖像符號，或是不符合系統詞彙的自訂動作。正確做法不是直接放入靜態 SVG，而是建立自訂 SF Symbol。原因在於自訂 SF Symbols 能直接繼承系統機制：隨 Dynamic Type 縮放、參與 Symbol Effects 動畫、支援 4 種算繪模式、與 SF Pro 排版對齊，並且無須為每個應用程式另外撰寫程式碼，就能遵循輔助使用設定。靜態 SVG 無法參與這些機制。

本文會以 SF Symbols App 的可變範本為主線說明工作流程。此範本是在 WWDC 2021 的 SF Symbols 3 中推出¹。討論重點是「3 個必要來源設計是什麼，以及為什麼需要它們」，因為範本格式是整個流程最關鍵、也最容易被設計師與工程師第一次忽略的部分。後續 SF Symbols 版本（4、5、6、7）陸續將範本格式延伸到可變顏色、Magic Replace 轉場、漸層支援與動畫效果；但可變範本核心的 3 來源結構，自 SF Symbols 3 以來一直保持穩定。

TL;DR

• 自訂 SF Symbols 要從 SF Symbols App 匯出的範本開始（File > Export Template，或 ⌘E）²。這個範本是 SVG，內含系統定義的尺寸參考線，以及要被替換掉的預留符號設計。
• 可變範本只需要 3 個來源設計：Ultralight-Small、Regular-Small 與 Black-Small。SF Symbols App 會自動插補其餘 24 種變化（3 種比例 × 9 種字重）³。
• 路徑相容性是最關鍵的要求：3 個來源中，每條路徑都必須有相同數量的錨點、相同起點，以及相同方向。否則插補結果會產生變形的圖像符號。
• 自訂符號支援 4 種算繪模式（monochrome、hierarchical、palette、multicolor）與圖層結構（primary、secondary、tertiary）。Symbol Editor 的算繪檢查器面板可將子路徑指定到不同圖層。
• 最終交付方式：將符號檔案加入 Xcode 的資產目錄，作為 Symbol Image Set。SwiftUI 透過 Image(_:) 與符號名稱引用它；其餘由系統處理。

可變範本

SF Symbols 3（WWDC 2021）推出了可變範本³。這是一個單一 SVG 檔案，內含 3 個來源設計，SF Symbols App 會據此產生完整的 27 種變化格線。3 個來源是：

• Ultralight-Small。最細字重、最小比例。
• Regular-Small。中間字重、最小比例。
• Black-Small。最粗字重、最小比例。

App 會用這 3 個來源插補出另外 24 格（Ultralight-Medium、Regular-Medium、Black-Medium、Ultralight-Large、Regular-Large、Black-Large，以及各比例中的中間字重）。只要來源路徑結構相容，插補就會自動完成。

在 SF Symbols 3 導入可變範本之前，自訂符號必須手動繪製全部 27 種變化。可變範本把工作量降為 3 個來源加上插補；這正是可控設計工作與足以拖垮專案的差別。

相容資料要求

路徑插補要求 3 個來源路徑以相同順序描述同一個形狀²：

• 錨點數量相同。Regular 字重的一個方形若有 4 個錨點，Ultralight 與 Black 也必須有 4 個錨點，即使可見曲率不同也一樣。
• 起點相同。路徑的第一個錨點必須位於相同概念位置（例如永遠是左上角）。
• 方向相同。3 條路徑必須以相同順序繞行形狀（順時針或逆時針）。

任一條件不成立，都會造成插補瑕疵：折角、錯誤重疊、筆畫消失。SF Symbols App 會顯示部分問題（變體預覽會呈現插補結果），但有些細微問題只會在最終匯出的資產中顯現。

務實做法是先設計 Regular-Small，再以同一路徑骨架減少筆畫寬度得到 Ultralight，增加筆畫寬度得到 Black。這樣衍生出的版本會自然保留錨點數量、起點與方向。若每個字重都獨立設計，之後除錯相容性問題所花的時間，通常會比重做結構還久。

工作流程

從概念到可用資產共有 5 個步驟：

1. 找到相似的既有符號

SF Symbols App 的資料庫有 6,900 多個符號。先找一個結構上接近概念的符號（圓形加內容、方形加覆蓋元素、線條加裝飾）。匯出範本時，會以既有符號的幾何結構作為起點。

2. 匯出範本

使用 File > Export Template… 或 ⌘E。範本類型選擇「Variable」。匯出結果是一個 SVG 檔案，裡面排列了該符號的 3 個來源字重，並附有參考幾何資訊，顯示大寫字高、基線，以及 SF Symbols 用來與 SF Pro 文字對齊的視覺邊界。

3. 替換範本路徑

在向量編輯器中開啟 SVG（Sketch、Figma、Illustrator、Affinity Designer、Inkscape）。範本的命名圖層包含 3 個來源設計。把每一個替換成您的自訂設計，同時保留圖層名稱與大寫字高／基線對齊。

此處必須特別注意路徑相容性：每個字重都應從同一路徑骨架設計，只改變筆畫寬度或填色重量，而不是重新繪製。向量工具中的「複製後修改」流程，是最省力也最穩妥的做法。

4. 重新匯入並驗證

將修改後的 SVG 拖回 SF Symbols App。App 會產生 27 種變化，並在變體格線中顯示。請以多種縮放層級檢查每一種字重與比例組合；插補瑕疵常出現在中間字重，一開始不一定明顯。

若符號包含多個視覺元素（例如主體加徽章、圓形加內部形狀），請開啟算繪檢查器面板，並將子路徑指定到不同圖層（primary、secondary、tertiary）。這些圖層指定會決定符號在 hierarchical、palette 與 multicolor 模式中的算繪方式。

5. 加入 Xcode

將符號檔案（從 SF Symbols 匯出的 .svg）拖入 Xcode 的資產目錄。Xcode 會把它視為 Symbol Image Set。程式碼引用方式如下：

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:)（沒有 systemName: 參數）會從資產目錄載入。只要符號製作正確，系統符號可用的 .symbolRenderingMode、.foregroundStyle、.symbolEffect 與 Dynamic Type 行為，也同樣適用於自訂符號。

算繪模式與圖層結構

SF Symbols 提供的 4 種算繪模式，在自訂符號與系統符號上的運作方式相同⁴：

• Monochrome。單一顏色（foregroundStyle）。最簡單，也是最常用的模式。
• Hierarchical。單一顏色，依圖層改變透明度。在算繪檢查器面板中定義的圖層會取得預設透明度；開發者套用一個色調，就能自動得到視覺層次。
• Palette。每個圖層明確指定顏色。開發者傳入多個 foregroundStyle 引數；各圖層會取得各自的顏色。
• Multicolor。每個圖層使用 Apple 定義的固定顏色。對自訂符號而言，這些顏色就是設計師在 Symbol Editor 的 Multicolor 設定中指定的顏色。

圖層結構讓 hierarchical、palette 與 multicolor 能夠運作。若自訂符號沒有指定圖層，所有路徑都會被併入 primary 圖層；符號仍可用 monochrome 算繪，但在其他模式中不會產生視覺層次。凡是能受益於深度感的符號，都值得花幾分鐘在算繪檢查器面板中指定圖層。

常見失敗

自訂符號失敗紀錄中，最常見的是 3 種模式：

違反路徑相容性。這是最常見的問題。一個符號若「Regular 字重看起來沒問題」，但中間字重出現破碎或扭曲，幾乎一定是路徑相容性出錯。診斷方式：開啟 SF Symbols App 的變體格線，查看中間字重變體；若出現折角，或筆畫不符合預期插補結果，代表 3 個來源路徑中至少有一個違反相容性。

基線或大寫字高未對齊。若設計符號時沒有遵守範本的基線參考線，符號與文字並排時會顯得突兀。可見症狀是：與 .body 文字樣式的 Text 同行放置時，符號看起來太高或太低。修正方式：使用範本的參考幾何，將符號的視覺中心放在大寫字高中點。

沒有指定圖層。若符號有豐富內部結構（多個視覺元素），卻沒有指定圖層，就只有 monochrome 模式能正確呈現。App 若選用 hierarchical 或 palette 模式，輸出會變得扁平。修正方式：開啟算繪檢查器面板，將每個子路徑指定到圖層（主形狀用 primary，強調元素用 secondary，第三層細節用 tertiary）。

這個模式對 iOS 26+ App 的意義

有 3 個重點。

1. App 內圖示應使用自訂 SF Symbols，而不是原始 SVG。自訂符號流程確實是工程工作，但系統整合（Dynamic Type、Symbol Effects、算繪模式、輔助使用）讓成本值得。任何會長期存在於 UI 中的圖示都應如此處理。靜態 SVG 適合一次性的行銷素材，不適合作為核心 UI。

2. 從單一骨架設計；改變筆畫重量，而不是改變路徑結構。路徑相容性問題是最要命的失敗模式。防禦性的設計流程，是先從一個字重（Regular-Small）開始，再用同一路徑幾何減少筆畫得到 Ultralight、增加筆畫得到 Black。相容性會在建構過程中自然成立。

3. 任何能受益於算繪模式的符號，都應明確指定圖層。只能以 monochrome 算繪的符號，等於放棄了 SF Symbols 系統一半的能力。算繪檢查器面板只需幾分鐘；結果是自訂符號能與系統符號一樣參與 hierarchical、palette 與 multicolor 模式。

完整 Apple 生態系系列包括：型別化的 App Intents；MCP 伺服器；路由問題；Foundation Models；執行環境與工具 LLM 的區別；3 個介面；單一事實來源模式；兩個 MCP 伺服器；Apple 開發的掛鉤；Live Activities；watchOS 執行環境；SwiftUI 內部結構；RealityKit 的空間心智模型；SwiftData schema 紀律；Liquid Glass 模式；多平台出貨；平台矩陣；Vision framework；Symbol Effects；Core ML 推論；Writing Tools API；Swift Testing；Privacy Manifest；作為平台能力的輔助使用；SF Pro 排版；visionOS 空間模式；Speech framework；SwiftData 遷移；tvOS focus engine；@Observable 內部結構；SwiftUI Layout protocol；我拒絕撰寫的主題。樞紐頁在 Apple 生態系系列。若想了解更廣泛的 iOS 搭配 AI 代理開發脈絡，請參閱 iOS 代理開發指南。

FAQ

我需要 SF Symbols App 嗎？還是可以用其他方式建立自訂符號？

SF Symbols App 是官方工具，也是唯一能產生經驗證、符合 App Store 相容要求之自訂符號的工具。第三方工具與線上轉換器確實存在，但它們產生的 SVG 不一定符合範本格式要求。正式上線的 App 應使用 SF Symbols App。

我可以在 Windows 上建立自訂符號嗎？

SF Symbols App 僅支援 macOS。您可以在任何平台用向量編輯器修改匯出的 SVG 範本，但匯出與重新匯入步驟需要 macOS。多數團隊至少會有一位使用 macOS 的設計師可以處理這些步驟；遠端團隊則可透過版本控制或共享儲存空間傳遞 SVG 檔案。

自訂符號如何支援 .symbolEffect？

只要符號結構良好，多數符號效果都會自動運作：bounce、pulse、scale 等效果不會因符號來源不同而失效。.replace 內容轉場則需要來源符號與目標符號具備相容結構（相近的圖層數量、相近的整體形狀）。本系列的 Symbol Effects 文章有更完整的效果詞彙說明。

Xcode 中的 Symbol Image Set 和一般 Image Set 有什麼差異？

Symbol Image Set 會匯入符號的完整範本（全部 27 種變化），並透過 SF Symbols 的算繪管線提供使用。符號會隨 Dynamic Type 縮放、參與算繪模式，並可搭配 .symbolEffect。一般 Image Set 則是靜態點陣或 SVG 資源，不會參與這些機制。自訂 SF Symbols 應使用 Symbol Image Set。

自訂符號如何支援 visionOS 與 watchOS？

方式與系統符號相同：它們會以平台預期尺寸算繪（watchOS 偏小、visionOS 偏大）、參與平台輔助使用功能，並遵循平台色彩與效果慣例。自訂符號只需製作一次；跨平台行為會自動生效。本系列的 Apple 平台矩陣與 visionOS 空間模式文章說明了各平台考量。

對 App Store 審查有什麼影響？

沒有。自訂 SF Symbols 會和其他 Asset Catalog 資源一樣接受審查。視覺風格準則（不要冒充 Apple 的 UI 模式、不要侵犯品牌商標）和其他自訂美術資源一樣適用於自訂符號；除此之外，審查流程會將它們視為標準圖片資源。

參考資料