设计工具入门：Figma/Sketch基础操作、画板与组件设置、设计资源管理

好，咱们进入第二章。说实话，很多新手设计师一上来就急着画界面，结果画到一半发现图层乱成一锅粥，改个颜色要花半小时。嗯，这章咱们就把地基打牢。

我个人习惯把工具学习分成三个层次：能操作、会管理、懂协作。今天咱们重点解决前两个。

2.1 Figma与Sketch：选哪个？

先说说这两个工具。Figma 和 Sketch，就像手动挡和自动挡——都能开到终点，但体验完全不同。

对比维度	Figma	Sketch
平台	浏览器 + 客户端（跨平台）	仅 macOS
协作	实时多人协作，原生支持	需插件或第三方工具
组件库	团队库 + 样式共享	Symbol + 库文件
原型交互	内置，支持条件逻辑	需插件（如 Anima）
版本管理	自动保存 + 版本历史	手动保存 + Git 插件

我在项目中遇到过不少团队从 Sketch 迁移到 Figma，原因很简单：协作效率差太多了。你想想看，一个 HMI 项目通常涉及设计师、工程师、产品经理，大家同时看一个文件，Figma 直接甩个链接就行，Sketch 还得传文件、等同步。

不过话说回来，如果你用的是 Mac，而且团队只有你一个人做设计，Sketch 的本地性能确实更流畅。我个人建议：新项目直接上 Figma，除非公司有强制要求。

2.2 画板设置：别小看这一步

很多新手打开 Figma 就拖一个 Frame，尺寸随便选。嗯，这里有个坑。

座舱 HMI 的屏幕比例和手机完全不一样。常见的分辨率有：

• 1920×720（宽屏，很多新能源车在用）
• 1280×480（长条形，仪表盘常用）
• 2560×1600（高分辨率，理想、蔚来等）

我的做法是：在 Figma 里创建一个 自定义 Frame，宽度 1920，高度 720。然后把这个 Frame 存成「组件」，以后新建页面直接复用。

// 在 Figma 中设置自定义 Frame 的步骤
1. 选中 Frame 工具（快捷键 F）
2. 在右侧面板取消「Preset」选择
3. 手动输入 Width: 1920, Height: 720
4. 右键 Frame → 「Create Component」
5. 命名：Screen_1920x720_Base

你可能会问：「为什么是 1920×720，不是 1920×1080？」因为车机屏幕通常是 16:9 或 8:3 的比例，1920×720 正好是 8:3，适合横屏布局。当然，具体尺寸还是要跟硬件团队确认。

2.3 组件设置：从「画图」到「搭积木」

组件（Component）是 Figma 和 Sketch 里最核心的概念。说白了，就是把重复用的元素做成模板。

举个例子：车机上的「返回按钮」，你可能会在 20 个页面里用到它。如果每个页面都单独画一个，哪天产品说「把返回按钮改成蓝色」——你就要改 20 次。但如果你用了组件，改一次，所有地方自动更新。

我在项目中遇到过最典型的场景：仪表盘的「速度表盘」组件。它包含：

• 背景圆环（固定样式）
• 刻度线（可调整数量）
• 指针（可旋转角度）
• 数字显示（可绑定数据）

我把这个组件拆成了 4 个嵌套组件：

1. Ring_Background：纯视觉，不可变
2. Tick_Marks：用 Auto Layout 排列，可调整间距
3. Needle：带旋转约束，角度作为属性
4. Speed_Value：文本组件，内容可覆盖

这样设计的好处是：改刻度颜色不用动指针，改指针样式不影响数字。每个子组件独立维护，互不干扰。

2.4 设计资源管理：别让文件变成垃圾堆

嗯，这部分我要多说几句。我见过太多设计师的 Figma 文件，图层名叫「Frame 123」「Rectangle 47」「Group 12」——说实话，三天后你自己都找不到东西在哪。

我的资源管理习惯分三层：

2.4.1 文件结构

每个项目文件夹里，我至少放三个文件：

文件名	用途
00_Design_System	组件库、颜色、字体、图标
01_Screens	所有页面设计稿
02_Prototype	交互原型 + 流程连线

为什么要加「00_」「01_」？因为 Figma 按字母排序，这样设计系统永远排在最前面。

2.4.2 图层命名规范

我给自己定了个规矩：每个图层必须包含「类型_名称_状态」。比如：

• Icon_Back_Default
• Button_Confirm_Disabled
• Text_SpeedValue_Active

你可能会觉得麻烦，但相信我——当开发拿着设计稿问「这个图层的间距是多少」时，你能在 3 秒内找到它，而不是翻 10 分钟图层列表。

2.4.3 颜色与字体样式

千万别手动输入颜色值。在 Figma 里，把所有颜色存成 Local Styles：

// 颜色样式命名示例
Color/Primary/Blue    → #1A73E8
Color/Secondary/Gray  → #5F6368
Color/Background/Dark → #1E1E1E
Color/Text/White      → #FFFFFF

字体也一样：

// 字体样式命名示例
Text/Heading/H1 → 32px, Bold, Inter
Text/Body/B1    → 16px, Regular, Inter
Text/Caption/C1 → 12px, Medium, Inter

2.5 避坑指南：我踩过的几个雷

最后分享几个我亲身经历过的教训：

• 别用「Group」代替「Frame」：Group 不能加约束，缩放时会变形。Frame 才是 HMI 设计的正确姿势。
• 组件覆盖要谨慎：我曾经在 30 个页面里覆盖了同一个按钮的文本，结果产品说要改按钮圆角——因为覆盖属性不继承圆角，我只能手动改 30 次。
• 定期清理未使用的样式：Figma 的「Library」面板里有个「Show unused styles」选项，我每周五下班前都会跑一遍，把没用的颜色、字体删掉。

嗯，这章的内容差不多就这些。工具说到底只是手段，真正重要的是你脑子里对「组件化」「规范化」的理解。下一章咱们会聊到 设计系统的搭建，到时候这些基础操作都会用上。

记住一句话：好的设计工具使用者，不是画得快，而是改得快。