你将完成什么
目标是做一个可复用的「卡片组件」（Card）：上方封面图，中间标题+说明，下方按钮。它需要在不同宽度下自动伸缩，文字可换行，间距统一可控，并且能通过 Variants 切换尺寸和状态（默认/悬停/禁用）。
准备：建立变量（可选但强烈推荐）
1）在右侧面板找到 Variables（变量）。新建一个集合（例如：UI）。
2）添加数值变量（Number）：
- space.4 = 4、space.8 = 8、space.12 = 12、space.16 = 16、space.24 = 24
- radius.8 = 8、radius.12 = 12
提示：不用变量也能做，但变量能让你的组件后期“全局改一次，全站都一致”。
第一步：搭出卡片的 Auto Layout 骨架
1）新建一个 Frame，命名 Card。
2）选中 Card，按 Shift + A 添加 Auto Layout（方向：Vertical）。
3）设置 Card 的 Auto Layout：
- Padding：16（或绑定变量 space.16）
- Item spacing（gap）：12（或 space.12）
- Alignment：Left
- Card 填充：白色；描边：#E6E6E6；圆角：12（或 radius.12）
4）在 Card 内按顺序放三个区域（都建议命名清楚）：
- Cover（封面图容器）
- Body（标题+说明）
- CTA（按钮区域）
第二步：封面图 Cover 的关键设置
1）创建一个矩形作为封面图，放进 Cover 容器内。
2）Cover 容器建议设置为固定高度（例如 140），宽度 Fill container。
3）矩形设置：
- Width：Fill container
- Height：Fill container
- Corner radius：8（或 radius.8）
- Fill：Image（随便放一张示例图）并把模式改为 Fill
提示：做组件时，封面图建议保持固定高度，这样列表看起来更整齐。
第三步：正文 Body（标题+说明）的换行与约束
1）Body 也设置为 Auto Layout（Vertical），gap=8（或 space.8）。
2）标题 Text：
- Width：Fill container
- Text：设置为 Auto height（让它可以换行）
- 样式建议：16-18px，SemiBold
3）说明 Text：
- Width：Fill container
- Text：Auto height
- 样式建议：12-14px，Regular，颜色 #666
常见坑：如果文字不换行，通常是文字层的宽度没设成 Fill container，或者 Text 没切到 Auto height。
第四步：按钮区域 CTA（自适应宽度/对齐）
1）创建一个按钮 Frame，设置 Auto Layout（Horizontal）。
- Padding：10/14（上下/左右）
- gap：8
- 圆角：999（胶囊按钮）或 10（矩形按钮）
- 背景：#111
2）按钮文字设置为 Auto height；按钮容器的高度由内容决定。
3）把按钮放进 CTA 容器。CTA 容器可以设置为 Auto Layout（Horizontal），并把对齐设为 Space between 或 Right（看你的布局需求）。
第五步：做成组件 + Variants（尺寸与状态）
1）选中 Card，点击 Create component。
2）创建 Variants：
- 属性 1：Size（S / M）
- 属性 2：State（Default / Hover / Disabled）
3）Size 的做法：
- S：padding=12，封面高度=120，标题字号=16
- M：padding=16，封面高度=140，标题字号=18
4）State 的做法（只改必要的视觉属性）：
- Hover：按钮背景稍微变浅（例如 #222），卡片描边加深一点
- Disabled：整体透明度 60%，按钮不可点样式（灰色）
第六步：加上交互（Prototype）
1）在 Hover 变体上，选中按钮或卡片，添加交互：
- On hover → Change to（Hover）
- On mouse leave → Change to（Default）
2）点击动作（可选）：On click → Open / Navigate to（根据项目需要）。
提示：交互建议只做最小可用，避免组件变体爆炸式增长。
检查清单（发布前 1 分钟自检）
- Card/Body/Cover 的宽度都用 Fill container，文字层是 Auto height
- padding/gap 使用统一规则（最好绑定变量）
- Variants 命名清晰：Size、State
- 封面图是 Fill 模式，圆角一致
- Hover/Disabled 只改必要属性，避免维护困难
你可以怎么复用
把这个 Card 组件放进列表、首页推荐位、作品集项目页都很合适。下一步你可以再加一个 Variant：是否显示封面图（Cover=On/Off），让同一套组件适配“图文卡”和“纯文本卡”。
