第2章 Figma界面与工作区
2.1 用户场景
产品经理小张刚接手一个B2B后台项目，需要在3天内完成核心页面的低保真原型。他第一次打开Figma，面对空白的界面不知道该从哪里开始——工具栏里的工具分别做什么？右侧的面板有什么用？怎么创建和管理多个页面？团队要求他使用Figma协作，但他连基本的工作区布局都还没摸清，第一天的时间几乎全部消耗在界面摸索上。
2.2 业务问题
新手在使用Figma时，常因界面结构不熟而陷入以下困境：
- 上手门槛高——面对密集的面板和工具，不知道从哪个入口开始创建原型，前30分钟处于“空转”状态。
- 面板定位慢——频繁在菜单和面板间切换查找功能，单次定位操作平均耗时超过15秒，严重打断设计心流。
- 画板管理混乱——多个页面和画板没有统一组织，版本混淆、结构不清，后期返工率高达40%。
- 操作效率低——90%的操作依赖鼠标点击，不会使用快捷键，重复劳动严重，一个简单的按钮绘制需要8步点击。
常见误区：很多新手一上来就追求“把所有面板功能背下来”，这完全是低效策略。正确的做法是先掌握20%的核心面板和工具，就能覆盖80%的原型设计场景。
2.3 需求拆解
针对上述问题，将界面认知需求拆解为5个核心能力模块，按优先级排列如下：
| 能力模块 | 核心需求 | 优先级 | 覆盖场景 |
|---|---|---|---|
| 工具栏 | 掌握选择、形状、文本、钢笔、移动5大核心工具 | P0 | 绘制所有界面元素与组件 |
| 图层面板 | 理解图层层级、命名规则、分组与锁定/隐藏操作 | P0 | 管理页面元素的结构与可见性 |
| 属性面板 | 学会调整尺寸、位置、填充、描边、圆角等基础属性 | P0 | 控制元素的视觉表现与布局 |
| 画板管理 | 创建、复制、排列画板，掌握页面与画板的层级关系 | P1 | 组织多页面原型结构 |
| 快捷操作 | 掌握高频快捷键与辅助操作（编组、复制、对齐） | P1 | 提升日常操作效率 |
2.4 原型表达
Figma工作区采用“左-中-右”三栏布局，以画布为中心组织所有操作。下面这张结构图展示了各面板的空间关系与操作流向：
从图中可以看出，工具栏提供绘制工具，图层面板管理元素层级，属性面板控制视觉参数，三者都指向中央的画板——所有