做完这套按钮组件后，你会得到一组可以直接复用的按钮（含文字按钮、图标+文字按钮），并且具备默认/悬停/按下/禁用等状态，能在不同宽度容器里自适应伸缩。
1）新建一个Frame作为组件画布（建议宽度 400+）。
2）准备两种文字样式：主按钮（如 14/20 Semibold）与次按钮（如 14/20 Medium）。
3）准备一套颜色变量（填充、描边、文字），至少包含：Primary / Primary Hover / Primary Press / Disabled。
1）画一个圆角矩形作为按钮背景（例如 8px 圆角）。
2）在背景上放一段文字（例如“确定”）。
3）选中文字+背景，按 Shift+A 启用 Auto Layout。
4）设置 Auto Layout：方向 Horizontal；Padding 左右 16、上下 10；Item spacing 8；对齐 Center。
5）让按钮高度由内容决定：不要手动写死高度，尽量通过 padding 控制。
1）在文字左侧放一个 16x16 的图标（可用简单的箭头/加号）。
2）保证图标与文字都在同一条 Auto Layout 流里，间距由 Item spacing 控制（建议 8）。
3）把图标设为“固定尺寸”，避免按钮拉伸时图标变形。
1）默认按钮宽度：将按钮容器设为 Hug contents，这样按钮会随文字长度变化。
2）需要占满容器时：把按钮容器宽度改为 Fill container，同时保持内部内容居中。
3）文字溢出策略：如果你做的是导航/工具栏按钮，建议保持 Hug；如果是表单主按钮，建议提供一个“Fill”变体。
1）把按钮组件创建为 Component（Ctrl+Alt+K / Cmd+Option+K）。
2）复制出 4 份：Default、Hover、Pressed、Disabled。
3）选中这4个组件，合并为 Variants（右侧 Variants → Combine as variants）。
4）设置 Variant 属性：State=Default/Hover/Pressed/Disabled。
5）分别修改每个状态的填充/描边/文字颜色（禁用状态注意降低对比度）。
1）再增加一个 Variant 属性：Size=S/M/L。
2）S/M/L 的差别主要在 padding 与字号：例如 S（12/16, padding 12x8），M（14/20, padding 16x10），L（16/24, padding 20x12）。
3）不要只放大圆角：圆角也要按尺寸微调（如 6/8/10）。
1）在 Prototype 面板里，把 Default 的 On hover → Hover。
2）Hover 的 On press → Pressed；On click → Default。
3）Disabled 状态不设置交互。
4）这样在演示原型时，按钮会有真实的反馈。
1）按钮拉伸时文字不居中：检查 Auto Layout 对齐是否为 Center，且文字没有被设为 Fill。
2）图标被拉伸：选中图标，宽高改为 Fixed，必要时开启“Scale”以外的约束。
3）不同状态尺寸不一致：确保所有 Variant 共享同样的 Auto Layout 结构（层级一致）。
给组件命名建议：Button / Primary、Button / Secondary；并在描述里写清楚 Size 与 State 的用法。把这套组件放进你的 Design System 页面，以后做项目会省很多时间。
