我们用 10 分钟做一个“可伸缩卡片组件”（Card）：它在不同内容长度、不同宽度、不同按钮文案下都能自动撑开、对齐不乱，并且能一键切换样式（默认/强调/禁用）。最终你会得到 3 个组件：Card、Tag、Button，以及一个可复用的卡片模板。
1）打开 Figma，新建一个 Frame（例如 1440×900）。
2）在右侧文本样式里创建 3 个常用样式：标题（20/28，Semibold）、正文（14/22，Regular）、辅助（12/18）。
3）把间距统一按 8 的倍数：8/16/24。后面所有 Auto Layout 的 padding、gap 都用这些值，复用起来才不会越做越乱。
1）画一个矩形做背景（圆角 16，描边 1px，填充白）。选中后按 Shift+A 开启 Auto Layout。
2）方向选 Vertical（竖向），Padding：24（上下左右都 24），Spacing between items：16。
3）在 Auto Layout 的 Sizing 里把 Width 设为 Fill container（或 Fixed 先也行），Height 设为 Hug contents。
这样 Card 的高度会跟着内容增长，属于“会自己长高的容器”。
1）在 Card 内新建一个 Frame，Shift+A 开启 Auto Layout，方向 Horizontal（横向）。
2）把这个头部行设置为：Width = Fill container，Height = Hug contents。
3）在头部行里放左侧标题文本（用标题样式），右侧放一个小按钮或图标（例如“更多”）。
4）关键：把头部行的 Alignment 设为 Space between（两端对齐）。这样左边标题再长，右侧操作依然贴右。
1）在 Card 内继续放一个正文文本层（正文样式）。
2）把文本的 Width 设为 Fill container，Height = Hug contents。确保文本不会固定高度，否则内容变化会溢出。
3）给正文一个示例长文本，检查：换行、行高、段落间距是否正常。
1）在 Card 内新建一行 Auto Layout（Horizontal）。Padding 设为 0，Gap = 8。
2）做一个 Tag：小圆角矩形 + 文本，开启 Auto Layout，Padding（上下 4，左右 10），圆角 999，Height = Hug contents。
3）复制 Tag 多个，观察：Tag 增加/减少时是否自动排布，Card 高度是否跟着变化。
1）做一个 Button 组件：横向 Auto Layout，Padding（10/16），圆角 12，文本用 14/20。
2）让 Button 的 Width = Hug contents，Height = Hug contents。按钮文案从“立即查看”改成更长的“立即查看详细教程”，检查按钮能否自动变宽。
3）在 Card 底部放两个按钮：主按钮 + 次按钮。按钮容器设置为 Horizontal、Gap=12、Width=Fill container，Alignment=Right（靠右）。
1）把 Tag、Button 变成组件（Create component）。
2）给 Button 做 3 个变体：Type=Primary / Secondary / Disabled。用 Variants 管理，而不是复制三份散落在画布上。
3）把整个 Card 也做成组件，并给 Card 加一个变体：State=Default / Highlight。Highlight 只改边框颜色和阴影即可。
- Card 高度是 Hug contents，内容多少都不会溢出。
- 头部行是 Space between，标题和右侧操作永远两端对齐。
- 文本层 Width=Fill container，长文本能自动换行。
- Tag/按钮都用 Auto Layout，文案变长布局不崩。
- 变体用 Variants 管理，不用复制粘贴硬凑状态。
想更“工程化”，可以把间距、圆角、颜色做成 Variables（变量），并用 Token 命名（例如 space/8、radius/16、color/primary）。以后做设计系统会省很多时间。
