我们用 10 分钟做出一套可复用的按钮组件：同一套组件里包含尺寸（S/M/L）、风格（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled）、以及可选的左/右图标。后续做页面时，你只要在右侧属性面板切换 Variant，就能快速得到正确的按钮。
1) 新建一个 Frame，命名为 Button/ 。
2) 在 Frame 里放一个文本层，内容写“按钮”，命名为 Label。
3) 选中外层 Frame，开启 Auto Layout（Shift + A）。方向选横向，间距先设 8。
4) 设置 Padding：左右 16，上下 10（先按中号 M 做一版）。
5) 让 Label 的宽度为 Hug contents；外层 Frame 的宽度也用 Hug contents。
1) 在 Label 左侧插入一个 16x16 的图标占位（可以用一个小方块或任意 Icon 组件），命名 Icon/Left。
2) 在 Label 右侧再插一个 16x16，占位命名 Icon/Right。
3) 先把两侧图标都隐藏（右侧面板点小眼睛），这样默认按钮只有文字。
4) Auto Layout 的 Alignment 选居中，让图标和文字垂直对齐。
我们先做 Primary。
1) 外层 Frame 填充色设为主色（例如 #1F6FEB 或你项目的品牌色）。
2) 文本颜色设为白色，字号例如 14-16 皆可。
3) 圆角 Radius 设为 10（你也可以用 8 或 12，关键是全局统一）。
4) 如果需要描边：Secondary/Ghost 以后再加 Stroke。
1) 选中外层 Frame，按 Ctrl + Alt + K（Mac：Cmd + Option + K）创建组件。
2) 在右侧点 Add variant，把组件转成 Variants 集合。
3) 建议命名属性（Property）如下（好读、好维护）：
Size：S / M / L
Type：Primary / Secondary / Ghost
State：Default / Hover / Pressed / Disabled
IconLeft：Off / On
IconRight：Off / On
复制出 3 个 Size：
1) S：左右 12，上下 8；图标 14 或 16 皆可，但要统一。
2) M：左右 16，上下 10（基准）。
3) L：左右 20，上下 12；文字可略大或保持一致。
技巧：只改 Padding + 字号即可，不要用固定宽度；保持 Hug contents，按钮文本多时会自然变宽。
1) Primary：实心填充 + 白字。
2) Secondary：浅色填充或白底 + 描边（Stroke 1px），文字用主色。
3) Ghost：无填充，只有文字（可保留轻描边或完全无描边）。
建议把颜色做成 Color Styles（如 Brand/Primary、Text/OnPrimary），避免以后全站改色要逐个改。
1) Hover：在 Default 基础上略加深（或加 4-8% 的叠加）。
2) Pressed：再更深一点，同时可以把阴影减弱或向下偏移 1px 表现按压感。
3) Disabled：降低不透明度（例如 40-60%），并确保对比度仍可读；同时把鼠标交互在原型里禁用（后面会做）。
1) IconLeft=Off：隐藏 Icon/Left。
2) IconLeft=On：显示 Icon/Left。
3) IconRight 同理。
注意：图标显示/隐藏会影响 Auto Layout 宽度，这是我们想要的效果。
1) 进入 Prototype 面板。
2) 从 Default 连接到 Hover：Trigger 选 While hovering，Action 选 Change to。
3) Hover 连接到 Pressed：Trigger 选 While pressing，Action 选 Change to。
4) Disabled 不要配置交互（或在使用时直接选 Disabled 状态）。
1) 全部按钮保持 Hug contents，避免做出“不同文案却固定宽度”的怪按钮。
2) 属性命名统一（Size/Type/State/IconLeft/IconRight），后续团队成员一眼就懂。
3) 颜色尽量用 Styles；未来换品牌色只改 Style。
4) 最少做一版“长文案按钮”检查溢出，例如“立即下载并开始使用”。
把这套按钮组件放进一个小型库页面：写上使用规范（何时用 Primary/Secondary、禁用态规则、图标使用规则），以后做海报、落地页、后台界面都会省很多时间。
