第2章 原型设计工具：Figma基础操作、组件库搭建、团队协作、版本管理
说实话，我见过太多座舱设计师在工具选择上反复横跳。Sketch、Adobe XD、Axure……最后都回到了Figma。为什么？因为智能座舱原型不是一个人能搞定的——你需要和HMI设计师、交互工程师、甚至车机端开发实时对图。Figma的云端协作能力，说白了就是为这种场景量身定做的。
这一章，我带你过一遍Figma在座舱项目里的核心玩法。不是那种「按钮在哪」的基础教程，而是真正能用在工程实战里的套路。
2.1 为什么座舱团队首选Figma
先看一张对比表，你就明白了：
| 维度 | Sketch | Axure | Figma |
|---|---|---|---|
| 实时协作 | 需插件 | 不支持 | 原生支持 |
| 组件库复用 | 本地库 | 本地库 | 云端团队库 |
| 版本管理 | 手动存档 | 手动存档 | 自动历史记录 |
| 开发交付 | 标注插件 | 生成文档 | 内嵌开发模式 |
| 跨平台 | 仅Mac | Win/Mac | Web/全平台 |
我个人习惯把Figma比作「在线版Google Docs + 设计工具的合体」。你想想看，一个座舱项目动辄几十个屏幕、上百个状态，如果每次改版都要发文件、等下载、手动合并……那效率得多低？
2.2 基础操作：别只会拖拽
很多新手打开Figma，第一反应就是拖组件、调颜色。嗯，这没错，但做座舱原型远远不够。我建议你先把这几个核心操作练熟：
2.2.1 自动布局（Auto Layout）
这是Figma最值钱的功能，没有之一。座舱里的列表、卡片、弹窗，几乎全是动态内容。用Auto Layout，你改一个按钮的文字，整个布局会自动撑开，不用手动调间距。
操作路径：
1. 选中一个Frame（比如卡片容器）
2. 快捷键 Shift + A 开启Auto Layout
3. 设置方向（水平/垂直）、间距（Padding/Gap）
4. 往里面塞组件，自动排列2.2.2 组件（Component）与实例（Instance）
组件是Figma的灵魂。你创建一个按钮组件，所有用到它的地方都是实例。改组件，实例全变。这在座舱项目里太重要了——一个空调控制面板可能出现在中控、副驾屏、后排屏，改一次就同步所有。
创建组件：
1. 选中元素（比如一个圆角按钮）
2. 快捷键 Ctrl + Alt + K (Mac: Cmd + Option + K)
3. 在Assets面板里就能看到它了
创建实例：
1. 从Assets面板拖出组件
2. 或者快捷键 Ctrl + D 复制已有实例2.2.3 变体（Variants）
座舱里的按钮有N种状态：默认、按下、禁用、加载中……用变体可以把这些状态打包成一个组件。切换状态时，实例自动更新。
创建变体：
1. 选中多个组件（比如按钮的4种状态）
2. 点击右侧面板的「Combine as Variants」
3. 在Properties里定义属性名（如State: Default/Pressed/Disabled/Loading）
4. 使用时在右侧面板下拉切换状态2.3 组件库搭建：从零到团队复用
组件库不是把一堆组件扔进一个文件就完事了。真正的组件库，要能支撑整个座舱设计体系的统一性。
2.3.1 设计系统分层
我习惯把组件库分成三层：
- 原子层：颜色、字体、间距、图标。这是最底层，改一个颜色，全库联动。
- 分子层：按钮、输入框、开关、滑块。这些是基础交互单元。
- 组织层：卡片、列表、弹窗、导航栏。这些是业务组件，直接拼成页面。
关键原则：原子层尽量少，分子层可扩展，组织层按业务模块划分。座舱里常见的组织层组件包括：空调控制面板、媒体播放器、导航卡片、车辆设置列表。
2.3.2 发布团队库
组件库建好后，要发布成团队库，所有成员才能用。
发布步骤：
1. 打开组件库文件
2. 点击左下角「团队库」图标
3. 选择「Publish Library」
4. 勾选要发布的组件集
5. 写更新日志（方便追溯）
引用步骤：
1. 在目标文件中，点击「团队库」图标
2. 选择「Enable Library」
3. 在Assets面板里就能看到团队库组件了2.4 团队协作：别让沟通成为瓶颈
座舱项目里，设计师、产品经理、开发、测试经常要同时看一个原型。Figma的协作功能，说白了就是让所有人「在同一个画布上说话」。
2.4.1 多人实时编辑
打开一个文件，团队成员的头像会出现在左上角。每个人都有自己的光标，改什么一目了然。我见过最夸张的场景——一个空调面板，设计师在调UI，产品在写交互说明，开发在看标注，三个人同时操作，互不干扰。
2.4.2 评论与@提及
选中一个元素，按C键就能添加评论。用@可以@具体的人，对方会收到通知。
常用场景：
- 设计师：@产品经理 这个按钮文案确认了吗？
- 产品经理：@设计师 空调温度范围改成16-30度
- 开发：@设计师 这个状态缺少加载中的样式2.4.3 分享与权限控制
不是所有人都需要编辑权限。我一般这样分配：
| 角色 | 权限 | 说明 |
|---|---|---|
| 设计师 | Can Edit | 可以修改原型 |
| 产品经理 | Can Edit | 可以修改交互说明 |
| 开发 | Can View | 只能看，不能改 |
| 测试 | Can View | 只能看，不能改 |
| 外部客户 | Can View (无评论) | 只能看，不能评论 |
2.5 版本管理：改错了还能回头
座舱原型迭代快，一天改七八版是常事。没有版本管理，改错了就只能「凭记忆重画」。Figma的版本管理，说白了就是「后悔药」。
2.5.1 版本历史
Figma会自动保存每一次修改。你可以随时回到任意一个历史版本。
查看版本历史：
1. 点击左上角文件名称旁边的「▾」
2. 选择「Show Version History」
3. 右侧面板会列出所有版本
4. 点击某个版本，可以预览或恢复2.5.2 手动标记版本
自动保存虽然方便，但版本多了很难找。我建议在关键节点手动标记版本。
手动标记：
1. 在版本历史面板中
2. 找到当前版本
3. 点击「⋮」选择「Mark as Version」
4. 输入版本名称（如「V2.1_空调面板初稿」）2.5.3 分支与合并（Branch & Merge）
这是Figma的进阶功能。当多个设计师同时改一个文件时，分支可以避免互相覆盖。
操作流程：
1. 点击文件名称旁的「▾」
2. 选择「Create Branch」
3. 在分支里修改
4. 改完后发起「Merge Request」
5. 主文件所有者审核后合并2.6 本章知识体系
下面这张图，帮你梳理Figma在座舱项目中的核心能力链路：
这张图的核心逻辑很简单：基础操作是地基，组件库是标准化武器，团队协作是效率引擎，版本管理是安全网。四者缺一不可，顺序也不能乱。我见过不少团队，一上来就搞组件库，结果基础操作都没练熟，做出来的组件全是「一次性用品」——改一个就要手动调十个。嗯，这种坑，踩过一次就记住了。