4. 组件与实例体系：创建组件、实例替换、覆盖属性、组件库管理

4.1 用户场景与业务问题

在多页面、多端产品设计中，按钮、表单、导航栏等重复元素频繁出现。设计师最痛苦的场景是：一个按钮样式（如圆角、颜色）在 30 个页面中被直接复制粘贴，当视觉规范更新时，需要逐一修改，极易遗漏且效率极低。

核心业务问题：如何实现“一处修改，全局更新”？如何允许局部定制又不破坏整体一致性？Figma 的组件与实例体系正是为解决此问题而设计。

4.2 组件与实例的核心概念

4.3 创建组件：从零到主组件

设计决策权衡：组件粒度过细（如将文字、背景拆成独立组件）会导致实例数量爆炸；粒度过粗（如整个表单作为一个组件）则难以定制。推荐以“可独立复用的最小视觉单元”为标准，例如按钮、输入框、标签、卡片。

4.4 实例替换与覆盖属性

实例替换：选中页面中的实例，在右侧属性面板中点击 Swap Instance（或按快捷键 Ctrl + ] 打开快速切换面板），可快速更换为同一组件库中的其他变体。例如将“主按钮”替换为“次按钮”或“文本按钮”。

覆盖属性（Overrides）：实例允许修改以下属性而不影响主组件：

• 文本内容、字体、字号、颜色
• 填充、描边、边框
• 圆角、透明、效果
• 图层可见性（可用于多状态切换）

4.5 组件库管理：发布与版本

当组件在单个文档中足够稳定后，可将其发布为团队库，供所有项目使用。

业务建议：组件库应当作为“设计系统的单一事实来源”，所有画板中的按钮、图标都应该来自库中的组件，而非本地复制。定期组织组件审查会，淘汰过期样式。

4.6 原型说明与交互流程

在交互原型中，组件实例的覆盖属性可以触发不同的组件状态。例如：

• 一个“提交按钮”实例在未填写表单时为灰色禁用状态，点击后显示加载图标。
• 使用组件状态（Figma 的 Variants + Conditional 交互）可实现：主组件定义四个状态（Default、Hover、Pressed、Disabled），实例通过交互事件（On Tap → Change To）在不同状态间切换。

以下组件树展示了主组件、变体、实例与覆盖的关系：

4.7 验收标准

• 一致性：修改主组件（如按钮主色），所有页面中的该按钮实例颜色同步变更，无遗漏。
• 覆盖灵活性：实例可单独修改文本内容，而其他实例保持不变；覆盖的属性在下次主组件更新时不丢失。
• 组件库可用：其他设计师启用团队库后，可正常拖拽组件、替换实例。
• 版本可追溯：库的每次发布均有版本说明，更新日志清晰。