目标是做一套可复用的「按钮 + 信息卡」组件：内容变长会自动撑开，改文案不需要手动拉框；同时用变体管理默认/悬停/禁用状态，方便后续交付与维护。
如果你习惯用 Design Token，可以先准备：字号（12/14/16）、圆角（8）、间距（8/12/16）、描边（1）、阴影（轻）。没有也不影响本教程继续。
1）创建按钮容器：新建一个 Frame，按 Shift + A 让它变成 Auto Layout。
2）放入文本：在容器里输入按钮文案（例如“立即下载”）。
3）设置内边距与间距：右侧 Auto Layout 面板设置 Padding：左右 16、上下 10；Spacing 设为 8（如果后面会加图标）。
4）关键：Hug / Fill 的正确组合
按钮容器的宽度一般设为 Hug contents（内容自适应）；高度也可 Hug。文本层保持 Hug。这样文案变长，按钮会自动变宽。
5）加图标（可选）：在文本左侧放一个 16x16 的图标，Spacing=8。之后你可以用变体做“带图标/不带图标”。
6）命名与组件化：选中按钮容器，Ctrl + Alt + K 创建 Component，命名建议：Button / Primary。
1）创建 Variants：选中组件，在右侧点击 “Add variant”。属性命名为 State。
2）默认（Default）：背景主色、文字白色；描边可无。
3）悬停（Hover）：背景颜色加深 5%~10%，或加轻微阴影；不要改变尺寸（避免页面抖动）。
4）禁用（Disabled）：降低不透明度（例如 40%~60%），并确保对比度仍可读。
小技巧：如果你有交互原型需求，可以在 Prototype 中把 Default 的 “While hovering” 连到 Hover 变体。
1）卡片外层：创建 Frame，Shift + A 变 Auto Layout，方向选 Vertical。
2）Padding 与间距：Padding=16；Item spacing=12；圆角=12；背景白色或浅灰。
3）放入内容结构：建议三段：
（a）标题行：标题文本 + 右侧小标签（可选）
（b）正文简介：2~3 行文本
（c）操作区：放入你刚做的 Button 组件
4）关键：让标题与标签同排不挤：标题行用 Horizontal Auto Layout，标题设为 Fill container，标签设为 Hug contents。这样标题会自动占满剩余空间。
5）关键：让按钮对齐到右侧：操作区再做一层 Horizontal Auto Layout，把 “Alignment and spacing” 设为 “Space between”，左边留空占位（或放提示文字），右边放按钮。
坑 1：内容变长但容器不变：检查容器是否真的开启 Auto Layout；检查宽高是否被设成 Fixed；改为 Hug contents 或 Fill container。
坑 2：文本被压缩/省略：检查文本层是否被设成 Fixed width；把文本宽度设为 Fill container，或在需要时设置为 Hug。
坑 3：改文案后间距乱了：把间距统一交给 Auto Layout 的 Item spacing，不要用手动对齐的空白矩形充当间距。
坑 4：Hover 变体大小不一致：不同状态不要改 Padding/字体大小；只改颜色、阴影、描边等视觉属性。
按钮：Button / {Type} / {State}，例如 Button / Primary + State=Default/Hover/Disabled。
卡片：Card / Info；内部结构用明确层级命名：Header、Body、Actions。
当你把页面里所有“间距”都交给 Auto Layout 管理时，后续改文案、换语言、适配不同屏幕尺寸，会轻松很多。
