Figma 怎么把组件变体的属性暴露给实例面板

如果你希望使用者选中 Figma 实例后，直接在右侧面板切换按钮的状态和尺寸，关键不是给每个图层改名，而是把相似主组件放进同一个组件集，并为变体建立描述清楚的属性和值。完成后，实例面板会出现对应的下拉控件，选择 state=hover 或 size=large 就能切换变体。

第1步：先把相似主组件合并成组件集

准备同一个按钮的 default、hover、disabled 等主组件，并确保它们的结构和命名边界清楚。框选这些主组件后，点击右侧的 Combine as variants。Figma 会把它们放入一个组件集，画布上通常能看到紫色虚线边界。

如果只有一个主组件，也可以先点击右侧 Add variant，让 Figma 创建第二个变体。不要把完全不同用途的组件硬塞进同一个组件集，否则实例面板会出现难以理解的选项。

第2步：把泛化属性改成能读懂的名称

选中组件集，在右侧找到 Properties 区域。由多个组件转换而来的属性可能显示为 Variant、Property 2 这类泛化名称。将鼠标移到属性名上双击，改成 state、size 或 type，按 Enter 保存。

属性名不要写成“完整样式”这种同时包含多个差异的词。一个属性只描述一件事，例如 state 负责交互状态，size 负责尺寸，实例使用者才能自由组合。

第3步：检查值和变体组合是否唯一

在 Properties 区域展开每个属性，检查值是否统一。一个常见的按钮设计可以是：state 有 default、hover、disabled，size 有 small、large。每个变体应对应唯一组合，例如 state=hover + size=large。

如果两个变体视觉上不同，却拥有完全相同的属性值组合，仍然会冲突。回到组件集，修改受影响变体的属性值，而不是继续增加一个无意义的属性。

第4步：在实例面板验证属性是否暴露

切换左侧 Assets，找到组件集并拖到画布。选中新生成的实例，在右侧查看组件名称下方的 Properties 区域。如果结构正确，这里会出现 state、size 等下拉项；选择新的值后，画布中的按钮应立即切换到对应变体。

如果面板没有这些控件，优先确认选中的是实例而不是普通 Frame，再检查组件集是否真的由多个 Component 组成，以及属性是否创建在组件集上。不要通过 Detach instance 解决问题，那会失去组件关联。

第5步：稳定默认态并减少无效组合

Figma 会把组件集左上角的变体作为默认变体。把最常用、最安全的状态放在左上角，并在组件配置中补充简短描述或文档链接，说明 state 和 size 的可用范围。

也不必为每种组合都制作一个变体。可选图标、是否显示辅助元素等独立开关，更适合使用 Boolean、Instance swap 或 Text property；变体只承担真正影响组件结构或状态的差异。这样实例面板更短，维护成本也更低。

常见问题

为什么我重命名了组件，却没有出现新的实例控件？

组件名称只是资产组织方式，不能代替变体属性。请在组件集的 Properties 区域创建或重命名 Variant property，再从 Assets 重新放置一个实例测试。

为什么变体视觉不同，Figma 仍提示值冲突？

冲突判断看的是属性值组合，不是视觉差异。为其中一个变体调整 state、size 等值，确保组合唯一即可。

总结

用组件集承载相似组件，用独立的 Variant property 描述状态、尺寸等差异，再从实例的右侧 Properties 面板验证下拉控件。只要属性命名清楚、值组合唯一，使用者就能在不拆组件的情况下完成覆盖和切换。