做完这套练习，你会得到 2 个可复用组件：按钮（Button）与卡片（Card）。它们都具备：自动布局（Auto Layout）、可配置属性（Variant/Component Properties）、可伸缩约束（Constraints/Resizing），并且命名与结构足够规范，后续扩展「禁用 / 加载 / 图标位置 / 不同密度」时不会推倒重来。
1）新建一个页面（Page）命名为 Components。
2）准备基础文字样式（Text Styles）：建议至少有 Body/14、Body/16、Caption/12。
3）准备基础颜色样式（Color Styles）：例如 Primary/500、Primary/600、Gray/50、Gray/200、Gray/600、White。没有设计规范也没关系，先用任意颜色完成结构，后续再统一替换。
1）画一个 Text：内容写「按钮」，应用 Body/14 或 Body/16。
2）选中文字，按 Shift + A 添加 Auto Layout，得到一个 Frame（这就是按钮容器）。
3）在右侧 Auto Layout 设置：
4）给容器加样式：圆角 8；填充 Primary/500；文字颜色 White。
5）把容器命名为 Button/ ，把文本层命名为 Label（习惯性命名会让团队协作省很多时间）。
关键点是 Resizing（尺寸策略）：
提示：如果 Fill container 不可选，通常是因为父级不是 Auto Layout，或者按钮本身没有放在支持填充的容器中。先给父级加 Auto Layout 再试。
1）选中 Button/ ，按 Ctrl/Cmd + Alt + K（Create component）。
2）在右侧点击「Add variant」生成组件集（Component set）。
3）先做 2 个维度的变体（足够覆盖大多数项目）：
4）实现方式建议：
命名建议：组件集命名为 Button，变体属性名保持简短统一（Type/State），避免混用中文和英文。
1）新增第三个属性 Size：S / M / L。
2）图标：在 Label 左侧放一个 16x16 的占位图标（可用简单几何形状），并把图标层命名为 Icon。
3）新增属性 Icon：None / Leading / Trailing。
小技巧：不要用绝对定位硬摆图标，尽量依赖 Auto Layout 的顺序与间距，这样内容变化时结构更稳定。
1）新建一个 Frame，按 Shift + A 变成 Auto Layout。
2）卡片结构建议：
3）外层容器设置：
4）把 Card 做成组件，并做一个属性 Density：Comfortable / Compact。
做一个简单的列表（List）容器（垂直 Auto Layout，Spacing 12），放入多张 Card 实例。你会立刻看到：当卡片宽度变化、描述变长、按钮切换不同状态时，结构是否仍然稳定。
1）为什么我做的按钮一拉宽文字就跑偏？ 检查按钮容器是否为 Auto Layout，且内部对齐设置为居中；同时确认文本层没有被设置成固定宽度导致换行。
2）为什么 Fill container 选不了？ 通常是父级不是 Auto Layout。把父级也设置为 Auto Layout，再把子级改为 Fill。
3）要不要上来就做很多变体？ 不建议。先保证结构正确，再逐步加 Type/State/Size/Icon。变体爆炸是组件系统最常见的维护成本。
