目标：在 Figma 里做一套按钮 + 卡片的基础组件库，让它具备：自适应宽高（Auto Layout）、可切换状态/尺寸（Variants）、可被团队稳定复用（属性命名清晰）。你照着做完，就能把“每次都重新画一套按钮”的浪费彻底停掉。
建议先写在组件页顶部（后面团队接手也看得懂）：
1）尺寸体系：按钮分 S / M / L；卡片分 紧凑 / 标准。
2）状态体系：按钮分 Default / Hover / Pressed / Disabled；卡片分 Default / Selected。
3）命名约定：组件名用 Button、Card；属性用英文小写：type、size、state。
步骤：
1）新建一个 Frame，命名为 Button/ ，放一个文字层（例如“按钮”）。
2）选中 Frame，按 Shift + A 开启 Auto Layout；方向选水平。
3）设置 Padding：左右 16、上下 10（先以 M 尺寸为例）。Spacing between items 设为 8（后续加图标用）。
4）把文字层的约束设为 Hug contents（默认通常就是），按钮 Frame 也设为 Hug contents。此时文字变长，按钮会自动变宽。
5）添加圆角、填充色、描边（可选）。为了后续统一换色，建议使用 Color Styles（例如 Primary/500、Neutral/0）。
1）选中 Button/ ，创建组件（Create component）。
2）复制 3 份做尺寸：S/M/L。做法：
- S：左右 12、上下 8，字体 12 或 13；
- M：左右 16、上下 10，字体 14；
- L：左右 20、上下 12，字体 16。
3）再为每个尺寸复制状态：Default/Hover/Pressed/Disabled。状态差异建议只体现在：填充色、透明度、阴影（如有）。
4）全选这些按钮组件，点击 Combine as variants。
5）设置属性（很关键）：
- size：S、M、L
- state：Default、Hover、Pressed、Disabled
- type（可选）：Primary、Secondary、Tertiary
提示：Figma 会自动用“Property=Value”的形式命名变体。把它改成你团队能看懂的规范，未来换人也不崩。
你通常会遇到：有的按钮带左侧图标，有的不带。推荐这样做：
1）在按钮 Auto Layout 里放一个 Icon（可以是 16x16 的矢量或组件）。
2）把 Icon 的可见性做成变体的一部分会很麻烦；更好的做法是：
- 做一个属性 icon：On/Off；
- On：Icon 显示；Off：Icon 隐藏（仍然保留占位会影响间距，所以要让它不占空间）。
3）实现方式：Icon 单独放在一个 Auto Layout 的子 Frame 里；Off 状态下把该子 Frame 的宽度设为 0 且隐藏，或者直接在 Off 变体里删除该图标层（保持结构一致更稳）。
卡片一般包含：封面/图标、标题、描述、按钮/标签。做法：
1）新建 Frame 命名 Card/ ，开启 Auto Layout（垂直）。
2）Padding 设 16；item spacing 设 12；宽度可先固定 320，高度 Hug。
3）内部用“区块”思维：Header（标题/副标题）、Body（描述）、Footer（按钮）。每个区块自身也是 Auto Layout。
4）把标题设为 Fill container（让它占满宽度），描述设为 Fill container，按钮组件放在 Footer 里。
1）把 Card/ 创建组件并复制一份。
2）Default：普通描边/阴影；Selected：描边高亮（Primary/500）或背景轻微变色。
3）Combine as variants，属性设为 state：Default/Selected。
1）把组件放到单独页面（如 Components），并按类别排版：Buttons、Cards、Inputs（后续扩展）。
2）每个组件旁边放 1 段说明：用在哪、别怎么用、常见坑。
3）检查命名：组件名不要带“v1/v2/最终版”；属性名统一英文；值保持短而清晰。
4）最后做一次“真实场景”验证：在一个 Demo 页面里用组件拼 3 个界面（列表、详情、弹窗）。如果拼的时候你自己都不顺手，说明属性还不够好。
Q1：为什么我切换变体后尺寸乱了？
A：通常是某个变体里 Auto Layout 结构不一致（层级不同/少了某层）。尽量保持每个变体的层级结构一致，只改样式。
Q2：按钮文字变长时被裁切怎么办？
A：确保文字是 Hug contents，按钮 Frame 也是 Hug contents；不要给按钮固定宽度，除非是特殊场景（例如全宽按钮）。
Q3：我应该先做样式库还是先做组件？
A：至少先做颜色/字号/间距的基础 Styles（哪怕不全），否则后面改版会很痛；组件可以边做边补 Styles。
到这里你已经拥有一套可复用的按钮/卡片组件库雏形。下一步建议补齐：输入框、标签 Tag、空状态 Empty、Toast/Modal 等，把整个产品的“高频拼装件”一次性稳定下来。
