做一套按钮组件库的目标不是“画几种按钮样式”，而是让按钮在不同文案长度、是否带图标、不同状态与尺寸下都能自动适配，并且可被团队重复使用。完成后你会得到：主按钮/次按钮/描边/文字按钮四类；S/M/L 三个尺寸；默认/悬停/按下/禁用四个状态；可选左/右图标；以及可控的圆角与内边距规则。
先做“可复用的样式”，再做组件。建议在 Figma 里建立以下样式（名称可按团队规范调整）：
1）文字样式：Button/14（14px，行高 20px，字重 500 或 600）与 Button/12（12px，行高 16px）。
2）颜色样式：Primary/Default、Primary/Hover、Primary/Pressed、Primary/Disabled；以及 Text/OnPrimary、Text/Primary、Border/Default 等。
3）效果样式：按钮阴影（可选）与 focus ring（如果你做可访问性）。
这样做的好处是：后期换主题色/字体时，你只需要改样式，不需要逐个改组件。
新建一个 Frame 作为按钮内容区（不是最终按钮外框），在里面放三样东西：左图标、文字、右图标。做法：
1）放一个 16x16 的图标（或用占位方块），命名为 Icon/Left。
2）放一段文字，应用 Button/14 文本样式，命名为 Label。
3）复制一个图标命名为 Icon/Right（稍后用组件属性控制显示/隐藏）。
选中这三个元素，按 Shift + A 添加 Auto Layout（水平）。设置：
- Spacing：8
- Alignment：垂直居中
- Padding：先不加（padding 放到外层按钮容器里做）
关键点：把 Label 的 Resizing 设为 Hug contents（文案变化自动撑开），图标也设为 Hug。
在内容区外再包一层 Frame（这层才是按钮容器）。把内容区放进去，对按钮容器添加 Auto Layout（水平）并设置 padding。推荐尺寸规则：
- S：高度 32，左右 padding 12，上下 padding 6，圆角 8
- M：高度 40，左右 padding 16，上下 padding 10，圆角 10
- L：高度 48，左右 padding 20，上下 padding 14，圆角 12
做法：按钮容器的 Auto Layout 设为水平；把内容区（内层）设为 Hug；按钮容器设置 padding（根据尺寸变体调整）。为了保证“高度固定”，可以把按钮容器的 Resizing 设为 Hug，同时通过 padding + 文本行高来稳定高度；或直接把容器高度锁定（Fixed height），内部垂直居中。
当文案变长时，你希望按钮横向增长，而不是压扁图标或换行。检查这些设置：
- Label：Hug contents，且不要开启换行（Text 的 Auto height 保持单行即可）。
- 内层内容区：Hug contents。
- 外层按钮容器：Hug contents（或 Fixed height + Hug width）。
- 图标：固定 16x16（或根据系统图标大小），并保持 Hug。
如果你做“全宽按钮”，把外层容器的宽度改为 Fill container，同时把内层内容区的 Alignment 设置为居中或两端对齐即可。
选中外层按钮容器，创建组件（Create component）。然后创建 Variants（Combine as variants）。建议你把属性拆成几个维度，后期最好维护：
- Type：Primary / Secondary / Outline / Text
- State：Default / Hover / Pressed / Disabled
- Size：S / M / L
在不同 Type 与 State 下，主要变化是：背景色、描边、文字颜色、阴影/透明度。比如：
- Primary：背景用 Primary/Default，文字用 Text/OnPrimary
- Outline：背景透明，描边用 Border/Default，文字用 Text/Primary
- Disabled：整体降低对比度（可用单独的 Disabled 颜色样式）并关闭阴影
注意：先把“Default”做完，再复制改 Hover/Pressed/Disabled，效率最高。
让按钮支持“无图标/左图标/右图标/双图标”四种情况。做法：
1）进入组件编辑，选中 Icon/Left，开启 Component property → Boolean（例如命名为 Left icon）。
2）选中 Icon/Right，同样建立 Boolean 属性（Right icon）。
3）当图标隐藏时，Auto Layout 会自动收缩间距，不会留下空洞。
如果你希望“只有一个图标时按钮仍居中”，可以把内层内容区改为一个 Auto Layout 组，图标隐藏时依然维持居中对齐即可。
选中 Label，在右侧属性面板里把文本变成 Text property（例如命名为 Label）。这样你在页面上放组件实例时，直接改文案即可，不需要进入组件内部。
最后建议你在组件旁边放一段简短说明（或在组件描述里写）：
- Type 用于区分主次操作；页面一个区域建议最多 1 个 Primary。
- Hover/Pressed 由设计规范定义；如果交互由开发实现，设计只需输出状态颜色。
- Size：移动端优先 M/L；表格/密集工具栏用 S。
- 禁用态：仅用于不可用，不要用来表示“次要”。
这样你就完成了一套可复用、可扩展的按钮组件库。后续你可以按同样方式做 Input、Tag、Switch 等基础组件，逐步形成设计系统。
