怎样定义组件结构、变体与状态？

把部件的组成、可调整选项和使用状态说明清楚，方便可靠复用。

组件是可重复使用的界面部件。定义组件时，要说明它由什么组成、哪些地方可以调整，以及用户操作时会怎样变化。

先记住这几件事

• 结构 是部件的组成，例如按钮文字和可选图标。
• 属性 是允许设置的选项，例如按钮文字或是否显示图标。
• 变体 是同类部件的一种约定版本，例如普通与主要按钮； 状态 是默认、悬停、焦点、禁用或加载等表现。
• 不只画默认外观，还要写清楚状态的触发条件和能否操作；不同部件未必需要同一套状态。

可调整选项与变体的组织见 Figma 组件属性指南 。

定义部件的流程

保存按钮的状态示意

以下是假设规则，不是现有组件接口。

用一个例子走一遍

资料表单使用同一保存按钮。填写有效信息时可以提交；用户点击后变为加载状态；失败时返回可操作状态并说明原因。团队分别检查键盘、长按钮文字和错误路径，而不是只复制默认按钮的外观。

边界与常见误解

每次换一段文字不必新建一个变体。选项过多也会让部件难用，应只开放有实际需要的变化。设计稿里的状态并不会自动具备网页行为，需要实现人员把触发条件和操作规则做出来。