完成后你会得到一套“可直接放进组件库”的按钮：支持多尺寸（S/M/L）、多类型（Primary/Secondary/Tertiary）、多状态（Default/Hover/Pressed/Disabled）、可选图标（左/右），并且有清晰的命名与交付说明。
1）新建一个 Variables 集合（例如：Button）。
2）创建颜色变量：
• btn/bg/primary、btn/bg/secondary、btn/bg/tertiary
• btn/text/onPrimary、btn/text/onSecondary、btn/text/onTertiary
• btn/border/secondary（如需描边）
3）创建尺寸变量（Number）：paddingX、paddingY、radius、gap、height。
建议给 S/M/L 三套值，后面用 Variant 来切换。
1）画一个 Frame，开启 Auto Layout（水平）。
2）对齐方式选“居中”，间距（gap）绑定变量。
3）左右 padding 绑定 paddingX，上下 padding 绑定 paddingY。
4）高度建议用固定 height（或用 padding 形成高度），圆角 radius 绑定变量。
1）在按钮里放一个 Icon（可选）和一个 Text。
2）Text 的 Auto Layout sizing 设置为“内容决定宽度”（Hug contents）。
3）整个按钮容器建议设置为 Hug contents（宽度），这样文本变化不会撑坏结构。
4）给 Icon 设置固定尺寸（如 16/20），并确保与文字基线视觉居中。
1）将按钮 Frame 转为 Component。
2）创建 Variants（推荐属性）：
• Type：Primary / Secondary / Tertiary
• Size：S / M / L
• State：Default / Hover / Pressed / Disabled
• Icon：None / Left / Right
3）命名建议：Button/Type=Primary,Size=M,State=Default,Icon=None。
1）背景色：按 Type 绑定到对应的变量（例如 Primary 用 btn/bg/primary）。
2）文字色：按 Type 绑定到对应的文字变量（例如 onPrimary）。
3）Secondary/Tertiary 如需描边：stroke 颜色绑定 btn/border/secondary；背景可透明或浅色。
4）State（Hover/Pressed/Disabled）：最稳妥的做法是为每个 Type 再准备 state 变量（如 btn/bg/primary/hover）。如果项目不复杂，也可直接在变体里覆写颜色，但后期维护成本更高。
1）为 Icon 图层创建布尔属性（显示/隐藏）。
2）为文案创建 Text 属性（让使用者直接改按钮文案）。
3）如果有 Loading：放一个 Spinner 组件，做一个 Boolean 属性“Loading”，并在 Loading=true 时隐藏文字/图标、显示 Spinner。
• Auto Layout：按钮容器为横向，居中对齐；文本为 Hug；图标固定大小。
• Spacing：gap/padding/height 统一由变量控制（避免手改）。
• 对比度：Primary 文字必须满足可读性；Disabled 状态不要仅靠透明度，最好同时调亮/调灰。
• 命名：Type/Size/State/Icon 四个属性清晰一致，避免混用中文/英文。
1）按钮高度与内边距按 Size（S/M/L）走，文案不换行。
2）Type 控制配色；State 控制交互；Disabled 时不响应点击。
3）图标与文字间距固定为 gap，图标位置由 Icon 属性决定。
你可以在同一套变量下继续增加：Icon Button（纯图标）、Split Button（带下拉）、Danger（危险操作）、 Button（链接样式）。只要坚持“变量控制 + 变体组合 + 属性开关”，组件库会越做越稳。
