这篇教程用一个“按钮 + 卡片”的小组件库，带你把自动布局（Auto Layout）从“会用”提升到“能复用”。完成后你会得到：
1）一组不同尺寸、不同状态的按钮；2）一套可扩展的卡片组件；3）清晰的命名与属性结构，方便团队协作。
文件结构：新建一个 Page：Components，把按钮和卡片都放在这里；再新建一个 Page：Playground 用来试用组件。
栅格/间距：如果你做的是移动端，建议先定义 8pt 间距体系（8/16/24/32）。后面所有 padding 和间距尽量落在这个体系里，组件会更“规整”。
1）画一个矩形（R），再放一段文本（T）作为按钮文字。
2）选中矩形+文字，Shift+A 创建自动布局。
3）在右侧 Auto Layout 面板设置：
• Direction：Horizontal
• Padding：左右 16，上下 10（可按你的体系调整）
• Item spacing：8（图标+文字时很常用）
• Alignment：居中
4）把按钮的宽度模式设为 Hug contents（包裹内容），高度也设为 Hug contents。
关键点：按钮应该由内容决定尺寸，而不是固定宽高。这样文字变长时按钮会自动变宽。
1）把基础按钮做成组件（Ctrl+Alt+K / ⌥⌘K）。命名建议：Button
2）在组件上点 “+” 新建 Variant。把属性命名为：Size = S / M / L
3）分别调整三种尺寸的 padding 与字体大小（示例）：
• S：左右 12，上下 8，字号 12
• M：左右 16，上下 10，字号 14
• L：左右 20，上下 12，字号 16
技巧：只改 Auto Layout 的 padding 和文本样式，其它（圆角、对齐）尽量保持一致，这样视觉更统一。
建议拆成两类属性：
• Type：Primary / Secondary / Ghost
• State：Default / Hover / Pressed / Disabled
做法：
1）继续为 Button 组件添加属性：Type、State。
2）Primary：背景填充主色，文字白色。
3）Secondary：浅色背景或描边，文字主色。
4）Ghost：透明背景，仅文字（可加轻微 hover 底色）。
5）Disabled：降低不透明度（例如 40%）并确保对比度可读。
命名建议：Button / Type=Primary / Size=M / State=Default。不要在标题里加“系列001”这种前后缀，后期搜索会很痛苦。
如果你希望按钮支持“可选图标”，推荐用组件属性（Component properties）：
1）在按钮里放一个 Icon（可以是矢量图标）
2）把 Icon 设置为可见性开关（Boolean property）：Icon = true/false
3）Icon 关闭时，Item spacing 仍然保持合理（常见做法是让 Icon 图层本身隐藏即可，Auto Layout 会自动收缩）。
1）画一个 Frame，Shift+A 创建垂直自动布局（Vertical）。
2）设置卡片容器：
• Padding：16
• Item spacing：12
• Fill：白色/浅灰
• Stroke：轻描边（可选）
• Corner radius：12
3）卡片内部放三块内容：
• 标题（Hug）
• 描述（Hug，允许多行）
• 操作区（Horizontal Auto Layout），右侧放你的 Button 组件实例
关键点：卡片外层的宽度建议设为 Fill container（填充父级）。这样你把卡片放进不同栅格或列表时，它会自动适配宽度。
常见需求是卡片可能没有描述、没有按钮、或者有图片。做法同按钮：
1）把描述层设成可见性开关（Has de ion）。
2）把底部操作区设成可见性开关（Has actions）。
3）如果有封面图：把图片 Frame 放在最上方，并做一个 Has cover 开关。
当某块内容隐藏时，Auto Layout 会自动收紧，不需要你手动调整间距。
在 Playground 页面做三件事：
1）把按钮文字改成更长的文案，看是否自动扩展且不挤压。
2）切换 Size/Type/State，看是否出现圆角不一致、文字对齐偏移等问题。
3）把卡片放进一个垂直列表（Auto Layout 列表），观察 Fill/Hug 设置是否合理。
• 按钮文字上下不居中：检查文本框的行高（Line height）是否合理，优先用 Auto Layout 居中对齐。
• 组件变体越来越乱：先确定属性维度（Size/Type/State），不要用“Variant2/Variant3”这种默认名。
• 卡片内容撑不开：外层宽度应为 Fill container，内部文字可保持 Hug 或 Fill（视布局而定）。
下一步可以加：
• Button 的 Loading 状态（加一个旋转图标，文本可选隐藏）
• Card 的不同密度（Density：Comfortable/Compact）
• 颜色变量与文本样式（配合 Styles/Variables，真正形成小型 Design System）
只要你坚持：尺寸由内容决定、属性命名清晰、Fill/Hug 用对，组件复用会非常顺滑。
