应使用pixso变体功能统一管理按钮多状态：先创建各状态基础组件，再合并为变体集，定义status/color等属性并赋值，最后通过属性面板切换状态或绑定点击交互实现动态响应。
如果您在Pixso中设计按钮时需要支持多种状态（如开启/关闭、主色/次色、启用/禁用），但每次切换都要手动替换组件，则说明尚未使用变体功能。以下是创建变体组件以统一管理按钮多状态的详细操作步骤：
一、准备多个基础按钮组件
变体组件必须基于已创建的独立组件构建，因此需先完成各状态对应的基础组件。每个组件应具备明确的视觉区分，例如颜色、文字或边框样式差异。
1、在画布上绘制第一个按钮图形，设置为“开启-绿色”状态，并添加相应文字标签；
2、右键点击该按钮图层，选择「创建组件」，命名为“Button-On-Green”；
3、复制该按钮并修改填充色为蓝色，保持结构一致，右键创建组件并命名为“Button-On-Blue”；
4、再新建一个“关闭”状态按钮（如灰色背景+“关闭”文字），同样右键创建组件并命名为“Button-Off”。
二、合并为组件变体集
将多个同类型组件整合为一个变体集，是实现状态集中管理的前提。合并后所有组件将归属同一变体容器，可在右侧属性面板中统一调用。
1、按住 Shift 键依次点击画布上的三个按钮组件，确保全部被选中；
2、在右侧属性面板中找到「变体」区域，点击「创建组件变体」按钮；
3、此时画布上将生成一个新组件，其名称默认为“Component Variants”，可在图层面板中重命名为“Button-Variants”；
4、双击变体组件进入编辑模式，确认三个子组件均位于同一组件集中，且图层命名与之前一致。
三、定义变体属性与状态值
通过添加属性（如“Status”、“Color”），可为变体建立结构化分类逻辑，使状态切换具备语义化控制能力，便于后期与变量或交互联动。
1、选中画布上的“Button-Variants”组件（非进入编辑模式）；
2、在右侧「变体」面板中点击右上角三个点（更多选项），选择「新增属性」；
3、输入属性名称为“Status”，类型选择「字符串」，点击确认；
4、分别点击三个子组件，在右侧「变体」面板中为其“Status”属性赋值：第一个设为On，第二个也设为On，第三个设为Off；
5、再次点击「新增属性」，创建名为“Color”的属性，类型同为「字符串」，然后为前两个组件分别赋值Green和Blue，第三个留空或设为Gray。
四、在设计中调用与切换变体
变体组件拖入画布后，无需复制多个实例，仅需在右侧属性面板中更改属性值，即可实时切换对应状态，大幅提升设计一致性与复用效率。
1、从左侧资源面板或组件库中将“Button-Variants”拖入当前画布；
2、选中该实例，在右侧「变体」面板中展开属性区域；
3、点击“Status”下拉菜单，选择On，观察按钮自动切换为绿色或蓝色版本；
4、若当前显示为绿色版，可进一步点击“Color”下拉菜单，切换至Blue，按钮即时更新为蓝色开启态；
5、将“Status”改为Off，按钮立即呈现灰色关闭态，所有样式变更均由属性驱动，无须手动调整图层。
五、结合交互实现点击切换效果
当需要在原型中模拟真实用户操作（如点击按钮切换开启/关闭）时，可通过添加单击触发的变体切换交互动效，使状态变化具备响应性。
1、确保已切换至「原型」工作区，点击顶部工具栏的「原型」选项卡；
2、选中画布上处于“On”状态的变体实例，在其右侧边缘悬停鼠标，出现圆形控点；
3、长按控点并向下方另一个“Off”状态的变体实例拖拽连线，松开后弹出交互设置面板；
4、在动作类型中选择「单击触发变体切换」，目标属性选择“Status”，目标值设为Off；
5、同理，选中“Off”状态实例，在其右侧控点拖线连接回“On”状态实例，设置动作目标值为On；
6、点击预览按钮测试，点击按钮即可在两种状态间循环切换，交互动效已绑定至变体属性而非具体组件。
