Create custom symbols

Highlight

SF Symbols 3 让自定义 SVG 符号可以携带 3.0 模板数据、渲染模式标注和插值来源，开发者能把自己的图标接入单色、分层、调色板和多色渲染流程。

核心内容

很多 app 都会遇到一个小问题：系统图标库很大，仍然找不到完全符合业务含义的图标。

演讲里的例子是一个纸牌游戏。SF Symbols 已经提供四种花色，也有牌堆图标。可是 app 需要一个“红心皇后”的符号，用来表示游戏里的特殊牌。系统库没有这个具体图标。

过去的做法，是在设计工具里画一个普通 SVG，然后把它当图片用。这样会丢掉 SF Symbols 的优势。图标不一定能和文字基线对齐，也不一定能跟随粗体文字、不同控件尺寸和系统外观变化。

SF Symbols 3 的做法是使用自定义符号模板。模板本身是 SVG，但里面有设计变体、边距、路径和渲染模式数据。开发者把自己的路径放进模板后，系统可以继续把它当 SF Symbol 使用。

这场演讲围绕一个完整流程展开：先从已有的 crown 符号复制出自定义符号，再导出 3.0 模板，用设计工具修改路径，然后导入 SF Symbols app 进行标注，最后导出给 Xcode 或同事使用。

3.0 模板解决了旧模板的限制

SF Symbols 3 引入 3.0 自定义符号模板。它要求 Xcode 13 或更新版本。

新模板的边距指南有更明确的命名，例如 Regular-M 后缀。只要后缀匹配某个设计变体，模板里的左右边距就会被系统识别。这样可以针对单个字重和尺寸调整光学居中。

3.0 模板还可以嵌入渲染模式信息。单色和多色可以写入模板，新的 hierarchical（分层）和 palette（调色板）模式也可以写入模板。自定义符号不再只是黑白路径。

标注让路径变成可渲染的层

自定义符号导回 SF Symbols app 后，可以进行 annotation（标注）。标注的基本单位是路径。开发者把路径组合成 layer（层），再给层分配颜色或层级组。

多色模式下，层分配颜色。分层模式下，层分配 primary、secondary、tertiary 这样的层级组。调色板模式也使用同一份分层标注数据。

这解决了一个常见问题：设计师画好了图标，工程师却不知道哪一部分该用品牌色，哪一部分该跟随系统强调色。标注把这个信息放回符号文件里。

插值减少 27 个变体的手工绘制

SF Symbols 的完整模板有多个字重和三个尺寸。手工画完 27 个变体很容易出错。

SF Symbols 3 提供 variable setup（可变设置）。如果模板里有 Ultralight-Small、Regular-Small、Black-Small 三个设计来源，并且路径数量、路径顺序、点数量全部兼容，系统可以通过 interpolation（插值）生成其他变体。

这会改变工作量。开发者先把 Regular-Small 做好，再复制到另外两个来源，只移动现有点和控制点。只要不增删路径、不重排路径、不增删点，模板就能生成剩余变体。

详细内容

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 表示 Regular 字重、Medium 尺寸的左边距指南。
right-margin-Regular-M 表示同一设计变体的右边距指南。
Regular-M 是设计变体分组，后缀需要和边距指南对应。
path 是符号的矢量路径，SF Symbols app 会基于这些路径做渲染模式标注。

这里的重点不在具体坐标，而在命名规则。3.0 模板靠后缀把边距和设计变体关联起来。

从现有符号开始制作自定义符号

（04:53）演讲从 SF Symbols app 里的 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 Symbol 作为设计参考。
Duplicate as Custom Symbol 把系统符号复制到自定义符号集合。
Queen.heart 是更具体的符号名称，方便后续在工程和设计文件里识别。
Export Template 会导出可在 Sketch、Illustrator 或 Figma 中编辑的 SVG 模板。
static setup 适合只设计一个或两个变体的场景。

