目标是用一套“可复用 + 可扩展 + 不容易乱”的方式，在 Figma 里做出按钮组件（Primary/Secondary/Destructive…）并配好 Hover/Pressed/Disabled 等状态。做完后，你在任何页面只需要拖一个组件出来，改文字、改尺寸就能自动对齐排版。
在开始画按钮之前，先把项目里最容易失控的 3 件事固定：间距、圆角、字号。建议你按下面的最小集合来做：
1）间距：4 / 8 / 12 / 16 / 24（单位：px）
2）圆角：8（默认），12（大按钮可用）
3）字号：12（辅助）、14（正文）、16（重点）
这些数字不用追求完美，先保证“全项目统一”。后面要调整也只改一处。
1）新建一个 Frame（快捷键 F），命名为 Button/ 。
2）在里面放一个文本层（T），输入“按钮”。
3）选中文本层和 Frame，点击右侧 Auto layout（或 Shift + A）。
4）设置 Auto layout：
- Direction：Horizontal
- Padding：左右 16，上下 10（可用 12/8 也行，关键是统一）
- Spacing between items：8（后面加图标会用到）
- Alignment：Center
5）给容器加 Fill 颜色（例如 #1677FF），文字设为白色。
很多人按钮做完会在不同页面被拉扁/拉长，核心原因是用固定尺寸。正确做法：
1）选中按钮容器（Auto layout 的那个 Frame）
2）Width/Height 设为 Hug contents
3）文本层的 Resizing 设为 Hug contents
这样当你把“按钮”改成“立即购买”，按钮会自己变宽，内边距仍然保持一致。
按钮如果只有一个样式，落地到开发会反复沟通。建议最小状态集如下：
- Default：主色填充 + 白字
- Hover：填充颜色加深 6%~10%
- Pressed：再加深或加 1px 内阴影
- Disabled：降低不透明度（例如 40%）并禁用阴影
做法：
1）复制 3 份按钮容器（Cmd/Ctrl + D）
2）分别命名为 Button/Primary/Default、Button/Primary/Hover…
3）仅修改颜色/阴影，不要动内边距和字体
1）选中 4 个按钮 Frame
2）右键：Create component set
3）在右侧 Properties 里，把 Variant 属性命名为 state，值为 Default / Hover / Pressed / Disabled
4）把组件集命名为 Button/Primary
这样你在画页面时只拖一个 Button/Primary，然后在 state 下拉里切换状态。
扩展建议一次只加一个维度，避免组件集爆炸：
1）先加 size：S/M/L（主要差在 padding 和字号）
2）再加 type：Primary/Secondary/Destructive（主要差在色彩与边框）
如果你是第一次做组件库，建议先做 size + state 两个属性就够用。
推荐命名：
- 组件：Button
- 属性：type、size、state、icon
- 值：Primary/Secondary、S/M/L、Default/Hover/Pressed/Disabled、None/Left/Right
交付时给开发的 3 句话：
1）按钮使用 Auto Layout，宽高 Hug contents
2）内边距和间距跟随 size 变量
3）状态只改颜色/阴影，不改布局
- 改文字后按钮不跟着变宽：检查容器和文本是否都是 Hug contents。
- 图标和文字不对齐：检查 Auto layout 的 Alignment 是否 Center，以及图标是否有不必要的透明边。
- 组件一用就“散架”：避免在实例上解除 Auto layout；需要特殊样式时新增 variant，不要在页面里硬改。
当你把 Primary 做顺手后，可以继续补：
1）Secondary（描边按钮）
2）Destructive（危险操作）
3）带图标的 Icon Button（仅图标）
统一规则不变：先定变量、再做 Auto Layout、最后用 Variants 管状态。
