做完这篇，你会得到一套“可直接复用”的按钮组件（Button），并且能在任何页面里用 Variants 快速切换：尺寸（S/M/L）、样式（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled）、图标（None/Left/Right）。同时基于 Auto Layout，按钮宽度会随文字自动伸缩。
1）在右侧面板先创建基础文字样式：Button/14（14px，行高 20）。
2）创建 2-3 个颜色样式：Brand/Primary、Neutral/0、Neutral/900。如果你用的是 Figma Variables，也可以建一个 Color collection，后面维护会更省心。
1）新建一个 Frame，命名 Button/ 。
2）给这个 Frame 开启 Auto Layout（Shift + A）：方向选水平（Horizontal）。
3）设置 Padding：左右 16，上下 10；Item spacing：8。
4）圆角（Corner radius）设为 10；描边 0 或 1（后续 Secondary/Ghost 用）。
5）放入一个 Text：写 按钮，应用 Button/14 文字样式。
6）Auto Layout 的 Width 设为 Hug contents，Height 设为 Hug contents。这一步决定了按钮会“随文字自动伸缩”。
1）在文字左侧插入一个 16x16 的 Icon（可以先用一个方块替代），命名为 Icon/Left。
2）再在文字右侧插入一个 Icon，命名为 Icon/Right。
3）把两个图标的可见性（Visibility）先关闭。后面用 Variants 控制显示/隐藏。
提示：如果你担心“隐藏后还占位”，确认图标是在 Auto Layout 里，Figma 会在隐藏层时自动不占空间。
1）选中 Button/ ，按 Ctrl + Alt + K（Create component）。
2）点击右侧 Add variant，把维度规划成 4 个属性（命名清晰非常重要）：
• Size：S / M / L
• Type：Primary / Secondary / Ghost
• State：Default / Hover / Pressed / Disabled
• Icon：None / Left / Right
最终组件名建议：Button（不要带“教程/系列”前后缀）。
思路：Size 只改 Padding、高度感受与字号，不要动颜色。
1）Size=S：Padding 左右 12，上下 8；字体可用 13/18（按你的系统）。
2）Size=M：Padding 左右 16，上下 10；字体 14/20。
3）Size=L：Padding 左右 18-20，上下 12；字体 15/22。
如果你希望按钮宽度统一，也可以把 Width 改成 Fill container，但那更适合表单/列表场景。通用组件建议 Hug。
1）Primary：填充 Brand/Primary；文字用 Neutral/0；描边 0。
2）Secondary：填充 Neutral/0；描边 Neutral/900（或中性色）；文字 Neutral/900。
3）Ghost：填充透明；描边 0；文字 Brand/Primary（或中性色）；可以加轻微背景用于 Hover。
提示：Type 是“视觉风格”，要避免和 State 混在一起（比如不要在 Type 里写 Hover 的颜色）。
1）Default：保持基础颜色。
2）Hover：Primary 的填充略变深；Secondary/Ghost 可以加淡背景（例如 4%-8% 透明度）。
3）Pressed：再深一档，同时可以加 1px 内阴影或降低整体亮度，体现按下感。
4）Disabled：降低不透明度（例如 40%-60%），并关闭阴影/高光，文字也随之变淡。
小技巧：在交互原型里，Hover/Pressed 的切换可以通过 Component interaction 来实现（On hover → Change to，On click → Change to）。
1）Icon=None：两个 Icon 都隐藏。
2）Icon=Left：打开 Icon/Left，关闭 Icon/Right。
3）Icon=Right：关闭 Icon/Left，打开 Icon/Right。
如果你还需要“双图标”，可以额外加一个 Icon=Both 的值。
• 任意修改文字内容，按钮能自动变宽（Hug contents）。
• 切换 Size 不会影响颜色；切换 Type 不会破坏结构；切换 State 只改变交互视觉。
• Icon 的显示/隐藏不会留下空白间距。
• 命名规范：Button / Size=… / Type=… / State=… / Icon=…，团队协作时一眼看懂。
当你已有一堆“手工按钮”时：先把旧按钮选中，然后在右侧替换为新 Button 组件；再用属性面板切换到对应的 Type/State/Size。统一后，后续改一次组件样式，所有页面自动更新。
