你将完成什么
本教程会带你在 Figma 里做一个「响应式卡片（Card）」组件：标题/描述可变长不溢出，图片固定比例，按钮随文案增长，卡片宽度变化时整体自动重排。你做完后可以直接复用到任何信息流/商品/文章卡片。
准备：设置一个可复用的栅格与间距体系
- 新建一个 Frame（建议 360x640 或 1440x900）。
- 在右侧 Layout grid 添加 4/12 栅格（移动端 4、桌面端 12），把 Gutter 设为 16，Margin 设为 16/24。
- 统一间距：建议用 4 的倍数（4/8/12/16/24/32）。后面 Auto Layout 的 padding 和 gap 都用这套数值。
第 1 步：做卡片外壳（容器 Auto Layout）
- 画一个 Frame，命名为 Card，开启 Auto Layout（Shift + A）。
- 方向选择 Vertical，Spacing between items（gap）设为 12。
- Padding 设为 16（四边一致），圆角 12，描边 1（#E6E6E6 或你项目里的边界色）。
- 关键：把 Card 的 Width 设为 Fill container，高度保持 Hug contents。
这样卡片会随着外层容器宽度变化自动拉伸，高度由内容决定。
第 2 步：图片区固定比例（不变形）
- 在 Card 里插入一个 Frame，命名 Media，设置高度 180（或 160），宽度 Fill container。
- 把 Media 的 Clip content 打开，圆角 10。
- 放一张图片进来，把图片的约束设为 Fill（填充），并在图片的属性中选择 Crop / 适当调整裁切。
要点：容器控制比例，图片用 Fill/Crop，避免缩放挤压导致变形。
第 3 步：文字区自适应（标题/描述可变长）
- 在 Media 下方插入一个 Frame，命名 Content，开启 Auto Layout（Vertical），gap 8，Width = Fill container。
- 标题文本：建议 16-18px、Semibold，Width = Fill container。长标题用 2 行截断时，可在文本设置里控制行数（或用更短标题/辅助信息）。
- 描述文本：14px Regular，颜色稍弱（如 #666）。同样设置 Width = Fill container。
注意：内容容器 Content 必须 Fill container，文本也要 Fill container，才能在卡片变宽时自动换行与占满。
第 4 步：按钮行（左右分布 + 文字增长不挤压）
- 在 Content 下面插入一个 Frame，命名 Actions，开启 Auto Layout（Horizontal），gap 8，Width = Fill container。
- 把 Actions 的 Primary axis 设为 Space between（两端对齐）。
- 左侧放一个「标签/时间」文本（Hug contents）。
- 右侧放一个按钮组件（推荐：按钮容器 Auto Layout，padding 10x14，圆角 10）。按钮宽度 Hug contents。
这样按钮文案变长时仍能自己增长，不会把左侧挤得乱掉；卡片变宽时两端保持对齐。
第 5 步：做成组件 + 组件属性（快速出多种样式）
- 选中整个 Card，Create component（Ctrl/Cmd + Alt + K）。
- 把图片替换为组件属性：例如用 Instance swap 或把图片做成可替换的嵌套组件。
- 给按钮做 Text property（按钮文案可改），给标签/描述做 Text property（快速生成多条不同内容卡片）。
- 可选：做一个横版 Variant（Media 左、Content 右）。做法是把 Card 的 Auto Layout 改为 Horizontal，Media 固定宽（如 120-160），Content Fill container。
常见踩坑与排查清单
- 卡片不跟随父级变宽：检查 Card 宽度是否 Fill container；外层父级是否也是 Auto Layout 或有明确宽度。
- 文字不换行：检查文本框宽度是否 Fill container；文本的 Resizing 是否为 Auto height（高度随内容）。
- 图片拉伸变形：不要用 Scale 直接缩放图片；用容器固定尺寸 + 图片 Fill/Crop。
- 按钮把左侧挤没：Actions 用 Space between；左侧文本 Hug contents，右侧按钮 Hug contents。
- 间距不统一：统一用 4 的倍数；padding 和 gap 不要随手写奇怪数值。
进阶：把它变成真正的「响应式组件」
- 给 Card 做两套 Variant：移动端（竖排）/ 桌面端（横排），并在命名中使用清晰属性（Layout=Vertical/Horizontal）。
- 如果你用 Design System：把颜色、圆角、字号都绑定到样式（Styles）或 Variables，后期全局替换更轻松。
- 最后把这个 Card 放进一个列表容器（Auto Layout Vertical），列表项间距 12-16，再试着把列表宽度从 320 拉到 1200，检查是否所有元素都稳定。
