很多人做按钮组件时，只做了一个固定尺寸的按钮；一旦文案变长、需要图标、需要多状态，就会复制粘贴出一堆版本。更好的做法是：用 Auto Layout 让按钮跟随内容自适应，用 Variants 管理状态/尺寸，用 组件属性 控制图标与文字开关。下面按步骤做一遍，你可以直接在任何项目里复用。
1）在右侧面板把常用颜色做成 Color Styles（例如：Primary/Primary-Hover/Primary-Disabled/Text-OnPrimary/Border）。
2）把常用字体做成 Text Styles（例如：Button/14-Medium、Button/12-Medium）。
这样做的好处是后续换主题/调整字号不会到处改组件。
1）新建一个 Frame，按 Shift + A 添加 Auto Layout。
2）放入按钮文字 Text（例如："Button"），把文本样式设为你的 Button 文本样式。
3）把 Auto Layout 的方向设为 水平，间距设为 8。
4）把内容层的 Size 设为：Hug contents / Hug contents（关键）。
5）如果你需要图标：在文字左侧放一个 16x16 的 Icon Frame（或 SVG），同样保持 Hug。
1）选中内容层，再按一次 Shift + A 把它包进外层 Auto Layout（这层就是按钮容器）。
2）给容器设置圆角（例如 10），填充色为 Primary。
3）设置 Padding（建议起步：左右 16、上下 10），让按钮有足够点击区域。
4）把容器的水平/垂直对齐设为居中；Size 设为：Hug / Hug。
此时你得到的是一个"文案变长会自动变宽"的按钮，后续只需要管理变量即可。
1）把容器 Frame 变成组件：Ctrl + Alt + K（Mac：Cmd + Option + K）。
2）复制两份，分别改命名为：Button/State=Default、Button/State=Hover、Button/State=Disabled。
3）分别设置样式：
• Default：填充 Primary，文字颜色 Text-OnPrimary。
• Hover：填充 Primary-Hover。
• Disabled：填充 Primary-Disabled，文字不透明度降低（例如 60%），并确保对比度仍可读。
4）选中这三份组件，点击右侧 Combine as variants 合并为 Variants。
1）在 Variants 里新增属性 Size：S/M/L。
2）不同尺寸主要改两处：Padding 与字体大小（或行高）。示例建议：
• S：左右 12、上下 8；字体 12。
• M：左右 16、上下 10；字体 14。
• L：左右 20、上下 12；字体 16。
3）注意：内容层仍保持 Hug，按钮容器仍保持 Hug，这样所有尺寸都能自适应文案长度。
1）把图标 Frame 设置为组件里一个独立元素，命名清晰（例如 Icon）。
2）在右侧面板添加 Boolean property（布尔属性），绑定 Icon 的可见性。
3）这样调用按钮实例时，你可以一键开关图标，而不是做两套组件。
很多场景需要按钮铺满容器（例如移动端底部大按钮）。做法：
1）把按钮容器的宽度从 Hug 改成 Fill container（只在需要的 Variant 上这么做）。
2）把内容层在容器内的对齐改为居中或两端对齐（根据你的设计规范）。
3）建议通过一个 Variant 属性 Layout=Hug/Fill 来管理，而不是手动改实例。
• 文案从 2 个字变成 10 个字，按钮是否仍然美观、内边距是否合理。
• 中英文混排（例如"下载 Download"）时行高是否跳动。
• Disabled 状态对比度是否足够，是否仍可读。
• 图标开关后，左右间距是否自动消失（建议用 Auto Layout spacing，让隐藏元素不占位）。
• 不同尺寸切换时，是否只改了 padding/字号而没有破坏 Auto Layout 约束。
如果你经常做多个项目，建议把 Button Variants 放到单独的 Library 文件中，发布为 Team Library。这样每个项目里调用的都是同一套按钮组件，更新规范也更可控。
