设计工具入门：Figma界面介绍、画板与图层管理、组件基础概念
好，咱们正式开始动手了。工欲善其事，必先利其器。做车机交互设计，Figma 是我目前最顺手的工具，没有之一。你想想看，一个团队里设计师、产品经理、甚至开发都能在同一个文件里实时协作，这在以前做车机项目时简直不敢想。我记得最早做车载 HMI 时，还在用 Sketch 配合各种插件来同步，每次改个标牌颜色都要导出好几版，麻烦得很。
这一章，我不会带你从头到尾把 Figma 的每个按钮都讲一遍，那太枯燥了。咱们直接切入车机设计最常用的几个核心功能：界面布局、画板管理、图层逻辑，以及最重要的——组件思维。说白了，就是让你知道怎么用 Figma 高效地搭出车机的界面架子。
Figma 界面：别被密密麻麻的工具栏吓到
第一次打开 Figma，你可能会觉得「哇，东西好多」。其实核心就三大块：左侧的图层/页面面板、中间的画布区、右侧的属性面板。我个人习惯先把左侧面板收窄一点，给画布腾出更多空间，毕竟车机的屏幕比例通常比较宽。
顶部工具栏里，最常用的就是移动工具（V）、矩形工具（R）、文字工具（T）。嗯，这里要注意，做车机界面时，矩形工具的使用频率极高，因为很多控件背景、卡片、列表项都是矩形。我建议你记住这几个快捷键，能省不少时间。
画板与图层管理：车机界面的骨架
画板（Frame）是 Figma 里最核心的概念。你可以把它理解成一块画布，但比画布更智能。做车机设计时，我通常会为每个屏幕单独建一个画板，比如「主界面」、「导航界面」、「空调控制界面」。每个画板就是一个独立的设计空间。
创建画板很简单：按一下键盘上的 A 键，然后在右侧属性面板里选择预设尺寸。车机屏幕常见的有 1920x720、1280x480 等。我个人习惯先建一个 1920x720 的画板，因为这是目前主流车机的分辨率。
图层管理，说白了就是管好你画板里的每一个元素。Figma 的图层面板在左侧，默认是按创建顺序排列的。但我建议你养成一个好习惯：给图层命名。别小看这一步，我在项目中遇到过好几次，一个界面里堆了上百个图层，全是「矩形 1」「矩形 2」「文本 3」……找起来简直崩溃。
我的做法是：每个图层名都带上它的功能和位置。比如「导航栏-背景」、「导航栏-返回按钮」、「导航栏-标题」。这样后期修改时，一眼就能定位到目标。
组件基础概念：让设计可复用、可维护
组件（Component）是 Figma 里最强大的功能，没有之一。你想想看，车机界面里有多少重复的元素？图标、按钮、列表项、状态栏……如果每个都单独画，改一次样式就要改几十个地方，那效率太低了。
组件的核心思想是：创建一个「主组件」，然后到处引用它的「实例」。你改主组件，所有实例自动更新。举个例子，你做了一个「主菜单按钮」，然后在十个界面里都用了它。后来产品经理说按钮颜色要改，你只需要改主组件，十个界面瞬间同步。
创建组件很简单：选中一个元素或一组元素，按 Ctrl+Alt+K。之后在图层面板里，主组件会有一个四菱形图标，实例则是一个空心菱形。
- 状态栏（时间、信号、电量）
- 导航栏（返回、标题、操作按钮）
- 卡片容器（背景、圆角、阴影）
- 图标（统一尺寸和颜色）
- 按钮（不同状态：默认、按下、禁用）
组件还有一个进阶用法：变体（Variants）。比如一个按钮，有「默认态」「按下态」「禁用态」，你可以把它们做成一个组件的三个变体。这样在设计中切换状态时，只需要在属性面板里选一下就行，不用再单独维护三个组件。
我记得在做一个车载空调控制界面时，温度调节按钮有「升温」「降温」「关闭」三种状态。如果用传统方法，我得画三个按钮。用了变体后，一个组件搞定，而且状态切换非常直观。开发那边也特别喜欢这种方式，因为代码逻辑也对应得上。
实战小练习：搭建一个车机主界面框架
光说不练假把式。咱们来个小练习，巩固一下今天的内容。
- 按 A 键，创建一个 1920x720 的画板，命名为「主界面」。
- 在画板顶部，画一个 1920x80 的矩形，作为状态栏背景。颜色用深灰色（#1A1A1A）。
- 在状态栏里，添加时间文字（比如「14:30」），字体用系统默认即可，颜色白色。
- 在画板底部，画一个 1920x100 的矩形，作为导航栏背景。颜色用深灰色（#2A2A2A）。
- 在导航栏里，添加三个圆形按钮（直径 60px），分别代表「主页」「空调」「设置」。颜色用浅灰色（#4A4A4A）。
- 选中状态栏背景和文字，按 Ctrl+G 打组，命名为「状态栏」。
- 选中导航栏背景和三个按钮，打组，命名为「导航栏」。
- 选中「状态栏」组，按 Ctrl+Alt+K 创建组件。
- 同样，把「导航栏」也创建为组件。
做完这一步，你就有了两个可复用的组件。以后做其他界面时，直接拖出来用就行。改一次，所有界面同步更新。
嗯，今天就到这儿。你先把这几个操作练熟，有任何问题随时问我。记住，工具是死的，思维是活的。Figma 再强大，也只是帮你实现想法的手段。真正值钱的，是你对车机交互的理解和设计思路。