跳到主要内容

创建和管理变量

打开变量管理​

未选中图层时,右侧面板会显示“变量”区域。点击变量区域右侧的设置按钮,打开变量管理窗口。

窗口由变量集、分组树和变量表格组成。表格的名称列、模式值列和操作列固定显示;模式较多时可横向滚动查看中间列。

没有编辑权限时可以查看变量集、分组和变量值,但不能创建、重命名、删除、拖拽或修改变量。

变量管理器支持快捷操作:选中变量或变量值后,可使用编辑器的复制、粘贴快捷键在变量管理器中复制和粘贴;只读模式下粘贴、重复创建、删除和重命名等写操作会被禁用。快捷键可能因系统和自定义设置不同,请以编辑器快捷键面板为准。

创建变量和变量集​

  1. 在变量管理窗口中点击“创建变量”。
  2. 选择“颜色”“数字”“文本”或“布尔值”。
  3. 输入变量名称,并填写默认模式下的值。

变量名使用 / 可自动形成分组,例如 颜色/文字/主要。变量集可通过更多菜单创建、重命名或删除。删除变量集会同时删除其中的变量,使用前请确认没有需要保留的绑定。

创建和管理模式​

模式以列的形式显示在变量表格中。点击添加模式按钮,会复制当前模式的值作为新模式起点;之后可以修改模式名称和各变量值。

每个变量集可选择默认模式。默认模式是未指定其他模式时的初始值,不会自动根据设备或条件切换。需要在原型中切换时,请使用“设置全局变量集”动作并明确选择目标模式。

建议模式名称直接描述上下文,例如“浅色/深色”“桌面端/移动端”“中文/英文”。

分组、排序和批量编辑​

  • 在分组树中可重命名、复制、取消分组或删除分组。
  • 选中一个或多个变量后,可拖拽调整顺序或移动到其他分组。
  • 选中多条变量后,可进行批量编辑,适合统一调整分组或管理大量变量。
  • 模式列支持横向浏览,名称和操作列始终可见,便于核对长变量名与多模式值。
  • 模式较多时可使用横向滚轮浏览中间模式列;名称列和操作列固定,便于在长表格中定位变量。
  • 模式列可以选中并重命名;拖拽模式或变量时,先确认目标位置和当前选中状态。

编辑变量值​

点击变量名称、模式中的值或变量操作菜单即可编辑。修改后,所有引用该变量的设计属性会重新解析。

修改前建议先确认变量用途:主题色通常会影响大量页面,间距变量可能同时改变多个自动布局容器。对影响范围较大的变量,可先在副本或预览中验证。

删除或重命名变量前,应检查已经绑定的图层、变量引用和交互动作。删除变量会清理相关引用,但不会自动替换为新的变量;复制变量或复制带变量绑定的图层后,应重新确认引用的变量集和模式。

使用共享变量​

在线版可将变量或变量集随资源发布给团队使用。发布前,在资源管理中勾选要共享的变量并填写更新说明;其他文件启用该资源后,可在变量选择器的共享区域绑定它们。

共享变量的模式和可绑定属性范围由发布方定义。若外部变量模式在当前对象上无法完整使用,界面会提示限制;这时应改用该对象支持的属性,或在源文件调整变量和模式。更新共享变量后,使用方会收到更新通知,可在资源管理中查看并应用更新。具体发布步骤请查看资源管理和更新。

引用其他变量​

变量值可以绑定同类型的其他变量,形成引用关系。这适合把基础值与界面用途分开维护:例如,让 颜色/操作/主按钮 引用 基础色/蓝/500,再让按钮填充绑定 颜色/操作/主按钮。

在变量值控件中打开绑定变量的选择器,选择来源变量即可建立引用;需要改回独立值时,在同一位置解除绑定。更新来源变量后,引用它的变量及其已绑定图层会一起更新。

建立引用前应避免过长链路。建议控制为“基础值 -> 语义变量 -> 图层”三层以内,并让名称说明用途;否则排查某个颜色或尺寸来自哪里会变得困难。

变量值单元格中的绑定入口支持切换或解除绑定。切换绑定只影响当前变量值;解除绑定后,该值恢复为独立值,不再随来源变量更新。

管理建议​

  • 将语义用途写进名称,不要只使用 蓝色1、数字2 这类表现层命名。
  • 用“基础值 + 语义用途”分层:如 基础色/蓝/500 与 颜色/状态/成功,图层绑定后者。
  • 同一变量集中的模式应代表同一维度,不要把“深色”和“移动端”混在同一组模式中。
  • 删除或重命名变量前,先搜索并检查绑定图层及交互动作,避免留下失效引用。
  • 先建立少量基础变量,再按需要扩展分组,保持变量选择器可检索。

下一步:查看在设计中使用变量。