目标：在 30 分钟内做出一套「可复用、可扩展、可维护」的按钮组件，能覆盖常见产品场景（主按钮/次按钮/文字按钮、不同尺寸、hover/pressed/disabled、深浅主题）。
适用：UI 设计师、交互设计师、需要建立组件库的团队。
Step 1：新建 Frame（快捷键 F），命名为 Button/ 。
Step 2：在内部放入文字层（Text），比如“确定”。
Step 3：选中外层 Frame，开启 Auto Layout（Shift + A）。
推荐参数：
1) Padding：左右 16，上下 10（后面会做成可切换尺寸）
2) Spacing：8（为未来加图标预留）
3) Alignment：居中
关键点：把按钮的宽高设为 Hug contents（内容自适应），这样文字变化时按钮会自动伸缩。
Step 4：设置圆角（比如 10）。
Step 5：为不同按钮类型准备样式：
Primary：填充主色（例如 #246BFD），文字白色；
Secondary：白底 + 1px 描边（主色），文字主色；
Text：无填充无描边，文字主色。
建议：颜色尽量引用 Styles（Color Styles）或 Variables，后续换主题不会崩。
Step 6：选中按钮外层 Frame，创建组件（Create component）。命名：Button。
Step 7：把文字层设置为可编辑（Text property）。在右侧属性面板里为文字创建属性：Label。
Step 8：如果你计划支持左侧图标，放一个 Icon 占位（16x16），并创建布尔属性：Icon（显示/隐藏）。
Step 9：复制组件 2~3 份，分别做 Primary / Secondary / Text 的样式。
Step 10：选中这几份组件，点击 Combine as variants（合并为变体）。
创建变体属性建议：
Type：Primary / Secondary / Text
Size：S / M / L（通过 padding 与字号控制）
State：Default / Hover / Pressed / Disabled
命名技巧：属性值用简短英文，避免空格与中文，团队协作更稳定。
两种常见做法：
1) 仅用变体（最稳）：设计稿里手动切换 State 变体；
2) 加交互（更像真实）：在 Prototype 里设置 Hover 切换到 Hover 变体，Pressed 切换到 Pressed 变体。
团队建议：组件库里保留变体，交互可选；保证交付可用性第一。
Step 11：把组件放进组件页（Components / Library 页面），统一命名与分组。
Step 12：在 Assets 面板确认组件可搜索；然后发布（Publish）到 Library。
Step 13：在另一个文件里验证：拖入 Button 后能切换 Type/Size/State，文字能编辑，Icon 开关生效。
1) 按钮宽度不跟文字走：检查外层是否 Auto Layout + Hug contents。
2) 文本被裁切：检查文本行高、Auto Layout 的 vertical padding 与对齐方式。
3) 变体太多难维护：优先保证 Type/Size/State 三个维度；不常用的放到次级组件。
4) 换主题很痛：颜色尽量引用 Styles/Variables，不要直接写死。
如果你时间不多，先做：Type=Primary/Secondary、Size=M/L、State=Default/Disabled。等团队用起来后，再补 Hover/Pressed 与 Text 按钮。
