目标是做一个“商品/文章卡片”组件：包含封面、标题、描述、标签、价格/按钮等常见结构。它需要满足三件事：可响应（宽度变化不会炸版）、可复用（换文案/换图片不用重排）、可批量喂数据（用组件属性或变体快速生成多张卡片）。
1）新建 Frame（例如 1440×900），在右侧把 Layout grid 设成 12 栅格（可选）。
2）新建一个卡片容器 Frame，先给一个初始宽度（例如 320），并设置圆角（例如 12）与描边/投影（按你项目风格）。
3）关键：把卡片容器的 Auto Layout 打开（Shift + A）。方向选择 Vertical，Padding 设 16/16/16/16，Item spacing 设 12。
1）在卡片里放一个封面 Frame（命名为 Cover）。
2）Cover 的 Auto Layout 不一定要开，但建议把它设置成固定高度（例如 180），宽度跟随父级。
3）把 Cover 的 Resizing 设为：Width = Fill container，Height = Fixed。这样卡片宽度变化时，封面永远铺满。
4）把图片作为 Fill（右侧 Fill → Image）。如果你想要封面始终裁切但保持视觉中心，用 Image 的 Crop 调整焦点。
1）在 Cover 下方新增一个内容容器 Frame（命名 Content），开启 Auto Layout，方向 Vertical，Item spacing 6，Width = Fill。
2）标题 Text：建议 16/18px、Medium，Resizing：Width = Fill，Height = Hug contents。
3）描述 Text：建议 12/14px、Regular，设置最多 2~3 行（可以用文本框高度 + Clip content 或者用设计规范约束）。Resizing 同样 Width = Fill。
4）小技巧：标题与描述都不要用固定宽度；让它们 Fill container，卡片就能自然响应。
1）做一个标签行 Frame（命名 Tags），开启 Auto Layout，方向 Horizontal，Item spacing 8，Wrap 可按需要开启（新版本 Figma 支持）。
2）每个 Tag 做成小组件：Auto Layout + Padding（8/4）+ 圆角（999）+ 轻背景色。这样未来换字不会影响整体排版。
3）如果你担心标签过多导致撑高卡片：给 Tags 设 Max height 并 Clip content，或只展示前 2 个标签。
1）新建 Bottom 行 Frame，Auto Layout Horizontal，Align = Space between，Width = Fill。
2）左侧放价格/时间等元信息（Text 或小组件），右侧放按钮（Button 组件）。
3）按钮组件建议做成：Auto Layout + Padding（12/8）+ 圆角（8）+ 文字居中，并把按钮宽度设为 Hug，避免被拉伸变形。
把卡片整体做“可响应”，通常就看这四条：
1）卡片容器：Width = Fixed 或 Fill（视使用场景）；Height = Hug。
2）Cover：Width = Fill；Height = Fixed。
3）所有文本：Width = Fill；Height = Hug。
4）底部行：Width = Fill；内部用 Space between 或 Auto Layout 约束。
检查方式：拖动卡片宽度，看标题是否能自动换行、按钮是否保持 Hug、间距是否仍然正确。
1）选中卡片容器 → Create component。
2）把可变内容做成 Component properties：标题/描述文本、标签开关、按钮文案、价格文案等。
3）封面图片可以用“Swap instance”或保留为 Fill，搭配不同的示例图片；团队里如果有统一素材库，建议把封面做成可替换的嵌套组件。
如果你要交付给研发并在设计系统里长期复用，建议加变体：
1）Default：普通描边/阴影。
2）Hover：描边加深或阴影增强（不要同时改太多属性，避免“跳动”）。
3）Disabled：降低不透明度，按钮禁用样式。
用 Variants 管理这些状态，命名如 State=Default/Hover/Disabled。
1）命名清晰：Card/Cover/Content/Tags/Bottom。
2）Spacing 统一：Padding 与间距使用 4/8 的倍数。
3）文本可换行：标题/描述都允许换行，避免固定宽度。
4）组件属性齐全：至少可改标题/描述/按钮文案。
5）拖拽验证：把卡片宽度从 280 拉到 420，布局不崩。
Q：为什么拖宽度时内容不跟着变？ A：检查子层是否还在 Fixed width，把它们改成 Fill container。
Q：按钮被拉得很宽很丑？ A：按钮本体用 Hug contents，并确保所在行用 Space between，而不是让按钮 Fill。
Q：标签太多把卡片撑得很高？ A：限制展示数量或给标签行设置最大高度并 Clip。
