你将做出什么（成品定义）
目标是在 Figma 里做一套“可复用、可扩展、可交付”的卡片（Card）组件：支持标题/摘要/标签/按钮的开关，支持不同尺寸（S/M/L），并且在内容增减时依然保持对齐与间距一致。
整个过程只用三件套：Auto Layout、样式（Styles）、组件属性/变量（Component Properties / Variables）。
准备：先定一套基础排版与间距规则
在动手画组件前，先把“尺度”定死，后面才不会越做越乱。
推荐一套通用的 8pt 体系：
- 外边距（Card padding）：16
- 模块间距（Stack spacing）：12
- 文字行距：标题 24/28，正文 20/28（按你的字体实际效果微调）
- 圆角：12（小卡可 10）
文本样式（Styles）至少准备：Card/ 、Card/Body、Card/ （标签/时间）三种。这样开发对接时能直接映射到 token。
步骤 1：搭建 Card 的结构骨架（Auto Layout）
新建一个 Frame 作为 Card 容器，开启 Auto Layout（纵向）。关键点是“层级清晰 + 约束正确”。
- 容器 Frame：Auto Layout = Vertical；Padding = 16；Spacing = 12；Fill = 白色；Stroke = 1px 浅灰；Corner = 12。
- 第一行：Header（横向 Auto Layout），放左侧标题组 + 右侧操作区（可选）。Header 的 Align 设为 Space between。
- 第二块：Body 文本（可选）。
- 第三块： （横向 Auto Layout），放标签 Chips / 日期 / 角标等（可选）。
- 最后：Actions（横向 Auto Layout），放主按钮/次按钮（可选）。
尺寸策略：Card 容器宽度建议设为 Fill container（放到列表/栅格里会自动拉伸）；高度用 Hug contents。
步骤 2：让内容变化时仍然“看起来对”
卡片最容易崩的地方是：标题换行、正文变长、标签数量增多。解决思路是把“可变的”都交给 Hug/Fill 与最大宽度。
- 标题文本：Hug contents（高度），宽度设为 Fill container（让它在剩余空间里换行）。
- 右侧操作区（例如一个图标按钮）：固定宽高，避免挤压标题。
- Body 文本：宽度 Fill；高度 Hug。必要时用 2 行/3 行截断（如果你的团队有统一规则）。
- 的 Chips：用横向 Auto Layout，开启 Wrap（如果你用的是新版 Figma），或用两行容器解决溢出。
小技巧：当 Header 里既要标题又要图标时，标题所在的 Frame 设为 Fill；图标按钮设为 Fixed。这样标题永远优先占满剩余空间。
步骤 3：把骨架变成组件（Component）并加属性开关
选中 Card 容器，Create component。然后做三类组件属性：
- Boolean：Show body、Show 、Show actions（对应 3 个模块的显示/隐藏）。
- Instance swap：右上角操作区（无 / 更多 / 关闭 / 收藏 等）。
- Text： 、Body、 文案（让使用者在右侧面板直接改）。
做开关时不要直接隐藏文本层，而是隐藏“模块容器 Frame”。这样间距会自动重新计算，避免留下空白。
步骤 4：做尺寸变体（Variants：S / M / L）
在组件上 Add variant，属性名建议叫 Size，值为 S/M/L。每个尺寸只改 3 件事：
- Padding：S=12，M=16，L=20
- 标题样式：S 用较小字号/行高，L 用较大字号/行高
- 模块间距：S=8，M=12，L=16
注意：不要为每个尺寸重做结构。结构保持一致，差异只体现在数字和样式，维护成本才低。
步骤 5：加入状态（默认 / 悬停 / 选中 / 禁用）
如果你的项目需要交互态，建议再加一个 Variant 属性叫 State（Default/Hover/Selected/Disabled）。
- Hover：提高阴影或加浅色背景（不要同时做太多变化）。
- Selected：描边变为品牌色，或左侧加一条强调色。
- Disabled：整体不透明度 40%~60%，并把按钮禁用态一起换掉。
状态的变化尽量只动“外观层”（Fill/Stroke/Shadow），不要改变布局，避免使用时跳动。
交付清单：给开发的 5 条信息（最容易漏）
- Card 的外层间距（padding、模块 spacing）与 8pt 体系说明。
- 标题/正文/ 的字体样式名称（或对应 token）。
- 当 换行、Body 为空、 超出时的规则（换行/截断/Wrap）。
- 各个 State 的颜色值（背景/描边/阴影）。
- 按钮对齐规则：单按钮靠右还是左右并排；多按钮间距是多少。
常见坑与排查
- 间距突然变大：检查是否同时在父容器和子容器都加了 padding/spacing。
- 标题被挤压成一列：确认标题容器是 Fill，右侧操作是 Fixed。
- 隐藏模块后留白：隐藏的是模块容器而不是里面的文字层。
- 尺寸变体难维护：只让数字和样式变化，不要复制出不同结构。
你可以直接复用的命名建议
组件：Card/ ；变体属性：Size（S/M/L）、State（Default/Hover/Selected/Disabled）；布尔属性：ShowBody、Show 、ShowActions。样式：Card/ 、Card/Body、Card/ 。
