你将做出什么
目标：做一张“图文卡片”组件，并扩展出 3 个状态（默认/悬停/禁用）与 2 个尺寸（S/M）。最后你会得到一个可以反复复用、替换内容也不会乱版的组件。
准备：新建 Frame 与基础样式
- 新建一个 Frame（快捷键 F），尺寸先随意，例如 360×240，作为演示画布。
- 准备 3 个颜色样式：背景（白/浅灰）、描边（#E5E7EB 类似的浅灰）、文字（深色）。也可以先不建样式，后面再统一抽。
步骤 1：搭卡片容器（Auto Layout 外层）
- 画一个矩形作为卡片背景（例如 320×200），圆角 12，填充白色，描边浅灰 1px。
- 选中矩形，按 Shift + A 把它变成 Auto Layout 容器（这一步会把“矩形”变成“Frame”）。
- 在右侧 Auto Layout 里设置：方向为垂直（Vertical），Padding = 16（四周），Item spacing = 12。
- 在尺寸上把 Width 设为 Fixed（或 Fill container，视你页面布局），Height 先保持 Hug contents（内容自适应）。
步骤 2：放入封面图区域（可替换）
- 在卡片容器里添加一个 Frame 作为封面图容器，命名为 Cover。
- 选中 Cover，设置 Height = 120（Fixed），Width = Fill container，圆角 10，填充任意浅色占位。
- 把 Cover 的 Clip content 打开（裁切内容），这样之后替换图片不会溢出。
- 给 Cover 添加一层渐变蒙版（可选）：加一个矩形覆盖在 Cover 上，填充从透明到半透明黑的线性渐变，用于提升文字可读性。
步骤 3：文字区（标题 + 描述）
- 在卡片容器里新建一个垂直 Auto Layout 的 Frame，命名为 Text，Item spacing = 6。
- 在 Text 里放一个标题 Text：字号 16-18，字重 Semibold，行高 24；把标题设置为 Width = Fill container，Height = Hug contents。
- 再放一个描述 Text：字号 12-14，颜色略浅；同样 Width = Fill container，Height = Hug contents。
- 如果你希望描述最多两行：在右侧 Text 设置里把 Truncate 打开并设为 2 lines（Figma 新版支持）。不支持的话就手动控制字数或用组件属性约束。
步骤 4：按钮/标签区（可选，演示组件扩展）
- 在卡片容器底部添加一个水平 Auto Layout 的 Frame，命名为 Footer。
- Footer 设置：Horizontal，Item spacing = 8，Width = Fill container，内容对齐左；如需要右侧按钮，把主轴对齐设为 Space between。
- 在 Footer 放一个 Tag（小胶囊）：圆角 999，Padding 6/10，文字 12。
- 再放一个按钮（可选）：圆角 10，Padding 10/14，文字 12-14。
步骤 5：做成组件（Component）并加属性
- 选中整张卡片，按 Ctrl + Alt + K（Mac：⌥⌘K）创建组件。
- 把标题、描述分别创建 Text property（在右侧属性里 Create property），这样使用者可以直接在实例上改文字。
- Cover 可以创建 Image fill property（把封面设置为图片填充后创建属性），这样实例上可直接替换图片。
步骤 6：用 Variants 做状态（默认/悬停/禁用）
- 复制组件 2 次，选中 3 个组件后点击 Combine as variants。
- 创建属性 State：Default / Hover / Disabled。
- 在 Hover：加一点阴影或把描边加深；在 Disabled：整体透明度降到 60% 并去掉阴影。
- （可选）如果你做原型交互：在 Prototype 里给 Default 添加 On hover → Change to Hover，Hover 添加 Mouse leave → Change to Default。
步骤 7：再加一个尺寸属性（S/M）
- 复制一组 Variants 做成两套尺寸，创建属性 Size：S / M。
- S：Padding 12、封面高 100、标题字号 16；M：Padding 16、封面高 120、标题字号 18。
- 保持 Auto Layout 的 Hug/Fill 逻辑一致，尺寸变化时版式才不会崩。
常见问题排查
- 文字不换行：确认 Text 的 Resizing 是 Fill container；如果是 Fixed 宽度，调整到合适宽度并允许换行。
- 内容替换后高度不对：外层容器 Height 建议用 Hug contents；封面区高度用 Fixed。
- 间距忽大忽小：只在 Auto Layout 里控制 spacing，尽量不要混用手动拖拽的 Y 间距。
- 图片溢出圆角：封面容器打开 Clip content，圆角设置在容器上而不是图片上。
你可以如何复用
把这套卡片组件放进你的 Design System：页面里只用实例（Instance），通过属性替换标题、描述与封面；通过 Size/State 快速切换不同场景，后续改样式也能统一生效。
