目标：在 Figma 里做一个「卡片组件」：标题、说明、标签、按钮都可替换；卡片宽度可拉伸；内容多少不同也能自动撑开；并且能在列表里一键重复使用。
本文按“先搭骨架 → 再做可替换 → 最后做可复用”的顺序走，照着做 20-30 分钟就能完成。
1）新建一个 Frame（快捷键 F），比如 1200×800，用于放组件和预览。
2）给 Frame 加 Layout grid（右侧面板 Layout grid）做参考：12 列、左右 margin 80、gutter 20（你也可以用 8pt 体系自己定）。
3）在页面左上角放一行文字备注：本文件使用 8pt 间距体系（8/16/24/32）。后续间距保持统一更显“专业”。
1）画一个矩形作为卡片背景（R），圆角 12，填充白色，描边 1px #E9E9E9，阴影可选（0, 6, 20, 10%）。
2）选中矩形，按 Shift+A 开启 Auto Layout。你会发现它变成了一个带 padding 的容器。
3）右侧 Auto layout 设置建议：
4）把卡片宽度设为 Fill container（填充容器）或固定宽度（比如 360）都行：如果你后面要做响应式列表，建议用 Fill container。
1）在卡片容器里放一个水平 Auto Layout（Shift+A），命名为 Header。
2）Header 设置：
3）在 Header 里放两样东西：
4）关键点（避免挤压）：
这样当卡片变窄时，标题会先换行或截断（取决于你是否开启文本自动换行），而 Tag 不会被压扁。
1）在卡片容器里新增一个垂直 Auto Layout，命名为 Body，Item spacing 8。
2）在 Body 里放：
3）如果你希望说明文本在内容很少时也不要“塌”，不要用固定高度；让它 Hug contents。Auto Layout 会自动撑开。
1）新增一个水平 Auto Layout，命名为 Actions。
2）放两个按钮（文字 + 背景矩形）：例如“查看详情”“复制链接”。
3）按钮做法建议：
4）Actions 对齐玩法：
1）检查卡片最外层容器（Card）：宽度设置为 Fill container（推荐）或固定。
2）检查内部横向容器（Header / Actions）：宽度也设为 Fill container。
3）检查文本：标题/说明文本设为 Fill container，避免出现“内容被挤到很窄”的问题。
4）如果你发现某个元素撑破：大概率是它被设成了 Fixed width；改成 Hug contents 或 Fill container 即可。
1）选中整个卡片容器，按 Ctrl+Alt+K（或右键 Create component）创建组件，命名：Card / Tutorial。
2）做两个常见变体（Variants）：
3）把“Tag”做成可选：你可以在变体里隐藏它，形成「有标签/无标签」两种版本。
1）新建一个垂直 Auto Layout 容器作为列表（List），间距 16，宽度 Fill container。
2）把 Card 组件拖 3-5 个进列表。
3）对每张卡片替换不同长度标题、不同长度说明，检查是否满足：
做到这里，你就拥有了一张可以复制到任何项目里用的“自适应卡片组件”。后续只要替换内容、加图标/封面图，版式就会自动跟上。
