1）新建一个 Frame 作为按钮容器，开启 Auto Layout（Shift + A）。
2）在容器里放入文字层（例如“按钮”），设置字体/字号/字重。
3）Auto Layout 建议：方向 Horizontal；Padding 12/16；Item spacing 8；对齐居中；尺寸设为 Hug contents。
4）给容器加圆角与填充色，并加一个轻微阴影（可选）。
1）选中按钮容器，点击右侧 Create component（或 Ctrl/Cmd + Alt + K）。
2）命名建议：Button；如果你有组件库层级，用 Atoms/Button 也可以。
3）把主组件放到专门的组件页（Pages 里建 Components 页面），方便维护。
1）选中组件，点击 Add variant，创建 4 个变体。
2）给变体属性命名：State，取值：Default / Hover / Pressed / Disabled。
3）分别调整各状态的视觉：
- Hover：颜色略亮、阴影略强或加一点描边；
- Pressed：颜色略深，阴影变弱，表现“按下”；
- Disabled：整体降低不透明度（例如 40%~60%），并把交互提示去掉。
4）重要：保持 Auto Layout 规则一致，避免状态切换时尺寸跳动。
1）在 Variants 集合里新增一个属性：Size，取值：S / M / L。
2）分别设置不同 Padding 与字号：
- S：字号 12，Padding 8/12
- M：字号 14，Padding 10/16
- L：字号 16，Padding 12/20
3）检查图标按钮：如果你后续要加图标，建议统一 icon 尺寸（例如 16/20/24）。
1）在按钮内部放入一个 Icon 层（可以用一个简单的矢量占位），并把 Icon 与文字都放在同一个 Auto Layout 容器里。
2）把 Icon 设置为可选：在右侧面板里把该层暴露为 Boolean property（Show icon）。
3）当隐藏 Icon 时，Auto Layout 会自动收紧 spacing，避免出现空隙。
1）打开 Variables 面板，创建一个 Collection（例如 Design Tokens）。
2）创建变量：
- color/button/primary
- color/button/primary_hover
- color/button/primary_pressed
- radius/button
3）把组件里对应的 Fill/Stroke/Corner radius 绑定到变量。
4）好处：当你想换一套品牌色，只需要改变量，所有按钮实例会自动更新。
1）进入 Prototype 标签，给 Default 状态加交互：
- While hovering → 切到 Hover
- While pressing → 切到 Pressed
2）给 Hover 状态也加 While pressing → Pressed。
3）Disabled 状态不加交互，避免误触。
1）所有 Variants 的 Auto Layout 参数一致（方向、对齐、spacing）。
2）文字层为 Hug，避免长文案时撑不起来。
3）图标/文字对齐居中；Icon 颜色跟随状态（也可绑定变量）。
4）Disabled 状态对比度足够，但不抢眼。
5）命名规范：Button / State / Size / Show icon，实例里一眼就能选对。
1）新增属性 Type：Primary / Secondary / Destructive。
2）不同 Type 用不同变量：例如 color/button/secondary、color/button/destructive。
3）组合起来你就得到：Type × State × Size 的完整按钮系统。
