做完这套按钮组件后，你会拥有一个可复用的 Button 组件：
1）尺寸：S/M/L；2）状态：默认/悬停/按下/禁用；3）结构：纯文字、左图标、右图标；4）宽度：内容自适应并保持内边距一致。
建议文件结构：新建一个页面命名为 Components，把所有按钮组件集中放这里，后续团队协作更清晰。
先定 4 个基础样式（可以按你的品牌色替换）：主色（Primary）、文字色（On Primary）、圆角（Radius=8）、间距（Padding X/Y）。
1）画一个 Frame（快捷键 F），填充主色，圆角 8。
2）把它设为 Auto layout：方向水平（Horizontal），间距 8。
3）设置内边距（Padding）：左右 16，上下 10（这是中号 M 的推荐值）。
4）在 Auto layout 里放一个 Text（按钮文字），字体 14/Medium，颜色 On Primary。
核心思路：尺寸差异只体现在 字号 和 内边距。
建议参数：
S：字号 12，Padding X=12，Padding Y=8；
M：字号 14，Padding X=16，Padding Y=10；
L：字号 16，Padding X=20，Padding Y=12。
操作：
1）把基础按钮做成组件（Cmd/Ctrl + Alt + K）。
2）复制 2 份，分别改成 S、L 的字号和 Padding。
3）把三个组件命名统一：Button/Primary，并准备合并为变体。
1）选中 S/M/L 三个组件，点击右侧面板的 Combine as variants。
2）把属性命名为：Size，值分别为 S、M、L。
3）检查：在实例上切换 Size 时，按钮宽度应自适应文字，Padding 不变形。
1）以 M 为例，复制出 4 个状态：Default / Hover / Pressed / Disabled。
2）颜色建议：
Hover：主色略微加深 6%-10%；Pressed：再加深 12%-18%；Disabled：背景改为灰（如 #E5E7EB），文字改为浅灰（如 #9CA3AF）。
3）把属性命名为：State，值：Default、Hover、Pressed、Disabled。
4）如果你要做原型交互：在 Prototype 里设置 Hover/Pressed 的切换即可。
1）在 Auto layout 里加一个 Icon（可以先用 16x16 的占位方块）。
2）做三种结构：None / Left / Right。做法是复制变体并调整 Icon 位置。
3）把属性命名为：Icon，值：None、Left、Right。
提示：Icon 的间距建议固定为 8；Icon 和文字垂直居中（Auto layout 默认即可）。
1）按钮宽度不自适应：检查外层 Frame 是否开启 Auto layout，且宽度不是 Fixed。
2）切换尺寸后 Padding 乱了：确保 Padding 只在外层 Auto layout 上设置，不要在内部文字上加额外约束。
3）图标把文字挤压：检查文字的 Resizing 为 Hug contents，必要时把文字设置为 Fill container。
4）禁用态仍可点击：原型里要给 Disabled 状态去掉交互，或单独做不可交互的连接。
1）Size=S/M/L 切换正常；2）State=Default/Hover/Pressed/Disabled 都存在；3）Icon=None/Left/Right 都存在；
4）文字长短变化时，按钮仍保持左右 Padding；5）命名统一，团队搜索“Button”能快速定位。
下一步建议加：Secondary（描边按钮）、Tertiary（文字按钮）、Danger（警告按钮）以及 Loading（带进度/旋转图标）。用同样的 Size/State/Icon 属性扩展，会很顺手。
