设计工具入门：Figma / Sketch 基础操作、画板与组件、图层管理与快捷键
好，咱们正式开始动手了。这一章我带你过一遍设计工具的基础操作。说实话，很多新手一上来就追求花哨的插件和高级技巧，结果连最基本的画板都建不明白。我个人习惯是，先把吃饭的家伙摸透，再谈什么设计思维。
座舱 HMI 设计，说白了就是跟屏幕打交道。你手里的 Figma 或 Sketch，就是你的画笔和画布。咱们今天不讲虚的，直接上干货。
1. 画板与组件：你的第一个屏幕
打开 Figma，第一件事是什么？不是画图，是建画板。在座舱设计里，画板就是你的屏幕物理尺寸。比如一个 1920x720 的中控屏，或者一个 1280x480 的仪表盘。
创建画板：按 A 键，右侧面板里选预设尺寸。如果没有你想要的，直接手动输入宽高。我在项目中遇到过，客户给的屏幕比例是 21:9 的异形屏，预设里根本没有，只能自己填。
组件：这是 Figma 和 Sketch 最核心的功能。座舱里按钮、图标、状态栏，这些元素会反复出现。你每画一个按钮，就把它转成组件（Component）。
- 选中元素，按
Ctrl + Alt + K（Mac 是Cmd + Option + K） - 组件的好处：改一个，所有实例跟着变
- 嵌套组件：比如一个按钮组件里，包含图标和文字两个子组件
嗯，这里要注意。组件不是越多越好。我见过有人把整个屏幕都做成一个组件，结果改个间距要等 5 秒刷新。组件粒度要适中，一般到「按钮」「卡片」「列表项」这个级别就够了。
3. 图层管理：别让你的文件变成垃圾堆
做座舱 HMI，图层数量轻松上百。如果不管理好，后期改需求时你会想骂人。我曾经接手过一个同事的文件，所有图层都叫「矩形 1」「矩形 2」……找了半小时才找到那个该死的返回按钮。
图层命名规范：
- 用英文或拼音，别用中文（Figma 对中文支持还行，但 Sketch 有时会乱码）
- 层级结构：组 > 子组 > 元素
- 比如：
Header / Back_Button / Icon_Arrow
图层分组：选中多个图层，按 Ctrl + G 打组。座舱里常见的分组方式：
- 按功能分：导航区、信息区、控制区
- 按状态分：默认态、点击态、禁用态
- 按屏幕分：主界面、二级界面、弹窗
Ctrl + Shift + \ 展开所有图层，快速扫一眼结构。
4. 快捷键：手速就是生产力
做设计最怕什么？鼠标点来点去找功能。快捷键用得好，效率翻倍。我整理了一份座舱设计最常用的快捷键清单，你直接背下来就行。
| 操作 | Figma 快捷键 | Sketch 快捷键 |
|---|---|---|
| 选择工具 | V |
V |
| 矩形工具 | R |
R |
| 文字工具 | T |
T |
| 创建组件 | Ctrl + Alt + K |
Cmd + Y |
| 复制元素 | Ctrl + D |
Cmd + D |
| 显示/隐藏图层 | Ctrl + Shift + H |
Cmd + Shift + H |
| 锁定/解锁图层 | Ctrl + Shift + L |
Cmd + Shift + L |
| 放大到选中 | Shift + 2 |
Cmd + 2 |
为什么我特别强调快捷键？因为座舱设计里，你经常要在多个屏幕之间来回切换。比如仪表盘和中控屏，两个画板并排显示，按 Shift + 2 快速定位到某个按钮，比用鼠标滚轮快多了。
核心要点：
- 画板 = 屏幕物理尺寸，命名要规范
- 组件 = 可复用的元素，粒度要适中
- 图层管理 = 文件整洁的关键，分组命名不能偷懒
- 快捷键 = 效率工具，每天花 10 分钟刻意练习
好了，这一章的内容就这些。你先把 Figma 或 Sketch 打开，照着上面的操作练一遍。下一章咱们开始真正画座舱界面了，到时候你会感谢今天认真学图层的自己。