很多界面里按钮会反复出现：主按钮/次按钮/文字按钮，不同尺寸、不同状态（默认/悬停/按下/禁用），还可能带左/右图标。我们这篇教程的目标是：在 Figma 里做出一套可复用的按钮组件，用 Variants 管理变化，并且能在原型里自动切换交互状态。
1）建立基础样式
在页面上先准备三类基础样式，后面做组件会更稳定：
• 文字样式：Button/14（或 16），字重 500/600，行高与字号一致或 +2
• 颜色变量：Primary/500、Primary/600（Hover）、Primary/700（Pressed）、Gray/200（Disabled 背景）、Gray/500（Disabled 文案）
• 圆角与间距：Radius 8；内边距建议从 12/16 开始
1）画一个 Frame 作为按钮容器
新建一个 Frame（不是 Group），命名为 Button。打开 Auto Layout：
• 方向：Horizontal
• Padding：左右 16，上下 10（可按项目调整）
• Item spacing：8
• 对齐：居中
2）放入文字层
创建文本 “Button”，应用按钮文字样式，确保按钮高度由 Padding 控制。
3）设置约束与 Resizing
把 Button Frame 的 Resizing 设为 Hug contents；文本同样设为 Hug。这样按钮会根据文字自动伸缩。
在文字左侧放一个 16x16 的图标占位（可以用任意图标或小方块替代），命名为 IconLeft；右侧同理命名 IconRight。
关键点：先把两侧图标都放进结构里，后面用 Variant 属性控制显隐，避免未来“拆组件重来”。
选中 Button Frame → Create component。
然后复制出多个状态，用 “Combine as variants” 合并。建议的属性拆分：
• Type：Primary / Secondary / Ghost
• Size：S / M / L
• State：Default / Hover / Pressed / Disabled
• Icon：None / Left / Right / Both
命名示例：Type=Primary, Size=M, State=Default, Icon=None
这样做的好处是：以后要新增一种类型或尺寸时，只扩展对应维度，不会造成命名混乱。
在 Primary/Default 上设置：
• 背景：Primary/500
• 文案：#FFFFFF
•（可选）阴影：轻微提升层级
Secondary/Default 示例：
• 背景：#FFFFFF
• 边框：Primary/500（1px）
• 文案：Primary/500
Ghost/Default 示例：
• 背景：透明
• 文案：Primary/500
建议的变化逻辑：
• Hover：背景加深一档（Primary/600），或边框/底色更明显
• Pressed：再加深一档（Primary/700），并可略微降低阴影
• Disabled：背景转灰（Gray/200），文案转灰（Gray/500），图标同色；同时把透明度固定为 100%（不要用整体透明度，避免文本变糊）
提示：尽量只改“颜色/边框/阴影”，不要在不同状态改变 padding 或字号，否则组件跳动会影响布局。
以 M 为基准：
• S：左右 12，上下 8；字体 14
• M：左右 16，上下 10；字体 14/16（按产品规范）
• L：左右 20，上下 12；字体 16
注意：图标尺寸可以保持 16 或 20，尽量与字号匹配；Item spacing 可随尺寸小幅调整（如 6/8/10）。
在 Icon=None 的 variant 里，将 IconLeft/IconRight 设为 Hidden（眼睛关掉），但保留层级与命名；在 Icon=Left 里只显示左图标；Icon=Both 两侧都显示。
这样切换 Icon 属性时，Auto Layout 会自然收缩，不会出现空位。
在组件集（Variants）里，选中 Default variant：
• On hover → Change to → Hover
• On mouse down → Change to → Pressed
在 Hover variant：
• Mouse leave → Change to → Default
在 Pressed variant：
• Mouse up → Change to → Hover（或 Default，按你的交互标准）
在 Disabled variant：不添加交互，保证不可点击的预期。
• 在右侧属性面板检查四个属性是否都可被选择（Type/Size/State/Icon）
• 用真实按钮文案测试：如 “确定”“提交订单”“Continue”
• 放进一个示例页面，复制 10 个按钮，随机组合属性，检查是否会出现溢出、错位、对齐不一致
1）切换 Variant 后尺寸乱跳：检查是否有人在某些 variant 里改了 padding/字号或把 Resizing 从 Hug 改成 Fixed。
2）图标开关导致空白：不要用透明度 0；用 Hidden，并保证图标是 Auto Layout 子项。
3）Disabled 看起来“发虚”：不要整体降低透明度；改用明确的灰色 token。
4）命名难维护：属性拆分要稳定，别把多个维度塞进一个名字里。
组件名：Button
属性：Type / Size / State / Icon
取值：Primary/Secondary/Ghost；S/M/L；Default/Hover/Pressed/Disabled；None/Left/Right/Both
完成后，这套按钮就能直接进入你的设计系统：一处改动，全局更新；原型交互也更接近真实产品。
