Figma 怎样为组件添加可切换的布尔属性

在 Figma 里，如果一个按钮只有“带图标”和“不带图标”两种显示差异，不必为每种组合都复制一个变体。更合适的做法是给图标图层绑定 Boolean 属性，然后在实例的 Properties 区域用开关控制它的可见性。

官方地址：https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties

下面用一个“可选前置图标的按钮”说明完整流程。最终验收标准很简单：主组件有清晰的布尔属性，实例右侧出现开关，切换开关时画布中的图标同步显示或隐藏。

先把可选内容放进主组件

先在画布中准备一个按钮，再把它转换成主组件。按钮内部至少包含文字层和一个代表可选内容的图层，例如名为 leading-icon 的图标。布尔属性目前针对的是图层可见性，因此不要把它当成颜色、尺寸或交互状态的通用替代品。

如果按钮还没有主组件，可以选中按钮后创建 Component；如果已经有组件，直接选中主组件即可。为了让实例使用者容易理解，建议把目标图层命名成能表达用途的名称，而不是保留自动生成的编号。

在 Properties 区域创建 Boolean 属性

选中主组件后，在右侧边栏找到 Properties 区域，打开新增属性的菜单并选择 Boolean。在创建面板中填写属性名称，例如 Show leading icon，再设置默认值。

默认值要和主组件的初始画面一致：如果画布上希望默认显示图标，就设为 true；如果希望默认隐藏，就设为 false。创建后，属性会出现在主组件的属性列表中，但这一步只定义了一个开关，还没有指定它控制哪个图层。

属性名尽量描述“打开后会看到什么”，例如 Show leading icon 比 Option 1 更容易被使用者理解。一个组件里有多个可选内容时，分别创建独立属性，避免一个开关同时承担互不相关的显示任务。

把 Boolean 属性应用到图标图层

进入主组件内部，选中要控制的嵌套图层。在右侧的 Appearance 区域找到应用变量或属性的入口，选择刚才创建的 Show leading icon。应用成功后，侧栏会出现带属性名称的紫色标记，这就是“属性已经绑定到图层”的中间状态。

如果在属性列表中看不到目标属性，先确认当前选中的是主组件内部的图层，而不是普通实例；如果属性标记已经出现但画布没有变化，检查该图层是否真的处于可见状态，以及默认值是否和预期相反。

完成绑定后，回到主组件外层查看默认状态。此时 Boolean 的 true 表示图层可见，false 表示图层隐藏。它控制的是可见性，不会删除图层，也不会改变图层的布局约束或组件结构。

在实例中切换并核对状态

从主组件创建一个实例。选中实例后，右侧边栏会集中显示这个组件暴露出来的属性。找到 Show leading icon 开关，先记录默认状态，再切换一次。

切换后按下面三点核对：

1. 开关状态发生变化，说明实例已经读取到了主组件的 Boolean 属性。
2. 画布上的图标随之显示或隐藏，说明属性绑定到了正确的图层。
3. 按钮文字、圆角和其他布局仍保持设计预期，说明这次切换只改变了可选内容的可见性。

如果只想让一个实例隐藏图标，不要修改主组件默认值，直接在实例中关闭开关即可。这样保留主组件的统一默认状态，也能让单个实例拥有自己的属性覆盖。

几个容易误判的边界

Boolean 不等于 Variant。布尔属性适合控制一个图层显示或隐藏，例如图标、状态标记或辅助说明。颜色、尺寸、交互状态等结构或视觉差异，更适合用 Variant；把所有差异都塞进布尔开关，会让组件的属性面板难以维护。

Boolean 不等于原型交互。如果两个画面之间需要单独建立 Prototype 连线，不要为了减少变体而把它们合并成一个组件再用可见性切换。Figma 官方提醒，合并后原本连接在两个对象之间的原型连线可能丢失。

属性只负责引导可编辑面。组件属性会把常用控制集中到右侧，但它不会阻止使用者继续访问其他图层，也不是权限控制。发布组件库前，仍应检查属性名称、默认值和文档说明是否能让团队成员正确使用。

按这张清单完成验收

相关问题

Figma Boolean 属性默认值设反了怎么办？回到主组件的 Properties，编辑该属性的默认值；实例没有覆盖时会跟随新的默认状态。

为什么实例中看不到布尔开关？先确认 Boolean 已应用到主组件内部的图层，再确认当前选中的是该主组件的实例，而不是普通图层或已脱离组件的对象。

一个 Boolean 属性可以控制多个图层吗？如果多个目标都需要一起显示或隐藏，可以在设计上让它们共享同一属性，但要先确认这种联动是组件语义的一部分；互不相关的图层最好拆成不同属性。

布尔属性能直接控制颜色吗？不能。它的主要用途是切换图层可见性；颜色、尺寸和组件状态应按具体差异考虑变量或 Variant。

完成这套流程后，使用者只需要在实例右侧切换一个语义明确的开关，就能得到带图标或不带图标的按钮。主组件负责定义可变范围，实例负责选择状态，最后用画布结果和原型边界做一次验收即可。