目标：在 Figma 里从 0 搭一套「卡片列表」组件体系，包含自动布局、可切换变体、可拉伸约束和可维护的文字/图标规则。做完这套，你可以直接拿去做信息流、商品列表、文章列表等常见页面。
1）新建 Frame（建议 1440 宽），打开 Layout grid（12 列，左右边距 80，gutter 20，可按团队规范调整）。
2）建立文本样式： （16/24 Semibold）、Body（14/20 Regular）、 （12/16 Regular）。
3）建立颜色样式：Text/Primary、Text/Secondary、Border/Default、Bg/Card、Bg/Hover。
这一步的意义是：后续组件只引用样式，改规范时不会满文件改颜色和字号。
1）新建一个 Frame 命名为 Card/ ，填充 Bg/Card，圆角 12，描边 Border/Default（1px）。
2）选中 Card/ ，Shift+A 开启 Auto layout：方向 Vertical；Padding 16/16/16/16；Item spacing 12。
3）设置 Resizing：Width = Fill container（或固定 320 方便演示），Height = Hug contents。
提示：只要你的内容都在 Auto layout 里，卡片高度会自动随内容变化，这是最核心的“省心点”。
1）在 Card/ 内部放一个标题 Text：应用 样式，内容示例「如何在 Figma 做可复用卡片组件」。
2）放一个摘要 Text：应用 Body 样式，开启 Auto height；在右侧面板勾选「Truncate text」可做一行/两行截断（Figma 新版可用）。
3）做元信息行：再建一个横向 Auto layout（Shift+A），放入日期、作者、标签等 文本，Item spacing 8；这行的 Height 设为 Hug。
4）让所有文本的 Resizing 都是 Fill container（宽度）+ Hug contents（高度），这样卡片宽度变化时文本会跟着换行/截断。
1）在 Card/ 顶部新增一个横向 Auto layout 容器，命名为 Row。
2）在 Row 左侧放一个图片容器：Frame 72x72，圆角 10，填充占位色；设置为 Fixed size。
3）在 Row 右侧放一个纵向 Auto layout 容器，命名为 Content；把标题/摘要/元信息都移进去；Content 宽度设为 Fill container。
4）Row 的对齐选择 Top（避免文字多行时垂直居中显得“飘”）。
1）选中 Card/ ，Create component（Ctrl+Alt+K）。命名：Card。
2）创建 Component set，添加变体属性：
• Size：S / M（通过 Padding 和图片尺寸区分，比如 S=12 padding+56 图，M=16 padding+72 图）
• Media：On / Off（Off 时隐藏缩略图，并把 Row 改为单列 Content）
• State：Default / Hover / Selected（描边/背景不同）
3）在每个变体里不要手动拖尺寸，尽量用 Auto layout + Resizing 来驱动变化，后期维护成本最低。
1）在 Component set 的 Hover 变体上，添加 Prototype：While hovering → Change to Hover（Smart animate 150ms）。
2）Selected 状态可用 On click → Change to Selected（或与交互组件配合）。
3）如果团队使用 Design System，建议把状态色、描边色都绑定到颜色样式，避免离散值。
1）卡片拉伸后文字不跟着变宽：检查文字/Content 容器的 Resizing 是否为 Fill container。
2）高度莫名变大：检查是否有某个子元素 Height=Fill container，导致把父容器撑开。
3）变体切换时布局乱跳：确认变体中层级结构一致（同名容器/相同 Auto layout 方向）。
4）想做两行截断：如果 Truncate 不可用，可用更短摘要 + 在文案规范里约束字数。
把 Card 组件放到 Components 页面，写一段用法说明：适用场景、最小宽度、推荐间距、文案字数建议（标题建议 18 字内，摘要建议 40-60 字）。然后在业务页面直接拖拽使用。
