跳到主要内容

在设计中使用变量

变量创建后,可以绑定到支持变量的设计属性。绑定建立的是引用关系,而不是一次性复制:变量值或模式变化时,属性会随之更新。

绑定变量​

  1. 选中图层。
  2. 在需要设置的属性控件中打开变量选择菜单。
  3. 选择变量集和变量。

颜色属性只能选择颜色变量,数值属性只能选择数字变量;不兼容的类型不会出现在列表中。普通文本图层的文本内容可绑定文本、数字或布尔变量,其中数字和布尔值会转换为可显示文本;输入框的文本内容仍只支持文本变量。布尔变量也可绑定到图层显示/隐藏属性。当前绑定范围以控件中的变量入口为准,不能通过变量强行绑定未开放的属性。

颜色属性​

在填充、描边、文字颜色、效果颜色等支持颜色变量的控件中打开变量菜单,选择颜色变量。绑定后,修改变量的颜色值或切换其模式,引用该变量的图层会同步更新。填充、描边和效果中的每一项可能各自提供绑定入口,应在要修改的具体颜色项上操作。

场景:品牌换肤。按钮、链接和标题都绑定 主题色/品牌,活动改版时只需修改变量,所有页面保持一致;需要预览深色主题时,再为同一变量集增加“深色”模式。

技巧:不要直接绑定色阶。 先让 颜色/文字/主要、颜色/状态/错误 等语义变量引用基础色,再将图层绑定语义变量。这样调整状态色或更换品牌时,图层不必逐一重绑。

数值属性​

在宽高、间距、圆角等支持数字变量的控件中打开变量菜单,选择数字变量。列表容器的行高和内边距也可在出现变量入口时绑定数字变量。部分效果控件(例如阴影的模糊、扩散等数值参数)也支持数字变量,具体以控件中显示的变量入口为准。数值变量适合集中管理设计系统中的尺寸刻度和效果参数。

场景:响应式布局。将卡片间距和页面边距绑定数字变量,为“桌面端”和“移动端”分别设置值,即可在同一画板中切换模式检查布局密度。

技巧:先变量化高频规格。 先覆盖页面边距、栅格间距、卡片内边距、圆角和常用高度,而不是一次把所有数字都建成变量。只有会跨页面复用或会随上下文变化的数值才值得管理。

列表容器提示: 列表行高和内边距的绑定入口受列表类型和当前作用域影响。若实例中看不到变量按钮,请回到源组件或列表容器本体检查,不要手动输入相同数值后认为已经建立绑定。

容器尺寸提示: 容器的宽度和高度可分别绑定数字变量,用于在桌面端、移动端等模式间切换尺寸。尺寸变化后应检查自动布局、约束和子图层是否仍符合预期。

文本和布尔变量​

文本变量可用于保存可复用文案,可绑定到文本图层和输入框的文本内容;布尔变量可用于保存开关状态,可绑定到图层的显示/隐藏属性。普通文本图层还可绑定数字和布尔变量,系统会将其转换为文本;输入框文本仅可绑定文本变量。通过原型交互中的“设置全局变量”修改它们后,已绑定的内容会立即更新。

场景:多语言检查。为标题准备中文和英文两种文本值,在模式间切换,检查按钮宽度、自动换行和截断情况。

场景:动态状态文案。将购物车数量绑定到文本图层,可直接显示 0、1、2 等数值;将布尔变量绑定到状态文字,可展示“已开启”或“未开启”。这类展示应使用普通文本图层,不适用于输入框的文本内容。

对于预期文字更长的语言,应该填入接近真实长度的文案,而不是简短的占位符;同时检查自动布局、图标与文字的间距,以及容器是否仍能容纳内容。

切换变量模式​

绑定变量后,变量集的模式决定解析值。模式可以在支持变量模式的对象或容器上切换;未显式指定模式时会使用上层设置或变量集默认模式。图层模式切换只影响当前图层或容器的模式映射,不等同于修改变量集默认模式。外部变量模式在不同属性上的可用范围可能不同,出现不完整提示时请以当前控件可选项为准。要在原型流程中切换整组模式,请参考在交互中使用变量。

解除绑定​

在属性的变量关联菜单中选择解除绑定,即可让该属性恢复为独立值。解除绑定只影响当前属性,不会删除变量,也不会影响其他图层。解除后重新输入的值不会再随变量更新。

排查绑定问题​

  • 看不到变量:确认当前控件支持变量,并检查变量类型是否匹配。
  • 修改变量但图层不变:确认图层绑定的是该变量,而不是手动输入的相同数值;再检查对象是否使用了另一个模式。
  • 模式切换后部分对象未变化:检查这些对象是否绑定了变量,以及变量集是否确实存在该模式。

下一步:查看在交互中使用变量。