需用figma variants功能统一管理按钮状态与样式：一、创建state和style两个variant属性并设值；二、为每种组合填充对应视觉样式；三、绑定图层属性至变体值实现动态响应；四、通过实例切换验证交叉效果；五、规范命名、描述及发布流程确保团队协作一致性。
如果您在Figma中希望将多个按钮状态（如默认、悬停、禁用）和样式（如主色、次要、危险）统一管理为一个可复用的组件集，则需借助Variants功能实现结构化控制。以下是完成该操作的具体步骤：
一、创建基础按钮形状并定义属性
Variants依赖于明确命名的属性（Properties），因此需先为按钮图层设置逻辑清晰的属性名称与取值，以便后续自动识别为变体维度。属性命名需使用英文，且避免空格与特殊符号。
1、绘制一个矩形作为按钮基础形状，并添加文字图层（如“提交”）。
2、选中该矩形图层，在右侧属性面板点击“Create component”（或按Ctrl+Alt+K / Cmd+Option+K）将其转为组件。
3、双击组件进入主组件画布，在右侧“Component Properties”区域点击“+ Add property”，创建第一个属性，命名为State，类型选择Variant，依次添加值：Default、Hover、Disabled。
4、再次点击“+ Add property”，创建第二个属性，命名为Style，类型同为Variant，添加值：Primary、Secondary、Danger。
二、为每个变体组合建立实例图层
Figma会根据属性值的全部排列组合自动生成变体占位框，但需手动为每种组合填充对应的视觉表现（如颜色、边框、文字样式），确保每个变体实例具备独立设计。
1、在主组件画布内，Figma自动显示所有组合（例如：Primary + Default、Primary + Hover等），每个组合对应一个带虚线边框的占位区域。
2、点击任一占位区域（如Primary / Default），在其内部绘制实际按钮图形：设置背景色为#0066FF，圆角为8，文字为白色14px Medium。
3、点击另一占位区域（如Primary / Hover），修改背景色为#0052CC，其余保持一致；对Primary / Disabled，设背景色为#CCE0FF，文字颜色为#99AAB5，并将文字图层透明度调至60%。
4、依同样逻辑完成Secondary和Danger风格下的全部状态组合，确保每个占位区均有完整图层结构且无重叠或缺失。
三、设置变体属性绑定与交互反馈
仅完成视觉填充不足以支持设计系统中的动态切换，必须将图层属性（如填充色、文字颜色、透明度）与变体属性值关联，使实例能响应属性变更自动更新外观。
1、选中主组件内的某个按钮图层（如Primary Default的矩形），在右侧“Constraints & Layout”下方找到“Variant properties”区域。
2、点击“Bind to property”按钮，在弹出菜单中为Fill选择绑定State属性，并为不同取值指定对应颜色：Default→#0066FF，Hover→#0052CC，Disabled→#CCE0FF。
3、对文字图层，绑定Text color至State，设定Default/Hover为#FFFFFF，Disabled为#99AAB5；同时绑定Opacity至State，仅Disabled设为60%，其余为100%。
4、若需不同Style间共享同一状态行为（如所有Disabled都灰显），可在绑定时选择Style属性作为第二级控制，例如将Disabled状态下的文字不透明度统一由Style属性触发条件判断。
四、在实例中切换变体并验证组合逻辑
创建好主组件后，其实例将支持通过右侧面板直接切换属性值，从而快速预览任意状态与样式的交叉效果，这是检验变体结构是否正确的关键环节。
1、从Assets面板拖出该组件的一个实例到画布任意位置。
2、选中该实例，在右侧“Properties”区域展开State下拉菜单，依次切换为Hover、Disabled，观察按钮背景与文字是否同步变化。
3、再展开Style下拉菜单，切换为Secondary，确认此时按钮采用浅灰背景与深灰文字，且悬停态变为更深灰色，禁用态进一步降低对比度。
4、尝试同时选择Style = Danger与State = Hover，验证是否呈现红色加深的悬停效果——若未生效，返回主组件检查该组合占位区是否遗漏图层或绑定错误。
五、导出与协作规范设置
为保障团队成员正确使用该变体组件，需在组件描述、命名及发布流程中嵌入明确约束，防止误操作破坏变体结构完整性。
1、双击主组件进入编辑，点击右上角“Edit component description”，输入说明：“此组件含State（Default/Hover/Disabled）与Style（Primary/Secondary/Danger）两个变体维度，请勿删除任一占位区域或修改属性名。”
2、在主组件图层名称后添加前缀标识，例如重命名为“Button / Variants”，并在Assets面板中右键该组件，选择“Publish to library”以同步至团队库。
3、在团队文档中注明：所有新按钮变体必须基于此主组件复制扩展，禁止新建独立组件覆盖原有变体逻辑；若需新增状态（如Loading），须在主组件中添加State新值并补全全部Style组合图层。
