外观
组件与实例
组件是"母版/原件"，实例是从它拖出来的"副本"。改母版，所有副本自动同步——这就是设计系统"改一处、处处生效"的核心机制。
组件是"定义"，不是"复制粘贴"
新建微信界面时，你画了一个"发消息"的绿色按钮；界面上还有登录、分享、点赞按钮，长得都差不多。你复制粘贴了十几份，每份都是独立图形。第三天老板说"按钮圆角太尖，改圆一点"——你得走进十几个按钮，一个一个把圆角从 4 改成 8，还可能漏掉一两个，于是界面里这个圆那个方。
问题不在你手慢，而在做法错了：复制粘贴出来的是互不相干的图形，它们只是"长得像"，彼此没有联系，所以改一个，别的不知道。专业做法是把按钮定义成一个组件（Component），界面上所有按钮都是它的实例（Instance）——按钮是一个"定义"，而不是一份份复制。
复制粘贴 = 十几份互不相干的图形；组件 = 一次定义 + 多处引用 + 自动同步。
组件 Component vs 实例 Instance
两个词先分清：组件是母版/原件，一次定义；实例是从组件拖出来的副本。改组件，所有实例一起变；改某一个实例，只影响它自己，其他实例不受影响。一句话记忆：组件是"定义"，实例是"引用"——界面里躺着的每一个按钮，都是对"按钮组件"的一次引用，而不是一份独立拷贝。
组件 = 一次定义 + 多处引用 + 自动同步；它是知识点 12 样式的"升级版"——样式管"颜色/字体/效果"，组件管"一个完整元素 + 它的结构"。
| 概念 | 是什么 | 改它会怎样 |
|---|---|---|
| 组件 Component | 母版 / 原件，一次定义 | 改它，所有实例一起变 |
| 实例 Instance | 从组件拖出来的副本 | 改某一个只影响它自己；改组件，所有实例跟着变 |
在 Penpot 创建组件、拖出实例、验证同步
工具实操，跟着做一遍比看十遍管用。第一步创建组件：画好一个按钮（圆角矩形 + 一行文字，Auto Layout 开启更好），选中组成它的所有图层，点顶部工具栏「创建组件 Create component」（图标是小菱形/风车），确认后它就成了母版，名字可改（如 按钮/主按钮）。第二步拖出实例：在左侧「组件 Components」面板找到 按钮/主按钮，把它拖到画板上——拖出来的就是实例，多拖几个，每个都是同一组件的实例。第三步验证同步：双击回到母版，把圆角从 4 改成 8 或改文字颜色，回到画板——所有拖出来的实例一起变了。
三步：① 选中所有图层 → 创建组件；② 从组件面板拖出实例；③ 双击母版改属性，所有实例自动同步。
组件 vs 样式（12）：管的事不一样
组件和知识点 12 的样式配合用，不冲突。样式管单一属性（颜色/字体/效果），粒度细；组件管一个完整元素 + 它的结构，粒度粗。一个按钮组件，内部文字用 字体/正文 样式、底色用 微信绿 样式——样式定义"零件长啥样"，组件打包"零件组成一个元素"。改样式，组件里的文字变色；改组件，界面上所有按钮变结构。
组件内部用样式，样式是组件的"零件"。
| 样式（知识点 12） | 组件（本知识点） | |
|---|---|---|
| 管什么 | 颜色 / 字体 / 效果（一个属性） | 一个完整元素 + 它的结构 |
| 粒度 | 细（单一属性） | 粗（一个可复用元素） |
| 例子 | 微信绿、字体/正文 | 按钮、聊天气泡、消息行 |
| 关系 | 组件内部用样式 | 样式是组件的"零件" |
同步与 override：改组件全局，改实例例外
同样是"对方气泡"组件，第 1 条消息想填"好的，明天见"、其他填"收到"——用 override 改每一个实例的文字，组件和其他实例都安然无恙。
组件最容易被误解的一点："改组件会破坏实例"。其实反了——改组件，实例自动同步，反而省事。但有时你想让某个实例特殊一点：比如都是"主按钮"组件，登录页那个想换文案"立即登录"，其他保持"发送"。这叫 override（局部覆盖）：改组件，所有实例一起变（全局同步）；改某一个实例，只改它自己（局部覆盖），其他实例不受影响。一句话区分：想让所有一样 → 改组件；想让某一个不一样 → 改那个实例（override）。
复用阈值 + 微信气泡组件化
把"对方消息的气泡"做成组件，端到端走一遍：① 圆角矩形 + Auto Layout 纵向 + 一行文字，创建成 气泡/对方；② 内部文字应用 字体/正文 样式、背景用浅灰（复用样式）；③ 在两条消息里各拖一个实例，override 改不同文字；④ 改母版圆角从 8 改成 12——两条消息的气泡一起变圆；⑤ 再拖第三个实例，override 把背景改成"自己人"的 微信绿——这一个单独变绿，其他保持浅灰。
不是什么东西都要拆成组件，判断标准就一句话："它会在界面里出现几次？" 出现多次、长得一样 → 拆成组件（按钮、气泡、消息行、头像、标签几乎必拆）；只出现一次 → 不一定拆。经验法则：同一个元素出现 2 次以上，就值得拆成组件——只要出现 2 次，你就有"改一次变两处"的需求，拆晚了就得逐个改几十个副本。但别拆过头：一个很小、不会变的东西（如固定图标）拆成组件反而增加管理负担。
复用阈值：同一个元素出现 2 次以上，就值得拆成组件。
深度
原理：为什么"改一处、处处生效"是设计系统的核心？ 组件化的本质是把"重复劳动"从"一个个改"变成"改定义"。复制粘贴时，几十个副本没有关系，改一个别的不知道；组件化后，界面不是"一个个画出来"，而是"从组件库拖实例、需要时 override"——统一改→改母版，个别改→override 那个实例。这就是"定义一次，引用多多，改一处，处处同步，个例例外"的完整工作流。
边界：override 是"在这个副本上做例外"，不改动组件。 改某一个实例的文字或属性，只影响它自己，组件和其他实例都安然无恙。所以"改组件会破坏实例"是误解——实例是引用不是复制，改组件本体后所有实例自动更新，也不用重新拖一遍实例。
后续衔接：本知识点（组件化，Circle 2）的母版骨架来自 13 Auto Layout，零件来自 12 样式系统。 后续 22 组件设计、24 组件状态与命名，会把这套组件搭成完整"组件库"，撑起整个设计系统。
误区
| 误解 | 正解 |
|---|---|
| 复制粘贴就当组件用了 | 复制粘贴出来的是互不相干的图形，改一个别的不知道；组件是引用同一个定义，改组件所有实例同步 |
| 改组件会破坏实例 | 反了。改组件，实例自动同步，反而省事；想个别改，用 override 改那一个实例，不动组件 |
| 组件和样式是一回事 | 样式管单一属性（颜色/字体/效果），组件管一个完整元素 + 结构。组件内部用样式，两者配合 |
| 每个图形都要拆成组件 | 只在出现 2 次以上、值得统一时拆。出现一次的小东西硬拆反而累赘 |
| 改了组件，界面要重新拖一遍实例 | 不用。实例是引用不是复制，改组件本体，所有实例自动更新 |
练习
即时题 Q1：为什么复制粘贴的按钮，改一次要改几十个？
答案
复制粘贴出来的是十几份互不相干的图形，它们只是"长得像"，彼此没有联系，改一个别的不知道；组件是引用同一个定义，改一次全部同步。即时题 Q2：在 Penpot 里，把图形创建成组件的操作步骤是什么？
答案
选中组成元素的所有图层 → 点顶部「创建组件 Create component」→ 在左侧「组件」面板可拖出实例。改母版，所有实例一起变。即时题 Q3：组件和样式（12）分别管什么？它们怎么配合？
答案
样式管单一属性（颜色/字体/效果），组件管一个完整元素 + 结构。组件内部用样式——按钮组件内部文字用字体样式、底色用颜色样式。改样式让组件里的零件变色，改组件让界面所有实例变结构。模块题 老板说"把界面里所有主按钮的圆角从 4 改成 8，但登录页那个按钮想单独换个文案"。请说明：① 如果这些按钮是复制粘贴的，要花几步？② 如果它们是同一个组件拖出的实例，你分别改什么？③ 为什么"登录页按钮换个文案"不会影响别的主按钮？
参考思路
- 复制的：去十几个按钮逐个改圆角，还可能漏，改文案也要一个个来。 - 组件：改组件母版的圆角，所有实例一起变圆角；登录页那个按钮用 override 改文案，只影响它自己。 - 为什么不影响：override 是"在这个副本上做例外"，只改那一个实例，不会动组件和其他实例。 - 关键点：统一改→改组件；个别改→override 那个实例。这就是组件化"改一处、处处同步、个例例外"的完整用法。迷你案例（微信实战） 把"对方消息的气泡"做成组件，体验"改母版处处同步"：
- 在 Penpot 新建画板，画一个聊天气泡（圆角矩形 + 一行文字，Auto Layout 纵向）。
- 选中所有图层，创建成组件，命名
气泡/对方。 - 在左侧「组件」面板把它拖出 3 个实例，分布到几条消息位置。
- 用 override 给每个实例填不同的文字内容（第 1 条"好的，明天见"、第 2 条"收到"……）。
- 双击母版，把气泡圆角从 8 改成 12、背景换个浅灰。
- 回画板看——3 个气泡一起变圆、一起变色。
- 再拖第 4 个实例，override 把背景单独改成
微信绿（"自己人"的气泡）——这一个变绿，其余保持浅灰。
做完你就懂了：界面不是"一个个画"的，而是"从组件库拖实例、个别用 override"。组件就是设计系统"改一处、处处生效"的核心引擎。
素材
- Penpot 官方文档「组件/Component」：看如何创建组件、拖实例、做 override。
- Figma「Components」教程：同样的概念，界面稍不同，视频更直观。
- 设计系统组件：搜索 "design system components"（如 Google Material Design），看真实产品的组件库长什么样。
- 后续衔接：本知识点（组件化，Circle 2）→ 依赖 12 样式系统（组件的零件）与 13 Auto Layout（组件的骨架）→ 后续 22/24 把一整套组件搭成"组件库"，撑起完整设计系统。