这篇教程的目标很明确：在 Figma 里从 0 做一套可复用的按钮组件，并能通过组件属性/变量快速切换「类型、大小、状态、图标」等配置。做完后，你可以把它直接丢进任意项目当作最小可用的设计系统基座。
1) 打开右侧面板的 Variables（变量）。新建一个 Collection，例如命名为 DS。
2) 在 DS 里创建颜色变量（Color）。建议至少准备：
• color/primary：主色（按钮背景）
• color/onPrimary：主色上的文字颜色
• color/primaryHover：悬停背景色
• color/primaryPressed：按下背景色
• color/disabledBg：禁用背景色
• color/disabledText：禁用文字色
3) 再创建数字变量（Number），例如：
• radius/md（如 8）
• space/xs（如 8）
• space/sm（如 12）
• height/sm（如 32）
• height/md（如 40）
提示：变量的意义不是“为了高级”，而是让你以后改一处就全局生效。哪怕只有 6-10 个变量，也能明显减少返工。
1) 新建一个 Frame，当作按钮容器（建议命名为 Button）。
2) 开启 Auto Layout（Shift + A）。设置：
• 方向：Horizontal
• Padding：左右用 space/sm，上下用 space/xs
• Item spacing：8（或绑定 space/xs）
• 对齐：居中
3) 给容器设置圆角：绑定 radius/md。
4) 放入文字 Text（命名为 Label），文字内容先写 “Button”。
5) 给容器填充背景色：绑定 color/primary；文字颜色绑定 color/onPrimary。
1) 选中按钮 Frame，点击 Create component（创建组件）。
2) 复制一份，做两种尺寸：sm 与 md。
3) 关键点：用“固定高度 + 自适应宽度”。在 Auto Layout 中将高度设置为变量 height/sm / height/md，宽度保持 Hug contents。
4) 将两份组件合并为 Component set（组件集）。在右侧属性里把变体属性命名为 Size，值为 sm / md。
1) 在组件集中再添加状态变体：Default / Hover / Pressed / Disabled。
2) 为每个状态绑定不同的背景变量：
• Default：color/primary
• Hover：color/primaryHover
• Pressed：color/primaryPressed
• Disabled：color/disabledBg
3) Disabled 状态的文字颜色改绑到 color/disabledText，并降低整体对比度（可选：把不透明度降到 60%-80%）。
4) 把变体属性命名为 State，值为 Default / Hover / Pressed / Disabled。
很多按钮需要“可选图标”。做法是：先放一个图标占位，再用组件属性控制显示/隐藏。
1) 在按钮 Auto Layout 内，文字左侧放一个 Icon（可以是简单的 16x16 向量）。命名为 Icon。
2) 选中 Icon 图层，在右侧选择 Create component property → Boolean。
3) 命名为 Has icon，默认 true。把 Icon 的 Visible 绑定到该属性。
4) 当 Has icon = false 时，Icon 隐藏，Auto Layout 会自动收缩间距，不需要做额外的“无图标变体”。
如果你希望“同一个按钮上能换不同图标”，可以用 Instance swap：
1) 把 Icon 做成一个独立组件（例如 Icon/Arrow、Icon/Search 等）。
2) 在按钮里使用某一个 Icon 的实例。
3) 选中该实例，Create component property → Instance swap，命名为 Icon。
4) 使用按钮时，你就能在属性面板直接替换图标组件。
1) 选中 Label 文本图层，Create component property → Text。
2) 命名为 Label。以后使用按钮时，直接在右侧改文案，不需要进入组件内部。
• 组件命名：建议用 Button，变体属性用 Size/State，值尽量短且一致。
• 状态不要靠手动改色：尽量都绑定到变量，避免后期改主题时漏改。
• Disabled 不要只降透明度：最好有明确的 disabledBg/disabledText，确保可读性。
• 交付给开发：把变量命名对齐 token（例如 color/primary → --color-primary）。
你可以基于同一套路继续扩展：
• Button type：Primary / Secondary / Ghost（用 Type 变体 + 不同变量）
• Loading：加一个 Spinner，并用 Boolean 属性控制显示
• Icon-only：把 Label 隐藏，用最小宽高规则做“纯图标按钮”
做到这里，你已经拥有一套可复用、可维护、可扩展的按钮组件。