演讲还提到，旧的 1.0 和 2.0 自定义符号模板可以拖入 SF Symbols app。应用会把它们加入当前集合，并转换成 3.0 模板。

绘制时避免破坏渲染模式

（08:56）如果自定义符号要支持单色以外的渲染模式，最终设计要满足三个条件：不要保留 live strokes（实时描边），不要使用 open paths（开放路径），不要使用渐变、阴影等特殊填充。

原因很直接。多色和分层渲染需要给封闭形状上色。开放路径没有封闭填充区域，不能接收颜色。实时描边在设计工具里看起来像线条，但导出后可能无法作为稳定的填充形状参与标注。

<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，避免把最终形状依赖在实时描边上。
代码里没有渐变、阴影或多色填充，避免覆盖模板里的渲染数据。

演讲里的操作建议是：设计时可以先用描边匹配 Regular-Medium 的线宽，确认形状后要把描边转换成路径。转换后还可以继续做光学校正，例如调整红心内部太圆、太笨重的曲线。

标注多色、分层和调色板模式

（12:06）标注时，开发者在 SF Symbols app 的 gallery view 里打开 rendering mode tab。可选择 monochrome、hierarchical、palette、multicolor 四种模式。非单色模式下，可以创建和编辑当前模式对应的层。

多色模式下，演讲把皇冠放在一个层里，设置为 system yellow；把红心放在另一个层里，设置为 red。Apple 建议优先使用系统颜色，因为系统颜色会适配浅色、深色、高对比度和 vibrancy 场景。

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）分层模式使用同样的层思路，但层数据从颜色改成 hierarchy group。演讲把皇冠设为 secondary，把红心设为 primary。

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 处理重叠区域，避免透明红心下方露出皇冠。
这份分层数据也会被 palette 渲染模式使用。

（16:01）palette 模式会接收两到三种颜色。传两种颜色时，颜色会分配给可用层级组；传三种颜色时，第一种给 primary，第二种给 secondary，第三种给 tertiary。

// 对应使用方式见本场结尾推荐的 “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) 传入两种颜色，系统按符号的层级标注分配颜色。
这段代码展示的是导入 Xcode 后的使用入口，具体 API 讲解由相关 session 覆盖。

维护路径顺序，避免标注失效

（10:15）标注依赖路径数量和路径顺序。演讲用文件夹加号符号说明：两个变体都有四条路径时，多色渲染可以匹配；如果右侧变体把路径顺序打乱，加号的绿色可能被应用到文件夹上。

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 B 代表两个设计变体。
第一组列表路径数量一致，路径顺序也一致。
第二组列表路径数量一致，但顺序不同。
多色数据按路径顺序匹配，顺序错了，颜色会落到错误路径上。
如果已经标注过符号，修改点是安全的；删除、增加或重排整条路径会让标注数据失去同步。

使用插值生成其他设计变体

（18:24）如果计划支持三种以上设计变体，SF Symbols 3 可以通过可变模板减少手工绘制。开发者只提供三个设计来源：Ultralight-Small、Regular-Small、Black-Small。系统检查路径兼容和点兼容后，生成剩余变体。

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-Small 是三个设计来源。
same number of paths 保证每个来源的路径可对应。
same path order 保证路径对应到正确部件。
same number of points 保证每条路径内部的点可以一一配对。
move existing points and control points only 是制作可插值符号时的核心规则。

（20:52）插值的三个条件是：存在三个设计来源；所有来源的路径匹配；对应路径的点数量匹配。演讲建议先把 Regular-Small 做好，再复制到 Ultralight-Small 和 Black-Small，只调整已有点的位置。

导出 2.0 和 3.0 模板

（23:01）分发自定义符号有两个选择：导出 2.0 模板或 3.0 模板。

2.0 模板用于回部署到旧系统，例如 iOS 14。它只包含单色数据。转换到 2.0 是有损操作，会移除标注数据和显式边距。

