你将做出什么
目标：在 Figma 里做一张“带图片 + 标题 + 描述 + 标签 + 按钮”的卡片组件，并且做到：
- 尺寸可拉伸（响应式）
- 间距/圆角/颜色统一由变量控制
- 通过组件属性快速切换样式（有无图片/按钮样式/标签数量）
- 能输出给开发的结构与标注清晰
准备：新建变量集合（Variables）
建议先建 3 组变量：间距、圆角、颜色。这样你后续改规范，只改变量，不改组件。
- 间距（Spacing）：8 / 12 / 16 / 24（单位按团队习惯）
- 圆角（Radius）：8 / 12 / 16
- 颜色（Color）：
- bg/surface：#FFFFFF
- bg/secondary：#F6F7F9
- text/primary：#111827
- text/secondary：#6B7280
- brand/primary：#2563EB
- border/default：#E5E7EB
小技巧：命名用“类别/用途”，比如 spacing/16、color/text/secondary，更好搜。
第一步：搭出卡片骨架（Auto Layout）
- 新建一个 Frame，命名 Card。
- 给 Card 开启 Auto Layout（方向：Vertical）。
- Padding：上下左右都绑定 spacing/16；Item spacing 绑定 spacing/12。
- 背景色绑定 color/bg/surface；描边 1px 绑定 color/border/default；圆角绑定 radius/12。
- 宽度先设 320，高度设 Hug contents。
第二步：放入图片区（可选）
- 在 Card 顶部放一个 Frame，命名 Media，开启 Auto Layout（Vertical 或关闭都行）。
- 给 Media 一个固定高度（例如 160），宽度 Fill container。
- 圆角与 Card 一致（12），并开启 Clip content。
为什么要单独一层 Media？因为你后面做“无图版本”时，只需要隐藏/移除这一层，而不是拆整个结构。
第三步：文字与标签区（内容区）
- 在 Media 下方新建 Frame：Content，开启 Auto Layout（Vertical）。
- Content 的 item spacing 绑定 spacing/8。
- 放入标题 Text：字号 16-18，颜色绑定 color/text/primary，设置为 Hug。
- 放入描述 Text：字号 12-14，颜色绑定 color/text/secondary，最多 2-3 行（你可以用文本样式统一）。
- 新建 Tags 容器：Auto Layout（Horizontal），Wrap 开启，gap 绑定 spacing/8。
标签（Tag）建议做成一个小组件：左右 padding 8，上下 padding 4，圆角 999，背景 color/bg/secondary，文字 text/secondary。
第四步：按钮区（CTA）
- 在 Card 底部放一个 Frame：Actions，Auto Layout（Horizontal），对齐右侧。
- 放一个 Button 组件（建议你已有按钮库；没有就先做一个）。
- 按钮 padding、圆角、颜色尽量也绑定变量。
第五步：让它真正“响应式”
很多人做了 Auto Layout 但还是不响应，关键在这些设置：
- Card：宽度设为 Fixed（在组件实例里可改），高度 Hug。
- Media：宽度 Fill container，高度固定。
- Content：宽度 Fill container；内部文字默认 Hug，但要允许换行。
- Tags：Wrap 开启；否则标签会把卡片撑爆。
- Actions：对齐 End；必要时允许按钮 Hug。
第六步：做成组件 + 组件属性（Component Properties）
- 选中 Card，创建组件（Create component）。
- 为 Media 创建一个布尔属性：Show media（true/false），绑定 Media 图层显隐。
- 为按钮创建 Variant：Primary / Secondary（或者用组件属性切换样式）。
- 为 Tag 做一个“数量”策略：常见做法是预留 3-5 个 Tag，占位符为空时隐藏。
命名建议：属性用动词 + 名词，例如 Show media、Button type，对团队更友好。
交付检查清单（照着对一遍再交付）
- 所有间距/圆角/颜色都尽量绑定变量（而不是手填数值）。
- 卡片宽度拉伸时，文字不溢出，标签会自动换行。
- 无图版本/不同按钮样式切换正常，布局不跳崩。
- 层级命名清晰：Card / Media / Content / Tags / Actions。
- 把组件放入库页面，并给出 2-3 个示例（默认、无图、长标题）。
常见坑（最容易踩的 3 个）
- 只给外层 Auto Layout：内层容器不 Fill container，会导致拉伸时内容区宽度不跟随。
- Tags 不开 Wrap：标签会一字排到底，撑破卡片。
- 变量命名混乱：后期维护会非常痛苦，建议统一“类别/用途/尺寸”。
