完成后你会得到一套可直接复用的按钮组件：支持不同尺寸（S/M/L）、不同样式（Primary/Secondary/Ghost）、不同状态（Default/Hover/Pressed/Disabled），并且所有按钮都遵循同一套内边距、圆角与字体规则。
1）新建一个 Frame，命名为 Button/ ，开启 Auto Layout（水平）。
2）设置 Padding：左右 16、上下 10；Item spacing：8；对齐：垂直居中。
3）放入两层：一个 Text（按钮文案），一个可选 Icon（建议 16x16）。把 Icon 放在 Text 左侧。
4）Text 建议使用样式：14/20，Medium；并把按钮高度交给 Auto Layout 控制，避免手动拉伸。
1）选中 Button/ ，创建组件（Create component）。
2）复制出 3 份，分别调整 Padding 与字体尺寸：
• S：左右 12，上下 8；字号 12/16
• M：左右 16，上下 10；字号 14/20
• L：左右 20，上下 12；字号 16/24
3）全选这 3 个组件，点击 Combine as variants，属性命名为 size，值为 S/M/L。
1）在组件集里再复制出不同外观：背景色、描边、文字色分别设置。
2）推荐的规则：
• Primary：实心底色 + 白字
• Secondary：浅底色 + 深色文字（或描边）
• Ghost：无背景，仅文字色（Hover 时给轻微底色）
3）把该属性命名为 type，值为 Primary/Secondary/Ghost。
1）继续扩展 variant 属性：命名为 state，值为 Default/Hover/Pressed/Disabled。
2）Disabled 建议同时降低背景与文字对比度，并将鼠标交互在原型里禁用。
3）Hover/Pressed 建议只做微小变化（例如背景亮度 +/- 6%），保持一致的交互语言。
1）在 Variables 里创建：color/brand、color/brand_hover、color/brand_pressed、color/text_on_brand 等。
2）把按钮圆角也做成变量：例如 radius/button = 10。
3）回到组件集中，把所有填充/描边/文字色都绑定到变量。这样以后改品牌色，只需改变量。
1）把组件拖进页面后，通过右侧属性面板快速切换 size/type/state。
2）如果需要图标按钮，新增一个布尔属性 icon，用“有/无图标”的变体控制 Icon 图层显隐。
3）当你发现某个页面出现了“手动改 padding 的按钮”，就说明组件还缺一个变体或规则，回到组件集中补齐即可。
• 文案导致按钮宽度异常：检查 Text 是否被设置为 Fixed width，建议用 Hug contents。
• 图标不对齐：确保 Icon 和 Text 都在同一个 Auto Layout 容器里，并且对齐为 Center。
• 变体太多难以管理：优先用 3 个属性（size/type/state），避免把颜色值写进属性名。
• 增加 Loading 状态（左侧 Spinner）
• 增加 Destructive 类型（危险操作）
• 与表单输入框/标签组件共用同一套变量与排版规范