3.0 模板可以携带多色、分层数据和自定义边距，但不能向后兼容。演讲强调，导出的 3.0 模板应该直接给 Xcode 或重新导入 SF Symbols app，当前设计工具可能无法完整保留嵌入的标注数据。

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 需要 2.0 模板，因为旧系统不理解 3.0 数据。
2.0 template + 3.0 template 让工程按系统版本选择资源。
iOS 15 or later 可以只使用 3.0 模板。
Collaboration 场景下，3.0 模板应回到 SF Symbols app 中继续编辑。
设计工具适合编辑单色表示，不适合直接修改带标注数据的 3.0 产物。

核心启发

1. 为产品专有概念做 SF Symbol

做什么：给 app 的核心对象做一个自定义符号，例如会员等级、任务状态、收藏夹类型。
为什么值得做：3.0 模板让自定义图标继承文字对齐、字重、尺寸和渲染模式。
怎么开始：在 SF Symbols app 里找一个形状接近的系统符号，使用 Duplicate as Custom Symbol，导出 3.0 static setup，先完成 Regular-Medium。

2. 给品牌图标加多色和深色模式适配

做什么：把品牌图标拆成多个路径层，在多色模式下给不同层分配系统颜色或自定义颜色。
为什么值得做：系统颜色会适配浅色、深色、高对比度和 vibrancy 场景。
怎么开始：把最终形状全部转换成封闭路径，导入 SF Symbols app，在 multicolor 模式中创建 layer 并分配颜色。

3. 为工具栏符号添加分层语义

做什么：让工具栏里的自定义符号在主色、次级色、弱化色之间有清晰层级。
为什么值得做：hierarchical 和 palette 模式可以使用同一份标注数据，工程侧只需要选择渲染模式和颜色。
怎么开始：在 hierarchical 模式下把主要对象放入 primary，背景或装饰放入 secondary 或 tertiary，重叠区域开启 Clear Behind。

4. 为完整图标集建立可插值工作流

做什么：给一组常用自定义符号生成 27 个字重和尺寸变体。
为什么值得做：只要三个设计来源兼容，SF Symbols 3 可以通过插值生成其余变体，减少逐个绘制的时间。
怎么开始：导出 3.0 variable setup，先完成 Regular-Small，再复制到 Ultralight-Small 和 Black-Small，只移动已有点和控制点。

5. 为旧系统准备降级资源

做什么：在支持 iOS 14 的项目里同时准备 2.0 和 3.0 自定义符号资源。
为什么值得做：2.0 模板能在旧系统显示单色符号，3.0 模板能在新系统保留多色和分层数据。
怎么开始：从 SF Symbols app 分别导出 2.0 与 3.0 模板，在工程中按系统版本选择对应资源。

关联 Session

What’s new in SF Symbols — 了解 SF Symbols 3 的新符号、渲染模式和自定义符号能力。
SF Symbols in UIKit and AppKit — 学习在 UIKit 和 AppKit 中使用彩色符号和配置渲染模式。
SF Symbols in SwiftUI — 学习在 SwiftUI 中创建符号、设置可访问性标签和应用调色板渲染。
Explore the SF Symbols 3 app — 熟悉 SF Symbols 3 app 的搜索、预览、自定义符号管理和导出流程。

Highlight

核心内容

3.0 模板解决了旧模板的限制

标注让路径变成可渲染的层

插值减少 27 个变体的手工绘制

详细内容

3.0 自定义符号模板

从现有符号开始制作自定义符号

绘制时避免破坏渲染模式

标注多色、分层和调色板模式

维护路径顺序，避免标注失效

使用插值生成其他设计变体

导出 2.0 和 3.0 模板

核心启发

1. 为产品专有概念做 SF Symbol

2. 给品牌图标加多色和深色模式适配

3. 为工具栏符号添加分层语义

4. 为完整图标集建立可插值工作流

5. 为旧系统准备降级资源

关联 Session

评论