3、组件与样式：创建可复用的组件、颜色与文本样式、自动布局基础
好，咱们进入第三章。说实话，这一章是整个原型设计的分水岭。
前两章你还在「画图」，从这章开始，你就在「做系统」了。
我见过太多设计师，画了上百个页面，结果改个主色要改三天。为什么？因为没有用组件和样式。说白了，就是没有「复用」的意识。
今天咱们就把这个坎迈过去。
3.1 为什么必须用组件？
你想想看，一个App里有多少个按钮？少说几十个。如果每个按钮都单独画，改圆角、改颜色、改字号……你会疯掉的。
组件就是「一次制作，到处使用」。改一处，全局更新。
我在项目中遇到过最夸张的情况：一个团队的产品经理说「按钮圆角从8px改成12px」，设计师改了一下午，还漏了三个页面没改。上线后用户反馈「这按钮怎么有的圆有的方？」——尴尬不？
3.2 创建可复用的组件
在Figma里，组件就是「主组件」和「实例」的关系。
主组件是「模板」，实例是「复印件」。你改模板，所有复印件跟着变。但你也可以单独改某个实例的属性——比如颜色、文字，只要不覆盖主组件的结构就行。
3.2.1 组件创建三步走
- 选中元素：一个按钮、一个卡片、一个输入框都行
- 创建组件：快捷键
Ctrl + Alt + K（Mac是Cmd + Option + K） - 命名规范：比如
Button / Primary、Button / Secondary
嗯，这里要注意：命名里的斜杠 / 不是装饰，是层级。Figma会自动把斜杠前面的部分识别为「组件集」，方便你管理。
Button / Primary / Large，一看就懂。
3.2.2 组件的覆盖与重置
你可能会问：「我改了实例的颜色，主组件会变吗？」
不会。实例的覆盖是独立的。但如果你改了主组件的结构——比如加了个图标——所有实例都会跟着加。
我曾经踩过一个坑：把一个按钮实例的圆角改成了20px，后来主组件更新了样式，那个实例的圆角死活不变。为什么？因为「覆盖」锁死了属性。
3.3 颜色与文本样式
样式和组件是两兄弟。组件管「结构」，样式管「外观」。
颜色样式、文本样式、效果样式……这些都应该提前定义好。我建议你在项目一开始就建好「样式库」。
3.3.1 颜色样式
选好主色、辅助色、中性色、功能色（成功、警告、错误）。然后全部存为颜色样式。
| 样式名称 | 用途 | 色值示例 |
|---|---|---|
| Primary / Default | 主按钮、链接 | #1890FF |
| Primary / Hover | 悬停状态 | #40A9FF |
| Neutral / 01 | 背景色 | #F5F5F5 |
| Neutral / 10 | 正文文字 | #262626 |
| Functional / Error | 错误提示 | #FF4D4F |
为什么用「Neutral / 01」而不是「浅灰」？因为项目后期可能会改色值。你改样式定义，所有用到的地方自动更新——这才是「设计系统」的雏形。
3.3.2 文本样式
字号、字重、行高、字间距……这些也应该统一。
我见过最乱的稿子：一个页面里出现了12px、13px、14px、15px、16px……五种字号。开发小哥直接崩溃。
H1: 24px / Bold / 32px行高
H2: 20px / Bold / 28px行高
Body: 14px / Regular / 22px行高
Caption: 12px / Regular / 18px行高
在Figma里创建文本样式时，记得勾选「包含字体、字号、行高、字间距」。这样你改一个样式，所有用这个样式的文本框都会变。
3.4 自动布局基础
自动布局（Auto Layout）是Figma里最让我「真香」的功能。没有它之前，我调间距全靠肉眼和手动拖拽。有了它之后……嗯，我再也不想回到手动时代了。
3.4.1 什么是自动布局？
简单说：自动布局让容器内的元素「自动排列」。你加一个按钮，它自动往右排；你删一个文本框，它自动收拢。间距、对齐、内边距，全部自动计算。
你想想看，如果卡片里有标题、描述、按钮三行。你改了标题字数，下面的描述和按钮会不会跟着往下移？
没有自动布局：不会。你得手动拖。
有自动布局：会。自动搞定。
3.4.2 自动布局的核心参数
- 方向：水平还是垂直排列
- 间距：元素之间的间隔（比如8px、16px）
- 内边距：容器内部的上下左右留白
- 对齐方式：左对齐、居中、右对齐、顶部、底部
3.4.3 实战：做一个卡片组件
咱们来做一个简单的卡片组件，包含图标、标题、描述、按钮。
1. 画一个矩形作为卡片背景
2. 选中矩形，按 Shift + A 添加自动布局（垂直方向）
3. 设置内边距：上下16px，左右20px
4. 添加图标（水平自动布局，居中对齐）
5. 添加标题文本（设置文本样式为 H3）
6. 添加描述文本（设置文本样式为 Body）
7. 添加按钮（从组件库拖入）
8. 选中所有元素，设置间距为12px
9. 将整个卡片转为组件（Ctrl + Alt + K）
现在你试试改标题字数——描述和按钮会自动下移。改内边距——所有元素一起调整。这就是自动布局的魔力。
3.5 组件、样式、自动布局的协同
这三者不是孤立的。它们一起构成了你的「设计系统」。
组件用自动布局来保证结构灵活，组件引用颜色样式和文本样式来保证视觉统一。
改一个颜色样式 → 所有组件更新。改一个组件结构 → 所有实例更新。改一个自动布局参数 → 所有内容自适应。
这才是真正的「从零到一」——从画图到做系统。
我记得刚带团队时，有个新人问我：「老师，我画一个页面要3小时，你画一个页面只要30分钟，为什么？」
我说：「因为你每次都在画新的。我每次都在复用旧的。」
组件、样式、自动布局，就是让你「复用」的武器。别嫌麻烦，前期花1小时搭好基础，后期能省10小时。
好，这一章就到这儿。下一章咱们聊聊「交互与原型连线」——让静态页面动起来。