做完这套按钮组件，你可以在任何页面里直接拖拽使用，并且通过变体一键切换尺寸（S/M/L）与状态（默认/悬停/按下/禁用）。文字长度变化时按钮会自动撑开，内边距保持一致，不需要手动改宽高。
在开始画之前先把规则写清楚（这一步最省时间）：
1）尺寸：S / M / L 三档；
2）内边距：左右 padding 与上下 padding 固定；
3）圆角：与尺寸相关（例如 8/10/12）；
4）排版：字体字号、字重、行高固定；
5）状态：默认、Hover、Pressed、Disabled；
6）配色：背景色、文字色、描边色（若有）随状态变化。
1）新建一个 Frame，命名为 Button/ ；
2）选中 Frame，按 Shift + A 添加 Auto Layout；
3）把按钮文字放进 Frame（一个 Text 即可）；
4）在 Auto Layout 面板设置方向为水平（Horizontal），对齐为居中（Center）；
5）设置 Padding（左右/上下），并设置 Item spacing（一般按钮里只有一个 Text，间距可先为 0）；
6）把 Frame 的 Width/Height 设为 Hug contents（贴合内容）。
验证：把文字改长/改短，按钮应自动变宽，且 padding 不变。
如果你的产品里按钮经常带图标，建议把结构一次搭好：
1）在按钮文字左侧放一个 Icon（可以用 16x16 的矢量或组件）；
2）将 Icon 与 Text 都放在同一个 Auto Layout 里；
3）把 Item spacing 设为 6 或 8；
4）Icon 设置为 Fixed size，Text 保持 Hug contents。
这样以后切换“仅文字 / 图标+文字”就不需要重新画。
1）把 Button/ 做成组件（Create component）；
2）复制出 3 个版本，分别命名属性 Size=Small/Medium/Large；
3）每个尺寸版本分别调整：Padding、字体字号（如需要）、圆角；
4）仍保持 Hug contents，确保文字变化时三档尺寸都能自动适配。
建议参考（示例）：
S：左右 12 上下 6；M：左右 16 上下 8；L：左右 20 上下 10。
1）在组件集里新增属性 State=Default/Hover/Pressed/Disabled；
2）为每个状态设置填充色/描边色/文字色；
3）Disabled 状态建议：降低不透明度或使用中性色，并把鼠标样式/交互在原型里禁用（如果你会做 Prototype）；
4）保持布局不变，只改视觉样式，避免状态切换时按钮“跳动”。
建议你至少做这 3 件事：
1）把文字层命名为 Label，确保在实例里能直接改字；
2）如果有 Icon，把 Icon 组件做成可替换（Swap instance）；
3）如果有左右图标两种，增加属性 IconPosition=Left/Right/None（可选）。
1）文字从 2 个字改到 10 个字，按钮是否仍好看；
2）S/M/L 切换时是否只是“更松/更紧”，不会改变结构；
3）状态切换时是否只有颜色变化，没有尺寸变化；
4）对齐是否都是 Center，padding 是否一致；
5）命名是否清晰：Button / Size / State。
如果按钮不随文字变化，通常是以下原因之一：
1）Frame 不是 Hug contents，而是 Fixed；
2）Text 被设置成 Fixed width，导致换行或裁切；
3）Auto Layout 没开（忘了 Shift + A）；
4）外层还有一个固定宽度的容器限制了它。
如果你在做设计系统，建议把按钮的颜色用 Color Styles 或 Variables 管起来。这样改一次主题色，所有按钮都能统一更新，不用逐个改。
