当你需要在多个页面保持按钮一致性（颜色、圆角、间距、字号、状态），用组件做“只改参数不改样式”的按钮是最省时间的。下面这套方法不依赖复杂插件，10分钟就能搭好骨架。
1）新建一个 Frame，命名为 Button/ 。
2）给 Frame 开启 Auto Layout：方向 Horizontal，Padding 12/16（上下/左右），Item spacing 8。
3）放入一段文字（Text），命名为 Label，设置字号 14、行高 20、字重 500。
4）Frame 圆角设 8，最小高度建议 40（根据项目规范调整）。
1）打开 Variables 面板，新建 Collection：Button。
2）创建颜色变量：
- btn/bg/primary：主按钮背景色
- btn/bg/primary_hover：悬停背景色
- btn/bg/primary_pressed：按下背景色
- btn/bg/disabled：禁用背景色
- btn/text/on_primary：主按钮文字色
- btn/text/disabled：禁用文字色
3）创建数值变量（Number）：
- btn/radius：圆角（例如 8）
- btn/padding_y：上下内边距（例如 10~12）
- btn/padding_x：左右内边距（例如 16）
- btn/gap：图标与文字间距（例如 8）
4）把这些变量绑定到 Button/ 上：圆角绑定 btn/radius；Padding 绑定 btn/padding_y / btn/padding_x；Item spacing 绑定 btn/gap；文字颜色绑定 btn/text/on_primary。
1）把 Button/ 转成组件（Create component），命名 Button。
2）添加 Variant 属性：State，值：Default / Hover / Pressed / Disabled。
3）分别为各状态绑定背景变量：
- Default → btn/bg/primary
- Hover → btn/bg/primary_hover
- Pressed → btn/bg/primary_pressed
- Disabled → btn/bg/disabled，同时文字颜色切换为 btn/text/disabled
4）交互（Prototype）：
- While hovering → 切到 Hover
- While pressing → 切到 Pressed
这样在预览里就能看到真实的状态反馈。
1）再加一个 Variant 属性：Size（S / M / L）。
2）用不同的 padding 与字号（或绑定到变量）实现三档尺寸。建议：S=32高，M=40高，L=48高。
3）如果按钮需要图标：在 Auto Layout 里放一个 Icon（可用 16/20/24），并把 Icon 的可见性做成布尔属性（Property）。
- Auto Layout 设为 Hug contents；按钮容器不要写死宽度（除非是表单主按钮）。
- Label 文本使用 Auto width，避免多语言溢出。
- 所有颜色尽量来自变量，不要直接选色。
- 命名统一：Button/Primary、Button/Secondary 等，方便团队搜索与维护。
btn/bg/primary, btn/bg/primary_hover, btn/bg/primary_pressed, btn/bg/disabled
btn/text/on_primary, btn/text/disabled
btn/radius, btn/padding_y, btn/padding_x, btn/gap
做完这一套后，你只需要改变量值，就能一键换主题或适配不同品牌色。
