你将做出什么
目标是做一套「可响应、可换主题、可复用」的卡片组件（Card）。它能根据容器宽度自动调整内边距与排版；支持 Small / Regular / Large 三种密度；支持 Light / Dark 两套主题；并且在页面里拖进去就能用。
准备工作（3分钟）
- 打开 Figma 新建一个文件，创建一个 360×800 的 Frame 作为演示画板。
- 确认你能看到 Variables（变量）面板：右侧 Design → Variables（或 Assets 面板里）。如果你的版本没有 Variables，可用 Styles 代替颜色/文字样式，但后面“主题切换”会少一步。
- 本文默认你会基础的 Auto Layout（自动布局）：水平/垂直、间距、对齐、填充与固定宽高。
步骤 1：先把卡片骨架画出来
- 在画板里画一个矩形做卡片容器，设置圆角 16。
- 给容器添加 Auto Layout（Shift + A），方向选 Vertical。
- 设置容器 Padding：左右 16、上下 16；Item spacing：12。
- 设置容器宽度为 Fill container，高度为 Hug contents（让它跟内容走）。
小技巧：骨架阶段不要纠结配色，先把“可伸缩”做对，后面换主题就很轻松。
步骤 2：做三块内容区（标题、正文、底部操作）
- 在卡片里放一个标题行：Text（例如“卡片标题”）。文本容器设置为 Fill container；对齐左。
- 放一个正文行：Text（例如“这里是一段描述文本，用来说明卡片内容要点。”）。打开 Auto height，让它能多行换行。
- 放一个底部操作区：创建一个水平 Auto Layout，放两个按钮（例如“取消”“确认”）。操作区设置为 Fill container，并把按钮组对齐到右侧。
步骤 3：先把按钮做成组件（后面会复用）
- 画一个按钮容器（Frame + Auto Layout），Padding：左右 14、上下 10，圆角 10。
- 放一个文字（例如“按钮”），文本设为 Hug contents。
- 给按钮容器设置 Hug contents（宽/高都 Hug）。
- 选中按钮整体，Create component（Ctrl + Alt + K）。命名为 Button。
- 给 Button 添加一个 Variant 属性：Type = Primary / Secondary。
步骤 4：创建变量（颜色、间距、圆角）
我们用变量把“主题”和“密度”从具体数值里解耦出来。建议建两个集合（Collection）：Theme 和 Space。
- Theme 集合：创建变量 bg/card、text/primary、text/secondary、border、brand。并创建两套模式：Light、Dark。
- Space 集合：创建变量 space/8、space/12、space/16、space/20、radius/16（数值可按你的系统调整）。
- 把卡片的圆角、padding、间距绑定到 Space 变量；把背景、文字颜色、边框颜色绑定到 Theme 变量。
绑定方法：选中对象 → 右侧面板对应数值旁边的小“变量”图标 → 选择变量。
步骤 5：让卡片真正“响应式”
- 卡片容器宽度：设为 Fill container（关键）。
- 标题与正文文本：宽度设为 Fill container，确保换行自然发生。
- 底部操作区：宽度 Fill container；内部按钮组用 Auto Layout，设置 Hug contents，并把整个组对齐到右侧。
- 在画板里拉伸外层 Frame 的宽度，观察卡片是否能跟着变宽，内容是否仍然对齐。
常见坑：按钮如果设成 Fill container，会被拉伸成“长条”。按钮一般保持 Hug，让它只跟文字走。
步骤 6：做密度（Small / Regular / Large）三种版本
- 把卡片整体 Create component，命名 Card。
- 给 Card 添加 Variant 属性：Density = S / M / L。
- 三种密度只改一件事：卡片的 padding 与间距（例如 S：12/8，M：16/12，L：20/16）。如果你已经用 Space 变量绑定，那么只需要在 Space 集合里为不同密度准备一组映射（或用不同变量）。
步骤 7：主题切换（Light / Dark）一键完成
- 确认卡片背景、文字、边框都绑定了 Theme 变量。
- 在右侧 Variables 中切换 Mode：Light → Dark，查看卡片是否自动变色。
- 同样把 Button 组件的填充与文字颜色也绑定到 Theme 变量：Primary 用 brand 作为背景，Secondary 用透明背景 + border。
步骤 8：做一页“组件使用示例”，验证复用
- 在画板里放 3 个 Card 实例：分别用 S/M/L。
- 替换标题、正文文案，看看是否都能自然自适应高度。
- 把外层 Frame 宽度从 360 拉到 768，再拉到 1200，观察布局是否稳定。
排错清单（最常见的 6 个问题）
- 文字不换行：检查文本宽度是不是 Hug contents；改成 Fill container。
- 卡片高度不自适应：检查卡片高度是不是 Fixed；改成 Hug contents。
- 按钮被拉伸：按钮容器宽度用 Hug，而不是 Fill。
- 间距改不动：确认你选中的是卡片容器（Auto Layout 的 Frame），不是里面的某个子元素。
- 主题切换无效：确认颜色确实绑定了变量，而不是手动填色；在 Variables 面板切换的是同一个 Collection 的 Mode。
- 变体太乱：属性命名统一（Density/Type/Theme），并用斜杠命名（Card/Density=S）。
你可以继续优化（可选）
- 给 Card 增加一个 Variant：State = Default / Hover / Pressed，并用 Prototype 交互实现按钮态联动。
- 加一个可选的缩略图区域（左图右文），通过 Boolean 属性控制显示隐藏。
- 把文本样式也变量化： / Body / Caption，统一管理字号与行高。
做到这里，你就拥有了一套「像代码组件一样好用」的 Figma 卡片组件：能伸缩、能换主题、能一键复用。把它放进团队组件库，后面做页面会快很多。
