这一篇是可直接照做的 Figma Auto Layout（自动布局）入门练习：我们会从 0 做出一个可复用的按钮组件，并把它扩展为「默认 / 悬停 / 禁用」三种状态。最后你会得到一个可以丢进组件库、在不同页面快速复用的按钮。
1）新建一个 Frame（或直接新建一个 Text）作为按钮文字，比如：Primary。
2）把文字样式先定下来：字号 14-16、字重 500、行高 20（常见 UI 基线）。
3）建议先给按钮做一个明确的命名：Button/Primary，后面做组件和变体会更清晰。
1）选中文字图层。
2）按快捷键：Windows Shift + A / Mac Shift + A，Figma 会自动把文字包进一个 Auto Layout 容器。
3）检查右侧面板是否出现 Auto Layout 区块（方向、间距、Padding）。
这一步决定按钮“手感”。推荐一套通用起步值：
1）Padding：左右 16，上下 10（如果字号更大可适当加到 12）。
2）圆角：8（更现代）；如果是偏圆润的风格可以用 999 做胶囊按钮。
3）背景色：先给一个主色，例如 #1F6FEB（你也可以换成品牌色）。
4）文字颜色：白色 #FFFFFF。
1）Auto Layout 方向：横向（Horizontal）。
2）对齐：垂直居中（Center）。
3）Spacing between items：如果按钮只有文字，这个值无所谓；如果未来会加 Icon，建议先设为 8。
4）如果你准备支持左侧图标：先放一个 16x16 的占位矩形（后面换成图标），再看整体是否居中。
这是 Auto Layout 的核心价值：文案变长，按钮自动变宽，不需要手动拉。
1）选中按钮的 Auto Layout 容器。
2）Width（宽度）设置为 Hug contents（贴合内容）。
3）Height（高度）通常也是 Hug contents。
4）尝试把文字从 Primary 改成 Download now，观察按钮宽度是否自动变化。
1）选中按钮最外层容器。
2）点击右侧的 Create component 或快捷键 Windows Ctrl + Alt + K / Mac Cmd + Option + K。
3）组件命名建议：Button/Primary（或 Button + 变体管理）。
按钮状态是 UI 里最常见的变体管理场景。
1）选中组件，右侧点击 Add variant，创建多个变体。
2）建立属性：State（状态），值设为 Default / Hover / Disabled。
3）分别设置样式：
- Default：背景 #1F6FEB，文字白色。
- Hover：背景稍微加深（例如 #1A5FD1），文字不变。
- Disabled：背景变浅灰（例如 #D0D7DE），文字灰（例如 #6E7781）。
1）对比度：确保文字与背景对比足够，特别是 Disabled 状态不要太淡导致不可读。
2）点击区域：移动端建议高度至少 44px；如果你的按钮偏小，可以通过增加上下 Padding 达到舒适触达。
3）状态一致性：Hover、Pressed、Focus（如果要做）最好只改变 1-2 个维度（颜色/阴影），避免“像换了个按钮”。
1）从 Assets 面板拖一个按钮实例到页面。
2）修改文案、切换变体（State），看布局是否仍然稳定。
3）如果你在按钮左侧加入 Icon，再次确认 Spacing=8 是否合适，必要时做一个属性 Icon（On/Off）来控制是否显示图标。
1）按钮宽度不跟着文案变：检查最外层是否是 Auto Layout，Width 是否 Hug contents。
2）文字不居中：检查对齐是否 Center，或文字行高是否异常。
3）加了 Icon 后变形：检查 Icon 图层是否设置为 Fixed size，避免 Hug 导致被挤压。
4）组件改不动：你可能在实例里想改“主组件”的属性；回到主组件再调整样式。
- 增加 Size 变体（S/M/L），用不同 Padding 管理尺寸。
- 增加 Type 变体（Primary/Secondary/Ghost）。
- 做一套按钮的 Focus 样式（描边或外发光）提高键盘可达性。
完成这些，你就拥有了一套可以长期复用的按钮系统骨架。
