这篇教程的目标是：用一套“结构稳定 + 命名清晰 + 可扩展”的做法，在 Figma 里搭建按钮组件库。最终你会得到一个 Button 组件，能通过属性快速切换：样式（主/次/描边/文字）、尺寸（S/M/L）、图标（无/左/右）、状态（Default/Hover/Pressed/Disabled）。
1）统一内边距与高度：先定一个基准尺寸（例如 M：高度 40，左右 padding 16；S：高度 32，padding 12；L：高度 48，padding 20）。
2）统一圆角：建议按钮圆角与系统一致（例如 8），后续用变量管理。
3）文字样式：为按钮文本创建一个 Text Style（如 Button/Label），便于全局替换。
新建一个 Frame，开启 Auto Layout（水平）。结构建议：
Icon（可选） + Label + Icon（可选）
关键设置：
1）Auto Layout：Spacing 8；Padding 16/12/20（按尺寸）；对齐居中。
2）Label：Hug contents；设置为你的 Button/Label 文本样式。
3）Icon：固定宽高（如 16 或 20），建议用组件占位，后续可以替换成实际图标。
给按钮骨架设置：
1）填充：主色（例如 #1677FF）。
2）文字：白色，确保对比度达标。
3）阴影（可选）：轻微投影用于提升层级，但别过重。
此时先别急着做很多样式，先把“结构”稳定下来。
选中按钮 Frame → Create component。建议立即命名为：Button。
然后开始规划你要的属性维度（后续都用 Variants 管理）：
Type：Primary / Secondary / Outline / Text
Size：S / M / L
State：Default / Hover / Pressed / Disabled
Icon：None / Left / Right
右键组件 → Combine as variants。
建议按“最小闭环”推进：先只做 Primary 的 4 个状态（Default/Hover/Pressed/Disabled），确认切换顺滑后，再扩展到其他 Type。
状态建议：
Hover：填充颜色加深 6%~10%
Pressed：再加深 10%~14%
Disabled：降低不透明度 + 文本颜色降低（不要只改透明度，容易显得脏）
如果你在 Figma 开启了变量功能，推荐把以下内容做成变量：
1）Color：Primary/Default、Primary/Hover、Primary/Pressed、Text/OnPrimary、Text/Disabled、Border/Default 等。
2）Radius：Button/Radius（例如 8）。
把每个 Variant 的填充/描边/文字色替换为变量，这样改主题色时不用逐个改组件。
复制一份 M 的按钮 Variant，调整为 S 和 L：
1）高度：32/40/48（示例）
2）Padding：12/16/20（示例）
3）字体大小：可保持一致（更稳），或只在 L 增大 1~2 号，但要在系统层面统一。
注意：Label 仍保持 Hug contents；按钮本体保持 Hug contents，这样适配文案长度更自然。
不要做 Button/IconLeft、Button/IconRight 这种分裂命名；建议统一用 Icon 属性控制。
做法：
1）Icon Left / Icon Right 做成可见性开关：None 时隐藏左右图标并把其宽高设为 0（或用 Auto Layout 里直接移除该层）。
2）保持 spacing 不变，切换时不会跳动。
如果你不想手动维护隐藏逻辑，也可以用 3 个骨架：None/Left/Right，然后合成 Variants。
Secondary：浅色填充（或中性灰），文字用主色或深色。
Outline：无填充 + 边框 1px + 文字主色，Hover/Pressed 可以加浅底或边框加深。
Text：无填充无边框，Hover/Pressed 用浅底提升可点性。
每种 Type 都要有 4 个 State，保持规则一致，你的组件库就会“看起来像同一个系统”。
在组件属性里设置默认值：Type=Primary，Size=M，State=Default，Icon=None。
并在组件旁边写一段简短用法：什么时候用 Primary/Secondary；禁用态不要用于不可达的关键路径等。
1）文字换行：按钮一般不建议自动换行，确保 Label 不会被约束成固定宽；必要时限制最大宽并做省略。
2）对齐漂移：图标显示/隐藏时不要让 padding 变化，避免视觉跳动。
3）状态不统一：先定规则（加深多少、透明度多少），再批量应用，别靠“看着顺眼”逐个调。
拖 6~8 个按钮到页面上，快速切换属性：
1）长文案/短文案是否都能自然撑开；
2）切换 Hover/Pressed 是否有一致的反馈；
3）Outline/Text 在浅色背景是否清晰；
4）Disabled 是否一眼能识别但仍可读。
通过自检后，把 Button 组件放进你的 Design System 页面并锁定为团队默认按钮。
