这篇教程带你在 Figma 里从零做出两个可复用组件：一个“自适应按钮”，一个“可伸缩信息卡片”。做完后你会掌握 Auto Layout 的核心：padding/间距、对齐、Hug/Fill、约束，以及用 Variants 管理不同状态。
1）新建一个 Frame（快捷键 F），尺寸任意，比如 800x600，用作练习画布。
2）准备两种文字样式：14/20（正文）和 16/24（标题）。如果你没有样式库，也可以先直接设置字体大小与行高，后续再创建 Text Styles。
3）准备两种颜色：主色（按钮背景）和灰色（卡片边框/说明文字）。
步骤 A：做按钮外观
1）画一个矩形作为按钮底（R），比如 120x40，圆角 10。
2）放入一个文本层，输入“立即下载”。把文本放在矩形上方居中。
步骤 B：把它变成 Auto Layout
3）选中矩形 + 文本，按 Shift + A（Add Auto Layout）。你会看到它变成一个带自动布局的 Frame。
4）在右侧 Auto Layout 面板设置：方向 Horizontal；Spacing 8；Padding 左右 16、上下 10；对齐 Center。
步骤 C：设置 Hug / Fill
5）选中文本层，把宽度设为 Hug contents；选中按钮容器，把宽度设为 Hug contents。这样文本变长，按钮会自动变宽。
6）测试：把按钮文字改为“立即下载高清资源包”，看按钮是否仍保持左右 padding，不会挤压文字。
技巧：让按钮高度稳定
7）如果你希望按钮高度固定（例如 40），可以把容器高度设置为 Fixed 40，同时在 Auto Layout 内把对齐保持 Center，文字依旧垂直居中。
卡片包含：标题、说明文字、一个右侧按钮。我们希望卡片拉宽时，文本区域能占满剩余空间，按钮靠右。
步骤 A：建立卡片结构
1）新建一个 Frame，设置为 Auto Layout（Shift + A），方向 Vertical。
2）设置卡片 Padding：16；Spacing：12；对齐 Left；背景白色；描边 1px 灰色；圆角 12。
3）放入一个标题文本（例如“模板已更新”）和说明文本（例如“新增 6 个可编辑模块，支持一键替换配色与字体。”）。
步骤 B：加入底部操作区
4）在卡片里再放一个子 Frame（作为底部行），把它设置为 Auto Layout，方向 Horizontal，对齐 Center，Spacing 12。
5）在这个底部行里放入：左侧一个“标签/提示”文本（可选），右侧放入前面做好的按钮组件。
步骤 C：关键设置（让按钮始终靠右）
6）把底部行的宽度设为 Fill container。
7）选中左侧文本，把宽度设为 Fill container；按钮保持 Hug contents。这样剩余空间都给左侧文本，按钮自然被推到最右侧。
8）如果说明文本需要换行，设置为 Fill container，并观察卡片高度会自动增长。
我们把按钮做成 Variants：Default / Hover / Disabled。
1）选中按钮组件，右键 Create component，再 Duplicate 两次得到 3 个实例。
2）全选这 3 个组件，点击 Combine as variants。
3）在右侧为属性命名：State=Default/Hover/Disabled。
4）调整样式：Hover 可以略深的背景色；Disabled 降低不透明度并禁用阴影。
5）为 Hover 添加交互（Prototype）：On hover → Change to Hover；Mouse leave → Change to Default。Disabled 不加交互即可。
1）按钮文字变长却把高度撑开：检查容器是否 Fixed 高度，或 padding 是否过大。
2）按钮没有跟着文字变宽：容器宽度是否 Hug contents？文本是否 Hug contents？
3）卡片拉宽时按钮不靠右：底部行是否 Fill container？左侧文本是否 Fill container？
4）文字不换行：文本宽度是否 Fill container？是否被设为 Fixed？
5）间距不一致：Spacing 与 Padding 是否混用？优先用 Auto Layout 的 Spacing 控制。
6）组件难以维护：把颜色/文本样式抽成 Styles；把状态集中到 Variants 里。
把这两个组件放进你的组件库：按钮用于所有 CTA；卡片用于弹窗、通知、设置页模块。以后遇到文字长度变化、不同语言、响应式布局，基本都能靠 Hug/Fill + Auto Layout 稳住。
