你将得到什么
这是一份可以直接照着做的 Figma 组件化小教程：从 1 个按钮开始，做出可复用的组件与变体（Variants），并把命名、约束、发布检查一并规范化。适合正在搭建设计系统、或想把常用控件“做成资产”的同学。
准备工作（5 分钟）
建议文件结构：新建一个页面命名为 Components，在里面创建一个 Frame 作为组件区（例如 1440 宽），便于集中管理。
建议样式：至少准备 2 组颜色样式（Primary / Neutral）与 2 组文字样式（Button / Caption）。没有也没关系，先按教程完成，再回填样式。
第 1 步：做出基础按钮（ ）
- 新建一个 Frame，开启 Auto Layout（Shift + A）。
- 给 Frame 设置：横向布局、间距 8、内边距左右 16 / 上下 10、圆角 8。
- 在里面放一个文本层，文案写“Button”。文本样式选择 Button（或手动 14-16px）。
- 将这个 Frame 命名为 Button，再右键 Create component（Ctrl/Cmd + Alt + K）。
关键点：按钮必须依赖 Auto Layout 来“自适应文字长度”，否则后续做尺寸变体会很痛苦。
第 2 步：做尺寸变体（Size）
- 选中主组件，点击右侧 + Add variant，进入变体集合。
- 创建 3 个尺寸：S / M / L。建议高度：32 / 40 / 48（只改上下内边距即可）。
- 把变体属性命名为 Size，值分别为 S、M、L。
建议：不要用“Small/Medium/Large”作为值，短值更适合组件面板快速切换。
第 3 步：做状态变体（State）
- 再新增一个属性命名为 State，准备 4 个值：Default、Hover、Pressed、Disabled。
- 颜色建议：Default 用主色；Hover 轻微加深；Pressed 再深一档；Disabled 降低不透明度并把文字改为浅灰。
- 把 Hover/Pressed 的视觉变化控制在“看得出但不过度”，避免抢内容。
注意：Disabled 状态最好同时处理对比度（文字颜色）与交互暗示（不透明度），不要只改透明度。
第 4 步：加入图标（Icon）并保持对齐
- 在按钮内新增一个图标占位（可以用 16x16 的 Frame 或 SVG），放在文字左侧。
- 让图标与文字在同一个 Auto Layout 里，间距保持 8。
- 新增属性 Icon，值：None、Left（进阶可再加 Right）。
- 当 Icon=None 时隐藏图标层；当 Icon=Left 时显示。
技巧：如果隐藏图标后出现空隙，检查 Auto Layout 的子项是否在同一层级，且图标确实被隐藏而不是透明。
第 5 步：命名规范（让组件面板更好用）
推荐命名：Button / {Size} / {State} / {Icon}。示例：Button / M / Default / None。
原因：组件面板里搜索时，能用“Button M”或“Disabled”快速定位，不会出现一堆“Button 1/2/3”。
第 6 步：发布前检查清单（必做）
- 文本是否设置为 Auto layout 内的 Hug contents（适配长短文案）。
- 主组件是否只保留 1 个入口（避免重复组件导致团队引用混乱）。
- Variants 属性名是否统一（Size/State/Icon），值是否短且一致。
- Disabled 状态对比度是否可读（尤其浅底色）。
- 组件描述（De ion）是否写清用途与禁用场景（可选但很加分）。
常见问题排查（收藏用）
1）实例切换变体后，尺寸不跟着变
- 检查实例是否被手动改过内边距/高度；在右侧把被覆盖的属性 Reset。
- 检查按钮外层是否被固定高度的 Frame 包住；尽量让外层也 Hug 或 Auto。
2）隐藏图标后仍然占位
- 确认图标层与文字层都在同一个 Auto Layout 容器里。
- 不要把图标放在绝对定位（Absolute position），否则布局不会回收间距。
3）组件文字换成中文后行高异常
- 统一文字样式的 line-height（建议固定值或 120%-140%）。
- 检查是否混用了不同字体；中文建议使用同一套字体族以减少基线差异。
进阶建议：把按钮变成“可维护资产”
- 把颜色/文字/圆角做成 Styles 或 Variables，后续主题切换更省事。
- 团队协作时，优先在组件库里修改主组件，减少在页面里“临时改样式”。
- 每次新增变体前先问：这是“属性”还是“新组件”？避免变体爆炸。
按以上步骤做完，你的按钮组件就具备了设计系统的雏形：可复用、可扩展、可维护。下一篇可以继续做 Input、Tag、Modal 等，方法完全通用。
