SPEAKER_1: 好，上一讲我们聊到 Figma 的核心革命——云端原生加上单一事实来源，彻底改变了团队协作的方式。今天我们要真正打开软件，看看这个界面到底长什么样。 SPEAKER_2: 对，从理念落地到操作，这一步很关键。很多人第一次打开 Figma，看到那片灰色的无限画布，会有点懵——这和 Photoshop 或者 Sketch 的感觉完全不一样。 SPEAKER_1: 那我们就从最基础的问题开始：Figma 的界面到底分哪几个区域，每个区域是干什么的？ SPEAKER_2: 整个界面可以拆成三个核心区域。最上方是工具栏，负责选择你当前要用的工具，比如选择、钢笔、文字、图形等等。左侧是图层面板，显示文件里所有元素的层级结构。右侧是设计属性面板，你选中任何一个元素，它的尺寸、颜色、圆角、约束，全在这里调整。 SPEAKER_1: 这个结构听起来和传统软件差不多，但中间那片画布感觉不太一样？ SPEAKER_2: 差别很大。Figma 的画布是真正意义上的无限画布——没有边界，没有固定的页面尺寸限制。传统软件你新建文件要先设定画布大小，Figma 不需要，你可以在任意位置放置内容，然后用 Frame 来定义具体的屏幕尺寸。这个思维转变对设计师来说影响很深远。 SPEAKER_1: 怎么说？无限画布具体改变了什么工作方式？ SPEAKER_2: 举个例子，设计一个 App 的多个页面，传统做法是每个页面一个文件，或者一个文件里一个画布。Figma 里，所有页面可以铺在同一张画布上，设计师可以一眼看到整个用户流程，产品经理和开发也能在同一个视图里看到上下文关系。这就是为什么它能真正支持跨团队协作。 SPEAKER_1: 明白了。那工具栏里的基础图形工具，Gong 这样的新手需要掌握哪些？ SPEAKER_2: 最核心的几个：R 键画矩形，O 键画椭圆，L 键画直线，P 键是钢笔工具，T 键是文字。这五个快捷键覆盖了日常 80% 的绘制需求。记住快捷键不是为了炫技，而是因为每次去菜单点击会打断思维流，熟练之后速度差距是数量级的。 SPEAKER_1: 所以快捷键的意义不只是快，而是保持设计状态的连贯性？ SPEAKER_2: 完全正确。设计是一种思维活动，频繁的操作中断会让人从「在想什么」变成「在找什么」。专业设计师的手几乎不离键盘，鼠标只负责定位和拖拽。 SPEAKER_1: 那左侧的图层面板，为什么这么重要？感觉很多人会忽略它。 SPEAKER_2: 图层面板是你设计文件的骨架。一个项目做到几十个屏幕、几百个元素，如果图层命名混乱、层级嵌套没有逻辑，找一个元素可能要花几分钟。更严重的是，开发拿到文件之后，他们看图层名称来理解结构——如果全是「Rectangle 1」、「Group 3」，交付质量会直接下降。 SPEAKER_1: 这个我没想到，图层命名居然会影响到开发交付？ SPEAKER_2: 是的，而且影响比大多数人预期的大。Figma 的 Dev Mode 里，开发可以直接查看图层属性和导出资源，图层名称会直接映射到他们的工作流里。一个命名规范的文件，能让前端工程师的理解成本降低一半以上。所以推荐的做法是：每画一个元素，立刻双击图层重命名，养成习惯。 SPEAKER_1: 说到画布本身，它的坐标系统是怎么运作的？这对新手来说重要吗？ SPEAKER_2: 重要，而且很直觉。Figma 的坐标原点在画布左上角，X 轴向右增加，Y 轴向下增加。右侧属性面板里的 X、Y 数值就是元素左上角相对于父容器或画布的位置。理解这个，你才能精确对齐元素，而不是靠眼睛估计。 SPEAKER_1: 那和传统设计软件相比，Figma 的界面布局有什么结构性的优势？ SPEAKER_2: 最大的优势是「所见即所得的协作」。传统软件的属性面板是给设计师自己看的，Figma 的右侧面板同时也是给产品经理和开发看的——他们打开同一个文件，看到的是完全一样的属性数值。没有信息差，没有「我以为是这个颜色」的误解。 SPEAKER_1: 所以界面设计本身就在强化单一事实来源这个理念？ SPEAKER_2: 正是。Figma 的界面不是偶然设计成这样的，它的每一个区域都在服务「让所有人看到同一个真相」这个目标。工具栏、图层面板、属性面板，三者配合，构成了一个对整个团队透明的工作环境。 SPEAKER_1: 那对于刚开始学习的人，比如 Gong 这样从零起步的学习者，第一天应该把精力放在哪里？ SPEAKER_2: 三件事：第一，认识三个核心区域，知道每个区域的职责；第二，用快捷键画出矩形、椭圆、文字，感受一下画布的操作逻辑；第三，养成命名图层的习惯，哪怕只是练习文件也要这样做。这三件事打好了，后面学 Auto Layout、组件系统，都会顺很多。 SPEAKER_1: 所以这一讲的核心，是在真正动手之前，先建立对工作台的空间感和操作直觉？ SPEAKER_2: 对。掌握 Figma 的三个核心界面区域——工具栏、图层面板、属性面板——再加上基础图形的快捷键和图层命名习惯，这是一切后续技能的地基。地基不稳，组件和原型做起来会很痛苦。