最终我们会得到一套“按钮组件（Button）”的可复用规范：支持主/次/幽灵三种风格，包含 Default / Hover / Pressed / Disabled 四种状态，并且能在不同文案长度、不同尺寸下自动撑开且保持内边距一致。你可以直接把它放进自己的设计系统库。
1）新建一个 Frame，命名为 Button/ 。
2）在 Frame 内放一个文本层（Text），比如“按钮”。
3）选中 Frame，按 Shift+A 开启自动布局（Auto Layout）。方向选 Horizontal，Alignment 选 Center。
4）设置 Padding：左右 16、上下 10；Item spacing 设为 8（用于后续加图标时的间距）。
5）设置圆角 8（或按你的品牌规范），并给一个基础填充颜色（例如 #2563EB）。
1）选中文本层，Text 的 Resizing 设为 Auto width。
2）选中外层按钮 Frame，将其 Resizing 设为 Hug contents（宽度与高度都 Hug）。
3）把按钮做成组件：Cmd/Ctrl + Alt + K。
4）测试：把文本改成更长的文案（如“立即下载高清海报模板”），按钮应自动变宽，但内边距保持不变。如果不对，检查是否真的开启了 Auto Layout，以及按钮 Frame 是否 Hug。
1）在按钮内新增一个 16x16 的 Icon（可以先用简单的矩形占位）。
2）把 Icon 放在文本左侧，Auto Layout 的 Item spacing 会自动生效。
3）为 Icon 设定 Resizing 为 Fixed，并在 Auto Layout 的 Align 里保持垂直居中。
1）选中 Button 组件，右侧点击 “+” 创建 Variants（组件集）。
2）创建属性：Type=Primary/Secondary/Ghost；State=Default/Hover/Pressed/Disabled。
3）分别调整样式：
- Primary：实心填充；Hover 时加深 6%-10%；Pressed 时再加深并可轻微内阴影；Disabled 降低不透明度到 40%-60%。
- Secondary：浅色填充或描边；注意 Hover/Pressed 只做轻微变化，保持克制。
- Ghost：无填充，仅文字/图标；Hover 用浅底或轻微描边提示可点击。
1）进入 Prototype 面板，给 Default 变体添加交互：While hovering → 切到 Hover（Smart animate，200ms）。
2）给 Hover 添加：While pressing → 切到 Pressed（Smart animate，100-150ms）。
3）Pressed 添加：Mouse up → 回到 Hover（或 Default）。
4）Disabled 不添加交互，避免误导。
- 文案再长也不会挤出圆角或贴边（Padding 固定）。
- 图标/文字始终垂直居中，间距一致（Item spacing）。
- 变体命名清晰：Type 与 State 两个维度能组合。
- Hover/Pressed 的变化幅度不过度（优先通过亮度/透明度/描边细微变化）。
- 组件可直接复制到设计系统页面，并能被团队复用。
如果你的产品有尺寸体系，可以再加一个 Size 属性（S/M/L），对应不同 padding 与字号；也可以增加 IconOnly 按钮（只图标），但要保证可点击热区不小于 40x40。
