目标是做出一套“可直接拿去项目里用”的按钮组件：尺寸随文案自适应、可切换大小与风格、并且包含默认 / 悬停 / 按下 / 禁用等状态。
1）新建一个 Frame（例如 1440×900），在左侧创建一个 Page 命名为「Components」。
2）准备 4 个颜色样式：Primary / Primary Hover / Primary Pressed / Disabled（可用你项目的主色替换）。
3）准备一个文本样式：Button/14（或 16），行高建议 20–24。
1）画一个圆角矩形（例如 120×40，圆角 8）。
2）在矩形上方放一个文字层，输入「按钮」并居中对齐。
3）框选矩形 + 文字，按 Shift + A 开启 Auto Layout。
4）在右侧 Auto Layout 面板设置：
· Padding：左右 16，上下 10（先用这个值，后面会做成可变）
· Spacing：8（为以后加图标留空间）
· Alignment：居中
5）把按钮的宽高设置为 Hug contents（内容自适应），这一步决定了按钮会随文案自动撑开。
1）选中文本层，命名为「Label」。
2）在组件化之前先验证：把 Label 改成更长的文案（如「立即下载并开始使用」），按钮是否能自动变宽。
3）如果按钮没有自动撑开，检查是否仍是 Fixed width/height；确保按钮容器为 Hug contents。
1）选中按钮容器，按 Ctrl/Cmd + Alt + K 创建组件。
2）命名建议：
· 组件：Button
· 文本层：Label
清晰命名会让后面变体和属性更好用。
1）选中 Button 组件，在右侧点击 + Variant（或 Duplicate 并 Combine as variants）。
2）先做一个属性：State，包含 4 个值：
· Default / Hover / Pressed / Disabled
3）分别设置每个状态的填充色与透明度（Disabled 可降低不透明度并改为灰）。
4）再做一个属性：Type，包含：
· Primary / Secondary（Secondary 可用描边 + 透明背景）
这样你会得到一个二维变体矩阵：Type × State。
1）新增属性：Size：S / M / L。
2）对不同 Size 调整：
· Padding（例如 S=12/8，M=16/10，L=20/12）
· 字号（可保持不变或 L 增大）
3）关键点：无论怎么改 Padding，容器依旧保持 Hug contents，确保按钮总能随文案自适应。
1）切到 Prototype 面板。
2）在 Default 变体上设置：
· While hovering → Change to Hover
· While pressing → Change to Pressed
3）在 Disabled 上不设置交互，保持静态。
这样在演示或交付时，按钮会有真实的反馈。
1）把 Button 组件放到「Components」页面，并用分隔线/标题标注规范。
2）给组件设置描述（De ion），写清楚 Type/State/Size 的用途。
3）如果团队有 Design Token，建议把颜色/圆角/阴影都做成 Styles，减少重复劳动。
Q1：文案变长后按钮不自动变宽？ 检查按钮容器是否为 Hug contents；文本是否被固定宽度限制。
Q2：Secondary 描边按钮文字不居中？ 检查 Auto Layout Alignment 是否居中，Padding 是否一致。
Q3：Variants 太多难维护？ 优先保留真正会用到的组合；把很少用的状态（如 Focus）后续再加。
Button / Type=Primary, State=Default, Size=M
Button / Type=Secondary, State=Hover, Size=S
后续在组件面板里搜索会非常顺手。
