目标是做一个“卡片（Card）组件”，它能在真实产品里直接复用：标题长短变化不挤坏布局、图片可有可无、按钮可切换主次样式，还能通过变体快速切换默认/悬停/禁用等状态。整套组件用 Figma 自动布局（Auto Layout）+ 组件属性（Component properties）实现，最后你会得到一个可交付给开发的规范化结构。
1）新建一个 Frame（快捷键 F），尺寸先用 360×200（只是起点）。
2）给 Frame 取名：Card。命名建议用“组件名/层级/用途”，后面做变体时会省很多事。
3）在右侧面板给 Card 加基础样式：填充白色、圆角 12、描边 1px #EAEAEA、投影可选（轻微）。
选中 Card，点击右侧 Auto layout（Shift + A）。设置如下：
• 方向：垂直（Vertical）
• Padding：16 / 16 / 16 / 16
• Spacing between items：12
• Alignment：左上（Top left）
• 宽度：Fill container（后续放进列表时会自适应）
• 高度：Hug contents（内容多少决定高度）
这样做的意义：卡片高度不再是固定值，标题变长、加一行说明，都能自然撑开。
在 Card 内依次放三块：封面图（可选）、文本区、按钮区。每一块都尽量做成“独立的 Auto Layout”，不要所有元素堆在同一层。
1）新建一个 Rectangle，命名 Media，高度先设 120，宽度设为 Fill container。
2）给 Media 加圆角 10，并把它放在 Card 的第一项。
3）关键：让 Media 的高度固定、宽度 Fill。这样卡片在不同屏宽下，图片会拉伸宽度但高度不乱。
如果你希望“无图”版本也成立，后面会用变体控制 Media 是否显示。
1）新建一个 Frame 命名 Body，放在 Media 下面。
2）给 Body 加 Auto Layout（垂直），Spacing=6，宽度 Fill，height Hug。
3）在 Body 内创建三行文本：
• ：16-18px、Semibold，宽度 Fill，行高建议 24
• De ion：12-14px、Regular，颜色 #666，最多 2-3 行（可用文本样式约束）
• ：12px、#999，比如“3 min · 更新于今天”
技巧： /De ion 都设为宽度 Fill，这样内容长短变化时会自动换行，不会撑破容器。
1）新建 Frame 命名 Actions，加 Auto Layout（水平），Spacing=8，宽度 Fill，height Hug，Alignment 右对齐（Right）。
2）在 Actions 里放两个按钮：Primary 与 Secondary。每个按钮建议做成独立组件（Button）。
按钮组件（Button）内部也用 Auto Layout（水平）：Padding 10/14，文本 Hug，圆角 10。按钮宽度 Hug contents，高度 Hug。
检查以下设置是否正确（很多人卡在这里）：
1）Card 宽度：Fill container；高度：Hug contents
2）Media 宽度：Fill container；高度：Fixed
3）Body 宽度：Fill container；高度：Hug contents
4）Actions 宽度：Fill container；高度：Hug contents；内部按钮 Hug
只要这四条对了，你把 Card 放进列表、网格、或不同宽度的父容器里，都会自然适配。
1）选中 Card，Create component（Ctrl/Cmd + Alt + K）。命名 Card。
2）给关键图层做“组件属性（Component properties）”：
• Media：做一个布尔属性（Show media），用于有图/无图切换
• /De ion/ ：可选做文本属性（Text property），便于在实例里直接改文案
• Button 文案：同样可做文本属性
实践建议：先做最少的属性（Show media + /De ion），够用再加，不要一上来把面板做得太复杂。
1）把 Card 变成 Variants：在右侧点击 Combine as variants。
2）创建属性 State：Default / Hover / Disabled。
3）每个状态只改必要的视觉：
• Hover：描边更深一点（#D0D0D0），投影微增强
• Disabled：整体不透明度 60%，按钮不可用样式
注意：布局不要在不同状态里改变，否则开发对齐会很痛苦。
• 圆角：Card 12，Media 10，Button 10
• 间距：Card padding 16，卡片内容间距 12，Body 内行距 6，按钮间距 8
• 字体： 16/24 Semibold；De ion 14/22 Regular； 12/18 Regular
• 颜色：Border #EAEAEA；Text #111；Subtext #666； #999
这些信息让开发可以直接落到 CSS，不需要猜。
1）卡片高度固定导致文字被裁：把 Card 高度改为 Hug contents。
2）按钮被拉伸变形：按钮组件宽度保持 Hug contents，不要 Fill。
3）图片跟随内容一起被压扁：Media 高度要固定（Fixed）。
4）内容对不齐：检查 Auto Layout 的 Alignment 是否一致（Card/Body/Actions）。
5）实例改文案后间距乱：优先在组件内部用 Spacing 控制，不要靠手动拖动空白。
新建一个列表容器（垂直 Auto Layout），把 Card 实例放进去，改 3-5 个不同长度标题/描述，切换 Show media 与 State。只要你看到列表依然对齐、间距稳定，就说明组件已经具备“可复用”的基本素质。
