目标是在 Figma 里做一个「卡片 Card」组件：内部有标题、正文、按钮；卡片宽度可以自由拉伸，内容会自动保持对齐与间距；最后把它做成可复用的组件并加上变体（有/无按钮、紧凑/舒展）。
1）新建一个 Frame（快捷键 F），命名为 Card。
2）在 Card 里放 3 个元素：标题 Text、正文 Text、按钮（一个小 Frame 或 Rectangle + Text）。
3）全选这 3 个元素，点击右侧「Auto layout」（Shift + A），方向选 Vertical。
4）把 Padding 设为 16（或 20），Item spacing 设为 12（可按设计规范调整）。
1）选中 Card（Auto Layout 容器），在宽度（W）处先设一个初始值，比如 360。
2）把 Card 的「Resizing」设置为：Horizontal = Fill container（如果 Card 外面还有父容器）或 Fixed；Vertical = Hug contents。
3）依次选中标题、正文：将它们的 Horizontal resizing 设置为 Fill container（保证文字区域能跟随卡片宽度变化）。
4）按钮这一行如果要右对齐：把按钮所在的容器设置为 Horizontal = Fill container，然后在 Alignment 里选 Right；或者把按钮单独设为 Hug contents 并在容器内右对齐。
1）选中正文 Text，确保 Text 的宽度是 Auto layout 控制的（通常配合 Fill container），这样卡片变窄时会自动折行。
2）如果你希望标题最多两行：在 Text 设置里限制行数（或用更短标题）；确保不会把按钮挤出容器。
3）检查 Card 的 Padding 与 Item spacing：变窄/变宽时都应该保持一致，不会出现元素互相压住。
做法 A（推荐）：按钮单独做成组件，然后在 Card 组件里做变体。
1）选中 Card，Create component（Ctrl/⌘ + Alt + K）。
2）在组件面板中 Duplicate 生成一个 Variant：一个叫 WithButton，一个叫 NoButton。
3）在 NoButton 变体里删掉按钮那一行；观察 Auto layout 是否会自动收紧高度（Vertical = Hug contents 才会生效）。
4）再做一组变体：Density=Compact / Comfortable（通过调整 Padding 与 Item spacing 实现）。
□ 卡片宽度拉伸时：标题/正文仍然左右对齐，间距不变。
□ 卡片变窄时：正文自动折行，按钮不会被挤出边界。
□ WithButton/NoButton 之间切换：高度自动变化，没有多余空白。
□ Compact/Comfortable 切换：只改变密度，不改变对齐逻辑。
1）拉伸时文字不跟着变宽：把 Text 的 Horizontal resizing 改为 Fill container。
2）删按钮后高度不收缩：Card 的 Vertical resizing 必须是 Hug contents。
3）按钮无法右对齐：让按钮所在的那一行（容器）先 Fill container，再设置对齐为 Right。
