我们要做一个「卡片组件」，它可以在不同容器宽度下自动拉伸：图片/标题/描述/按钮保持合理间距；并且用 Variants 管理默认/悬停/选中三种状态，最终可以直接丢进设计系统复用。
1）新建一个 Frame（建议 1440 宽）。
2）在右侧 Layout grid 添加 12 栏（可选）。本教程重点不在网格，但网格能帮助你验证组件在不同宽度下的表现。
1）新建一个 Frame 作为卡片容器，命名为 Card。
2）选中 Card，按 Shift + A 添加 Auto Layout。
3）设置：方向 Vertical；Padding 16/16/16/16；Item spacing 12；对齐 Left & Top。
4）给 Card 加样式：填充 #FFFFFF；描边 1px #E6E8EC；圆角 12；投影（轻微）。
我们把卡片拆成三块：
1）Media：顶部图片（或占位）。
2）Body：标题+描述。
3）Actions：按钮/标签。
做法：
1）在 Card 内插入一个矩形作为图片占位，命名 Media，建议高度 160。
2）再插入一个 Frame 命名 Body，给它 Auto Layout（Vertical），间距 6。
3）在 Body 里放标题（ ）与描述（Desc）。标题建议 16-18px；描述 12-14px，行高更松一点。
4）插入一个 Frame 命名 Actions，给 Auto Layout（Horizontal），间距 8；放一个主按钮和一个次按钮（或 Tag）。
这是成败关键。目标是：卡片宽度跟随容器变化，内部元素该填充的填充、该拥抱内容的拥抱。
1）Card：宽度设为 Fill container
把 Card 放到一个外层容器里（例如页面列容器），然后把 Card 的 Width 改为 Fill container，高度保持 Hug。
2）Media：宽度 Fill，高度 Fixed
Media 宽度 Fill；高度保持固定（160/180 都可以）。如果你用图片，建议把图片的约束设为 Fill 并打开裁切（Crop）。
3）Body：宽度 Fill，高度 Hug
Body 是文本容器，宽度 Fill 让它吃满卡片；高度 Hug 由文本决定。
4） /Desc：宽度 Fill
把 和 Desc 的宽度设为 Fill，这样当卡片变宽时文字行宽能跟着变化；同时 Desc 记得开启自动换行。
5）Actions：宽度 Fill；按钮策略
Actions 建议宽度 Fill，主按钮可以设置为 Hug（看内容），也可以设置为 Fill（让主按钮拉伸）。常见做法：主按钮 Fill，次按钮 Hug，这样层级更清晰。
1）选中 Card 组件，右键 Create component。
2）在右侧点击 Add variant，创建 3 个：
- State=Default
- State=Hover
- State=Selected
3）在 Hover 状态：轻微提升阴影、描边略深（例如 #D0D5DD）。
4）在 Selected 状态：描边改为品牌色（例如 #2F6BFF），背景可加淡色底（5% 透明）。
如果你希望组件在原型里能真实演示：
1）进入 Prototype 模式。
2）Default → On hover 切到 Hover。
3）Hover → Mouse leave 切回 Default。
4）点击卡片（On click）切到 Selected；Selected 再点击切回 Default（或用切换变量）。
发布前建议你做 3 个拉伸测试：
1）把卡片放到 320 宽容器里（模拟手机），看标题是否溢出、按钮是否挤压。
2）把卡片放到 720 宽容器里（两栏），看描述行宽是否太长（必要时给 Body 加最大宽度或调整字体）。
3）把卡片放到 1200 宽容器里（单栏），看 Media 是否需要更高，或是否应该改为左右结构（那就是另一个变体了）。
1）组件命名：Card / State=Default 这样的结构更便于团队搜索。
2）把关键约束写在组件说明里：Card=Fill，Body=Fill， /Desc=Fill，Media=Fixed height。
3）如果你有设计系统，建议把按钮也引用同一套 Button 组件，避免卡片里出现“孤儿按钮样式”。
