Figma组件变体整理交互状态与交付标注的方法

做完一组按钮后，如果画布上散落着“默认、悬停、禁用、大号、小号”多个主组件，交付时很容易选错状态。更稳的整理方式是把真正会变化的维度收进 Figma 组件集：用 Variant 属性管理尺寸和交互状态，用 Text、Boolean 等组件属性管理内容与图标开关，再在组件说明里写清边界。这样设计师切换实例时不必钻进主组件，开发也能按同一套属性理解交付结果。

官方地址：https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

第1步：先统一组件命名和状态组合

在练习画板中保留同一按钮的几种真实状态，例如中号默认、中号悬停、中号禁用和小号默认。逐个选中主组件，在图层面板把名称整理为 Button/Size=Medium, State=Default、Button/Size=Medium, State=Hover 这类结构。这里的重点不是把名字写长，而是让“尺寸”和“状态”成为可被单独管理的两个维度。

操作路径：选中组件 → 左侧图层面板双击名称 → 输入属性和值 → 回车。先检查是否存在两个视觉不同、但属性组合完全相同的组件；这类重复会在后面合并时形成冲突。成功标志是画布上的每个按钮都有唯一的尺寸与状态组合。

第2步：合并组件集并重命名属性

按住 Shift 多选这些按钮组件，在右侧面板点击 Combine as variants。Figma 会把它们放进一个组件集；如果原名称包含斜杠或属性片段，界面可能先生成 Variant、Property 2 这样的泛化名称。

选中组件集 → 右侧 Properties → 双击属性名，把 Variant 改成 Size，把 Property 2 改成 State，再逐项检查值是否为 Small、Medium、Default、Hover、Disabled。成功标志是右侧面板能分别展开 Size 和 State，下拉组合不会指向不存在的变体。

第3步：补充文本和图标组件属性

不要为了“主要按钮”和“次要按钮”的文案分别复制组件。进入组件集中的任意变体，选中文本层，在右侧 Component properties 点击创建 Text 属性，名称填 Label，默认值填一条短文案。再选中图标层，创建 Boolean 属性 Show icon，让它控制图标的显示与隐藏。

操作路径：选中文本层 → 右侧 Text → 创建属性 → 选择 Text；选中图标层 → 右侧可见性 → 创建 Boolean 属性。然后拖出一个实例，确认右侧能直接编辑 Label 并切换 Show icon。如果改文案后按钮没有自适应，先检查 Auto layout 和文本约束，不要回到主组件里手动拉宽。

第4步：写清交互状态和交付标注

选中组件集，在右侧 Description 写明状态用途，例如“Hover 仅用于指针经过，Disabled 不接受点击；加载态另建状态，不与 Disabled 混用”。在 Documentation link 填团队规范或交付页地址。再把最常用的默认变体放在组件集左上角，因为它会作为 Assets 中的默认展示。

如果需要交互演示，切到 Prototype，从 Default 连接到 Hover 或 Pressed，并确认触发方式与前端事件一致。成功标志是组件说明、属性名称和原型连线指向同一套状态；没有把“视觉禁用”误标成“接口请求失败”。

第5步：用实例完成最终验收

点击左侧 Assets → 找到按钮组件集 → 拖到画布。依次切换 Size、State、Label 和 Show icon，观察按钮宽度、文字对齐、颜色对比和图标间距。若组件集属性完整，验收过程不需要进入主组件。

最后复制一份实例做回归，避免验收时误改主组件。看到属性切换、布局响应、原型触发和交付说明四项都一致，就可以把组件集发布给团队使用。

常见问题

所有相似按钮都应该合并成一个组件集吗？

不应该。只有结构和用途相近、变化维度可以用属性表达的组件才适合合并；差异已经改变语义或布局时，应保留独立组件。

为什么组件集会出现属性组合冲突？

通常是两个变体拥有完全相同的 Size 与 State 值。即使外观暂时不同，也要修改其中一个属性值或删除重复变体。

交互状态和业务结果要放在同一组 Variant 里吗？

只把界面交互状态放进 State。接口失败、权限不足等业务结果应由页面状态或反馈组件表达，避免按钮属性失去清晰边界。

组件变体整理的目标不是把所有按钮塞进一个大容器，而是让每个属性都能回答一个明确问题：尺寸怎么变、状态怎么变、内容怎么换、交付去哪里看。用实例回归一遍，组件集才真正具备可复用性。