我们要做一张「卡片组件」（Card）：上方图片占位（可选）、中间标题+描述、底部一个按钮。重点不是画得多好看，而是让它可复用、可响应：改内容不跑版，换尺寸不重排。
1）新建一个 Frame（快捷键 F），命名为 Card。
2）选中 Card，按 Shift + A 给它加 Auto Layout（方向选纵向）。
3）在右侧面板设置：
4）给 Card 设置圆角 12、描边 1px（浅灰），背景白色。
1）在 Card 内依次放入：
2）把按钮 Frame 也加 Auto Layout（Shift + A），并设置：
3）让标题与描述更稳定：把两段文字都设为 Hug contents（高度 Hug），宽度先保持 Fixed 或 Fill（后面统一）。
很多人卡在这里：明明用了 Auto Layout，卡片还是一拉就乱。解决方法是把「外层」和「内层」的宽度策略设置对。
1）选中 Card（最外层组件的 Frame）：把宽度改为 Hug contents → Fill container（如果当前外层没有容器，可先放进一个更大的 Frame 里再设置 Fill）。
2）选中标题/描述两段文字：把它们的宽度改为 Fill container，这样文字会随卡片宽度变化而换行。
3）如果按钮希望靠左：保持按钮为 Hug；如果希望按钮横向撑满：把按钮 Frame 的宽度设为 Fill container，并把内部文字对齐设为 Center。
1）选中 Card，按 Ctrl + Alt + K（Mac：Cmd + Option + K）创建组件。
2）给组件命名：Card / Basic。
3）把标题、描述、按钮文字都设为可替换文本：实例里双击即可改。
1）复制一个组件（不是实例），做第二个样式。
2）在右侧点击 Combine as variants 合并为变体集。
3）添加属性：
4）设置差异：
现在你在实例里就能通过下拉切换 Size，而不用复制粘贴一堆不同卡片。
把颜色、圆角、描边做成 Styles（颜色样式/文本样式），再把按钮做成独立组件，最后在 Card 中引用按钮组件。这样整个设计系统会更统一、维护更轻松。
