3、Figma 基础操作：界面布局、画板与组件、自动布局、原型交互基础
好，咱们进入 Figma 实战环节。说实话，Figma 刚火起来那会儿，我还有点抵触——一个浏览器里的设计工具，能靠谱吗？直到我在一个车载项目里，被 Sketch 的版本管理折腾得够呛，才彻底转了阵营。今天这章，我把最核心的几个操作拆开讲，都是我在项目里反复用到的。
3.1 界面布局：别被工具栏吓到
第一次打开 Figma，你可能会觉得面板有点多。别慌，我帮你捋一下。
整个界面分四块：
- 左侧图层/资源面板：管理所有图层、组件、样式。快捷键
Ctrl + /能快速搜索。 - 中间画布区域：你真正干活的地方。按住空格键拖拽平移，
Ctrl + 滚轮缩放。 - 右侧属性面板：选中元素后，这里显示它的尺寸、颜色、约束等参数。
- 顶部工具栏：形状工具、文字工具、钢笔工具等。常用的其实就五六个。
我的习惯：把左侧面板收窄，给画布腾空间。右侧属性面板我基本不关，因为调参数太频繁了。
你可能会问：这么多面板，记不住怎么办？其实你只需要记住一个原则——选中什么，右侧就显示什么。这是 Figma 的核心交互逻辑。
3.2 画板与组件：车载 HMI 的基石
画板（Frame）是 Figma 里最基础的概念。你可以把它理解成「画布里的画布」。每个车载屏幕、每个弹窗、每个控件，都应该放在一个画板里。
创建画板很简单：按 F 键，然后在画布上拖拽。或者从右侧面板选预设尺寸——我一般会自己建一套车载屏幕模板，比如 1920x720、1280x480 这些。
关键点：画板可以嵌套。比如一个仪表盘画板里，可以再放一个警告弹窗画板。嵌套后，子画板会继承父画板的约束规则。
组件（Component）就更重要了。说白了，组件就是「可复用的元素」。你在一个地方改，所有引用它的实例（Instance）都会同步更新。
我在做车载 HMI 时，会把以下东西做成组件：
- 图标（警告灯、转向灯、电池图标）
- 按钮（主按钮、次级按钮、不可用状态）
- 文字样式（标题、正文、辅助文字）
- 状态栏（信号、电量、时间）
创建组件的方法：选中元素，按 Ctrl + Alt + K。或者右键 → Create Component。
我曾经踩过的坑：把整个仪表盘做成了一个组件。结果每次改一个子元素，都要进主组件编辑，特别痛苦。后来我学乖了——组件粒度要小，一个组件只做一件事。
3.3 自动布局：让设计稿「活」起来
自动布局（Auto Layout）是我最喜欢的功能。它让设计稿不再是死板的图片，而是像网页一样能自适应。
启用自动布局：选中一个画板或组，按 Shift + A。你会看到元素自动排列成行或列。
核心参数就三个：
| 参数 | 作用 | 车载场景举例 |
|---|---|---|
| 方向 | 水平排列还是垂直排列 | 导航栏用水平，菜单列表用垂直 |
| 间距 | 元素之间的间隔 | 图标与文字间距设为 8px |
| 内边距 | 容器内部的留白 | 按钮文字与边框的间距 |
举个例子。我在做车载媒体播放器时，歌曲列表用了自动布局。每行包含：专辑封面（固定 48x48）、歌名（自适应宽度）、歌手名（右对齐）。
当歌名变长时，自动布局会自动压缩歌手名的空间。这在真实项目中太实用了——你不需要手动调整每个状态。
小技巧：自动布局可以嵌套。一个水平排列的导航栏里，每个菜单项本身又是一个垂直排列的自动布局（图标在上，文字在下）。
3.4 原型交互基础：让设计动起来
原型交互是 Figma 的另一个杀手锏。你不需要写代码，就能让设计稿「动」起来。
进入原型模式：点击顶部工具栏的「Prototype」标签。然后选中一个元素，拖拽右侧的圆形手柄到目标画板上。
交互设置面板里，你需要关注这几个参数：
- 触发方式：点击、悬停、拖拽、定时。车载 HMI 里最常用的是「点击」和「定时」。
- 动作：跳转页面、打开弹窗、切换状态。我常用「Navigate To」和「Open Overlay」。
- 动画：淡入淡出、滑动、缩放。车载场景建议用「Smart Animate」——它能自动补间相同属性的变化。
实战案例：我在做空调控制面板时，用原型交互模拟了温度旋钮的转动效果。旋钮本身是一个组件，有两个状态（左旋、右旋）。点击左侧区域触发「左旋」状态，点击右侧触发「右旋」状态。配合 Smart Animate，看起来就像真的在旋转。
你可能会问：原型做到什么程度就够了？我的经验是——核心流程必须可交互。比如主界面到二级菜单、警告弹窗的关闭、设置项的切换。那些边角动画，可以放到后面再补。
3.5 知识结构总览
下面这张图，把本章的核心知识点串起来了。你可以把它当成一个「操作地图」。
3.6 实操建议：从零搭建一个车载控件
光说不练假把式。我建议你按这个步骤走一遍：
- 建画板：创建一个 1920x720 的画板，命名「主界面」。
- 画背景：用矩形工具画一个深色背景，铺满画板。车载 HMI 一般用深色背景，减少反光。
- 做组件：创建一个「速度表」组件。包含数字、单位、刻度线。记得用自动布局把数字和单位排好。
- 加交互：复制几个速度表实例，改成不同数值。然后做一个原型交互——点击按钮切换显示不同速度。
- 测试：按
Ctrl + Shift + Enter进入演示模式，看看交互是否流畅。
注意：车载 HMI 的交互延迟要求很高。原型里如果用了复杂的 Smart Animate，记得检查帧率。我遇到过动画太花哨导致原型卡顿的情况，后来把动画时长从 500ms 降到了 200ms。
嗯，这章的内容就这些。Figma 的操作不难，难的是养成「组件思维」和「自动布局思维」。你想想看，如果每个界面都是手动对齐的，那改起来得多痛苦？