同一个按钮需要默认、悬停和禁用状态，还可能有不同尺寸。把这些版本散放在画布上，使用时就容易选错。Figma组件变体（Variants）可以把同类组件放进一个组件集，通过“状态”“尺寸”等属性选择需要的版本。
1. Figma组件、组件集和变体有什么关系？
组件是可复用的界面元素；组件集把同类组件组织在一起；变体则是组件集中的具体版本。例如，按钮的Size可以设为Small和Large，State可以设为Default和Disabled。每个变体都应有一组明确的属性值。
先整理项目实际使用的组合。例如只需要“大号默认”“小号默认”和“大号禁用”三种按钮，就先做好这三种。清楚的命名比一开始铺满所有组合更便于维护。
2. 在Figma中创建并使用按钮变体
- 画好需要的按钮状态，分别创建为组件。
- 选中这些组件，使用Combine as variants组合到一个组件集中。
- 把属性改成有含义的名称，例如Size、State，再为各个变体填写对应值。
- 从Assets中拖出实例，在右侧属性面板选择状态或尺寸，检查文案、图标和间距是否符合需要。
如果页面上的两个按钮只是文案不同，可以优先在实例中修改文字；状态或结构需要统一切换时，再通过变体管理。组件的基本创建方法可见Figma组件与实例使用指南。
3. 在Pixso中制作三种按钮状态
想用中文属性面板整理一套按钮，可以进入Pixso创建练习文件。下面以绿色开启、蓝色开启和关闭三种状态，完成一组可复用的开关组件。
准备状态并创建组件
复制按钮并调整颜色和开关位置，得到三种需要的状态。分别选中按钮，从右键菜单创建组件，保持它们的图层结构和命名尽量一致。
组合变体并设置属性
同时选中三个组件，在右侧创建组件变体，形成组件集。为状态设置清楚的名称；需要分别管理颜色和开关时，可以新增对应属性，再给每个按钮填写属性值。
把实例放到实际页面
从组件面板拖出实例放到页面中，在右侧选择所需状态。切换后看按钮是否仍与文字、其他控件对齐；如果需要修改共用的圆角或间距，回到主组件处理。
4. 让组件集更容易被团队使用
- 属性名描述用途：“State=Disabled”比“属性1=灰色”更容易理解，也能减少仅凭颜色判断状态的情况。
- 同一组件保持一致结构：按钮里的文字和图标尽量使用相同图层名称，便于维护与替换。
- 将组件按任务归组：同一个图标的不同尺寸可以归在一起；功能不同的一组图标适合分别命名查找。
- 补充使用说明：让成员知道哪些状态可用于点击、哪些用于禁用展示，以及应该使用多大的点击区域。
可以从Pixso社区的组件资源开始，挑一个与项目接近的按钮练习属性切换，再整理自己的组件集。已有Figma组件文件时，先导入Pixso，检查常用实例后继续编辑。
参考：Figma组件变体指南。
