用一套 Auto Layout 规则，做出两种组件：
1）按钮：文案再长也不挤压内边距，左右留白一致，最小宽度可控。
2）卡片：标题/描述可多行，图片与内容区间距稳定，卡片宽度随容器拉伸。
推荐版本：Figma 桌面端或网页版均可。
新建页面：创建一个 Frame（例如 1440x900），方便观察响应式变化。
统一单位：后续示例用 8px 栅格（8/16/24/32）。
Step 1：建立按钮容器
新建一个 Frame（命名 Button），选中后点击 Auto Layout（Shift+A）。方向选 Horizontal。
Step 2：设置间距与内边距
在右侧面板设置：
Padding：左右 16，上下 10（可按你的设计系统调整）
Item spacing：8（图标与文字间距）
Step 3：放入图标与文字
插入一个 16x16 的图标（可用任意占位形状），再插入文字（Text）。
关键点：文字层建议设为 Auto width，避免被强行换行。
Step 4：让按钮在容器里“该伸就伸”
选中按钮容器（Button）：
Width 行为选择 Hug contents（内容多就变宽）
如果你希望按钮在某些场景占满容器，可将按钮放进父级 Auto Layout，并把按钮的 Width 设为 Fill container。
Step 5：设置最小宽度（防止太窄）
在按钮容器的宽度输入框里，点击右侧的小三角，设置 Min width（例如 120）。
这样短文案也会保持一致的视觉重量。
Step 1：卡片外框
新建 Frame（命名 Card），启用 Auto Layout（Vertical）。
Padding：16；Item spacing：12；圆角：12；描边：1px（浅灰）。
Step 2：顶部图片区（可选）
插入一个 Rectangle 作为封面（例如高度 160）。把它放到 Card 的第一行。
选中封面：Width 设为 Fill container，让它随卡片宽度拉伸。
Step 3：内容区（标题 + 描述 + 按钮）
新建一个 Frame（命名 Content），启用 Auto Layout（Vertical）。
Item spacing：8；Width：Fill container。
在 Content 里放入：
1）标题 Text（建议 Auto height，允许换行）
2）描述 Text（Auto height，多行）
3）按钮组件（上一部分做的 Button）
Step 4：让按钮对齐到右侧（常见卡片 CTA）
有两种做法：
A）给按钮外面包一层 Horizontal Auto Layout 行，把行 Width 设为 Fill container，然后把对齐设为 Space between 或把按钮设为右对齐。
B）把按钮所在行的对齐方式设为右对齐（更简单）。
Step 1：把 Button 做成 Component
选中 Button → Create component（Ctrl/Cmd + Alt + K）。
Step 2：做 3 个常用变体
建议变体属性：
Type：Primary / Secondary / Ghost
State：Default / Hover / Disabled
图标：On / Off
Step 3：文本与图标的可替换规则
在组件实例中，直接替换文本内容即可；图标建议使用实例可替换（Swap instance）。
1）文字被压扁或变成省略号
检查文字层的 Resizing，优先用 Auto width（按钮）或 Auto height（标题/描述）。
2）卡片拉伸时图片不跟着变宽
检查封面矩形是否为 Fill container；如果在普通 Frame 里，确认约束为 Left & Right。
3）间距忽大忽小
确保父级是 Auto Layout，并只用一种规则控制间距：要么 Item spacing，要么单独给元素加 padding，不要混用太多。
把 Card 做成组件后，再加两个变体：
1）含封面 / 不含封面
2）单按钮 / 双按钮（主次 CTA）
再配合栅格布局（Layout grid），就能快速搭建完整的响应式卡片列表。
