目标：用 Figma 的 Auto Layout（自动布局）搭一套「按钮 + 卡片」可复用组件，并通过 Variants（变体）实现状态切换。做完后，你可以把它直接放进自己的设计系统里复用。
1）新建一个页面：Components。
2）建议从一开始就用统一命名：按钮用 Button / Primary，卡片用 Card / 。变体属性用英文短词（size, state, icon）。
3）打开右侧面板的 Auto layout 与 Constraints 区域，接下来每一步都要回到这里检查数值。
1）画一个文字层：例如 “立即购买”。字号随你，建议 14/16px。
2）选中文字层，按 Shift + A（给选中内容加 Auto Layout）。你会得到一个带 padding 的容器。
3）设置按钮容器：
- Direction：Horizontal
- Spacing：8（后面放 icon 会用到）
- Padding：左右 16，上下 10（可按你的产品规范调整）
- Alignment：Center
4）给按钮加背景色与圆角（例如 8）。
5）关键：把按钮的宽度设为 Hug contents，高度也保持 Hug（如果你希望不同尺寸按钮统一高度，再在下一步用 min-height 方案）。
1）在文字左侧插入 16x16 的图标（或用一个 16x16 的占位方块代替）。
2）确保图标与文字都在同一个 Auto Layout 容器里，Alignment 仍为 Center。
3）如果你希望「无图标」时间距自动消失，后面会用变体来解决，不建议在同一个组件里用隐藏图层来硬凑。
1）选中按钮，点击 Create component（Ctrl+Alt+K / Cmd+Opt+K）。
2）复制 3 份组件，做出不同状态（Default / Hover / Disabled）。
3）把它们选中后点击 Combine as variants。
4）在右侧 Variants 面板添加属性：
- state：default / hover / disabled
- size：sm / md / lg（用 padding 控制尺寸，别用缩放）
- icon：on / off（on 有图标，off 无图标）
5）为 disabled 状态设置：
- 背景色降低对比度（例如 30%-40%）
- 文本色降低对比度
- 组件不建议锁死尺寸，仍保持 Hug，方便不同文案长度。
1）卡片通常由「外壳」+「内容」组成：外壳负责圆角/阴影/描边，内容区负责布局。
2）先做内容区：放入标题、正文两行文本，再用 Shift + A 让内容区成为纵向 Auto Layout：
- Direction：Vertical
- Spacing：8
- Padding：16（卡片内边距）
- Width：Fill container（这一步稍后在外层设定）
3）再做外壳：把内容区包一层 Frame，给外壳加：
- 圆角 12
- 背景 #FFF
- 描边 1px（可选）
- 阴影（可选，别太重）
4）让外壳也成为 Auto Layout（Shift + A），这样你后面塞图片、按钮都能稳定扩展。
1）把按钮组件拖入卡片内容区底部。
2）常见做法：
- 卡片外壳：宽度设为固定或 Fill（看你的栅格系统）
- 内容区：Width = Fill container
- 按钮：如果是整行按钮，把按钮容器设为 Fill container，并把文字对齐设为 Center；如果是自适应按钮，就保持 Hug contents。
3）检查在不同文案长度下是否撑破：标题/正文文本建议设置为 Fill container，并开启 Auto height（多行）。
1）按钮明明是 Auto Layout，但宽度不跟文案：检查是否误用了 Fixed width。
2）组件在卡片里对不齐：检查父级 Auto Layout 的 Alignment 与子级的约束（Constraints）。
3）间距忽大忽小：检查是否混用了手动空白层（Spacer）。建议用 Auto Layout 的 Spacing/Gap 控制。
4）icon 开关后对不齐：用 Variants 做 icon on/off，而不是隐藏图层硬切。
5）卡片内容不换行：文本层的 Resizing 设为 Fill container，并确认宽度不是 Hug。
6）导出标注混乱：在组件命名里用斜杠分组（Button/Primary），在属性名里用短词（size/state/icon）。
- 为按钮加 loading 状态（state=loading），用 12px 的 spinner + 文案保持间距稳定。
- 为卡片加图片头图（image=on/off），通过 Fill container 让图片自动拉伸。
- 建一套 token（颜色/间距/圆角），再把按钮与卡片全部对齐到 token，组件会更“系统化”。
