你将得到什么
这篇教程用“可复用组件 + 自动布局 + 变量”的方式，带你从零做出一套响应式 UI 组件库雏形（按钮/输入框/卡片），并把命名、约束、变体、变量管理都整理成可复制的工作流。做完后，你只需要替换文案/图标/颜色，就能快速拼页面。
准备工作（5 分钟）
建议版本：Figma 桌面端最新版（Web 端也可）。
新建文件结构：Pages 分三页：00-Playground / 10-Components / 20-Examples。
基础样式（可选但强烈建议）：先建好 Text Styles（H1/H2/Body/Caption）与 Color Styles（Primary/Neutral/Success/Danger）。如果你团队还没有样式体系，先用默认也能完成本教程。
第 1 步：做一个“真正好用”的按钮组件（Auto Layout）
在 10-Components 页面，新建一个 Frame，命名 Button：
- 输入按钮文字（例如“确认”），字体建议 14/16。
- 选中文字 + 背景矩形（或直接选中文字后 Shift + A）创建 Auto Layout。
- 在右侧设置 Auto Layout：
- Padding：左右 16，上下 10（可按你的设计系统调整）
- Spacing：8（用于后续图标 + 文案间距）
- Alignment：居中
- Hug contents：宽度和高度都设为 Hug
- 背景填充设置为 Primary 颜色，圆角 8。
关键点：按钮一定要“随内容自适应”（Hug），这样你换不同文案不会破版。
第 2 步：把按钮做成 Variants（尺寸/状态/类型）
把刚才的按钮组件化（Ctrl/Cmd + Alt + K），然后创建 Variants：
- 在组件右侧菜单选择 Combine as variants（或复制两份后合并）。
- 建立 3 组属性（示例命名）：
- Type：Primary / Secondary / Ghost
- State：Default / Hover / Disabled
- Size：S / M / L
- Secondary：背景改为浅灰，文字改深色；Ghost：无填充，仅描边或仅文字。
- Disabled：降低不透明度并禁用阴影（如果有）。
注意：尽量让同一属性只控制一类变化（例如 Size 只改 padding 与字号），避免一个属性同时改颜色/圆角/阴影导致维护困难。
第 3 步：引入 Variables（颜色/间距/圆角）做统一控制
Variables 的目的：当你要换主题色或统一调整间距时，不用逐个组件去改。
- 打开 Variables 面板，新建 Collection：Tokens。
- 创建变量示例：
- color.primary、color.text、color.bg
- space.8、space.10、space.16
- radius.8
- 把 Button 组件的填充/文字色/圆角/padding 绑定到对应变量。
技巧：如果你暂时不想做太多 token，至少把主题色和常用间距做成变量，后面收益最大。
第 4 步：做一个可复用输入框（含错误提示）
输入框组件常见需求：默认/聚焦/错误/禁用。做法与按钮类似：
- 创建外层 Auto Layout：左侧可选图标 + 输入文字占位。
- 边框 1px，默认 Neutral；聚焦时边框变 Primary；错误时边框变 Danger。
- 把错误提示（Caption）做成组件的一部分，通过 Variant 的 State 控制显示/隐藏。
排版建议：输入框高度尽量固定（例如 44），文字区域用 Auto Layout + padding 控制。
第 5 步：做一个“自动变高”的卡片组件（适配不同内容长度）
卡片是最容易体现 Auto Layout 威力的组件：
- 卡片容器用 Auto Layout（垂直），padding 16，gap 12。
- 标题、正文、按钮区域分别用子 Auto Layout；正文文本设置为 Hug 高度。
- 卡片宽度建议设为 Fill container（用于在不同布局中自适应）。
关键点：卡片内部的文本必须是 Hug 高度，外层容器才能“随内容变高”。
第 6 步：把组件装进“响应式布局示例”（一套能复用的页面骨架）
在 20-Examples 新建一个页面骨架：
- 外层 Frame 设为 1440 宽（或你常用尺寸），Layout Grid 可选。
- 用 Auto Layout 做一个顶部栏：左 Logo、右侧按钮组（Fill/Hug 配合）。
- 内容区用 Auto Layout 做两栏布局：左侧列表（Fill），右侧详情（固定宽或 Fill）。
- 把 Button / Input / Card 插进去，测试：
- 换文案长度
- 切换按钮 Size/State/Type
- 卡片正文变长/变短
如果你发现某处不自适应，回到组件页检查：是否该 Hug 的被设成 Fixed；是否该 Fill 的被设成 Hug。
常见问题排查（做不出来通常是这里）
- 按钮文字变长就溢出：检查按钮外层是否 Auto Layout；宽度是否 Hug contents。
- 组件放进容器后不拉伸：检查子元素是否设置为 Fill container；以及父容器是否为 Auto Layout。
- 卡片不会随内容变高：检查文本是否 Hug height；是否被固定高度约束。
- Variants 切换后样式乱：检查属性命名是否一致；尽量让每个 Variant 只改变一类属性。
- 变量改了组件没更新：确认绑定的是 Variable 而不是硬编码色值；必要时重新绑定一次。
最后 1 个建议：把命名规则写成团队约定
当你准备多人协作时，建议固定命名：
- 组件：Button / Input / Card
- Variant 属性：Type / State / Size
- 变量：color.* / space.* / radius.*
命名统一比“做得花”更重要——这会直接决定你后续能不能高效复用。
