在上一章中，我们探讨了 UX 流程中的基础要素，包括情绪板、用户画像和用户流程——这些都是塑造有意义且可用体验时不可或缺的工具。随着你继续往前推进，务必要把你的研究材料、洞察结论和规划资产放在触手可及的地方。它们会成为持续参照的依据，帮助你确保每一个设计决策都与项目目标保持一致。归根结底，你最终界面的可用性与清晰度，很大程度上都建立在 UX 基础工作的质量之上。
但与此同时，虽然用户研究至关重要，真正去设计一个实际界面，又会带来另一套挑战。你或许已经基于扎实洞察发展出了一个很强的概念，但设计过程本身依然可能充满意料之外的转折。某个视觉方向可能会被客户否决；新的功能可能会在项目进行到一半时被加进来；又或者团队可能决定支持额外的断点，比如平板设备或折叠屏设备。虽然本书无法预测设计师可能遇到的每一个“急转弯”，但它会帮助你建立起所需的能力与适应性，让你能够设计出灵活而高效的界面。
想要始终掌控自己的工作流，最有力的方法之一，就是真正理解你的设计工具到底能做什么。你对 Figma 的了解越深入——无论是基础工具、高级功能，还是界面结构——你就越能高效地把自己的想法落地。那么，图层和资源该如何组织？组件设置在哪里？协作工具从哪里进入？怎样优化工作区并加快那些重复性操作？这一章会带你把这些内容全部梳理清楚。
本章将涵盖以下几个主要主题：
- 开始一个新的设计项目
- 熟悉工具栏
- 设置及其他功能
- 探索左侧面板
- 探索右侧面板
开始一个新的设计项目
现在，我们会暂时把注意力从 FigJam 中完成的研究与策略工作上移开，开始探索 Figma 的核心设计环境。你将接触到构成这个界面基础的一系列工具和面板。刚开始时，大量新元素可能会让你有点应接不暇，但不用担心。本章本身就是一个可以反复回看的参考章节，任何时候你需要温习基础内容，都可以回来查看。这里介绍的每一项功能和特性，都会在本书后面的章节中再次出现——当我们开始为旅行规划 App 设计页面和流程时，它们都会真正派上用场。
设计文件
正如你已经知道的那样，Figma 支持多种文件类型，以覆盖设计流程中的不同阶段：用于研究和协作的 FigJam，用于界面创作的 Design，以及用于展示与叙事的 Slides。在上一章中，我们使用 FigJam 完成了创意发想、研究梳理和流程规划。现在，是时候切换语境，打开一个 Design 文件 了——真正的界面设计，就是在这里发生的。
要开始创建文件，请进入文件浏览器，并点击你想创建的文件类型：Design、FigJam、Slides、Buzz、Site 或 Make。如果你使用的是 Figma 桌面版应用，只需点击当前标签页旁边的 + 号，或者按 ⌘ + T（macOS）/Ctrl + T（Windows）打开一个新标签页，然后在弹出的窗口中选择你的文件类型。
图 3.1 – 新文件标签页（桌面版应用）
现在，让我们通过创建一个新的 Design 文件，正式开始设计我们的旅行规划 App。
Frame 与 Group
当你在 Figma 中打开一个新的 Design 文件时，你会立刻注意到它和 FigJam 有多么不同。它的界面更丰富，也更有结构感，能够让你使用构建高保真界面所需的全部布局、排版、交互与原型工具。映入眼帘的是一块宽大的中性色画布，四周围绕着功能明确的界面：左右两侧有面板，上方有工具栏。起初，这种布局可能会让你觉得复杂甚至压迫。这很正常——因为这已经不再是一张“白纸”，而是你的设计基础设施。虽然这个环境眼下看起来还不够熟悉，但随着你逐步使用 Figma 提供的工具，你会慢慢掌握它的语言。
在这个空间里，你的第一个动作，很可能就是创建一个 frame。如果你用过其他设计工具，你也许会下意识去找“画板（artboard）”，但 Figma 并不使用传统的 artboard 概念。取而代之的是 frame，它承担了类似作用，但拥有更高的灵活性。frame 本质上是一个容器：它可以容纳任何类型的元素，比如文本、形状、图片，甚至其他 frame，同时还支持更高级的功能，比如布局网格（layout grids）、自动布局（auto layout）和原型选项（prototyping options）。本书后面你会逐步深入学习这些内容。
要创建一个 frame，请从工具栏中激活 Frame 工具（或直接按 F），然后可以采用以下几种方式之一：
- 在画布上单击一次，插入一个默认尺寸为 100 × 100 的 frame
- 点击并拖拽，绘制一个自定义尺寸的 frame
- 从右侧面板中选择一个预设，创建标准尺寸的 frame，比如 iPhone、平板、桌面端或社交媒体格式
图 3.2 – Frame 工具的预设
你可以在画布中添加任意多个 frame。无论你是在设计不同页面、不同 UI 状态，还是响应式变体，Figma 都能流畅处理多个 frame，而不会明显影响性能。
Frame 不只是布局区域，它同样也是内容容器。如果你想把选中的元素包裹进一个新的 frame 中，可以按以下步骤操作：
- 选中这些元素
- 按 ⌥ + ⌘ + G（macOS）或 Ctrl + Alt + G（Windows）
这在你准备组件、模块区域，或者处理那些需要使用更高级布局技术、又需要作为一个整体移动的内容时尤其有用。
当然，frame 并不是把对象绑定在一起的唯一方式。Figma 也支持 group（分组） ，这是更简单的一种组合元素的方法。Group 不具备布局控制或原型能力，但它能帮助你保持元素之间的相对位置，因此在不需要精细布局控制的场景下，特别适合用于快速整理内容。
要将选中的元素分组，请按：
- ⌘ + G（macOS）或 Ctrl + G（Windows）
要取消分组，请按：
- ⇧ + ⌘ + G（macOS）或 ⇧ + Ctrl + G（Windows）
乍看之下，frame 和 group 很像，但它们的行为方式其实不同。你可以做个简单测试：
- 在画布上画两个形状
- 选中它们，并把它们包进一个 frame 中
- 再重复一遍这个过程，不过这次把另一组新形状包进一个 group 中
- 然后用选择手柄去调整这两个容器的尺寸
你会发现：调整 group 的大小时，内部形状会一起被缩放；而调整 frame 的大小时，只会改变 frame 自身尺寸，内容则会保持原位。
这一差异在处理响应式布局时会变得极其关键。随着学习深入，你会越来越明白：为什么 frame 是 Figma 中的基础性元素，而 group 则只是一个适合轻量整理的辅助工具。
界面概览
现在，当你已经在画布上添加了第一个 frame，你会发现围绕着它的界面也开始变得更“丰富”了。虽然 Figma 一开始可能会让你联想到之前用过的其他设计软件，但理解它独特的定位非常重要。和 Adobe Photoshop 这类工具相比，Figma 看上去可能在功能数量上更“轻”，但这其实是刻意为之的设计结果。
这并不意味着它更弱，恰恰相反：它是为界面设计而优化的，而不是为图像编辑而生。的确，从技术上讲，你也可以在 Photoshop 里做界面，但很快你就会遇到局限，尤其是在处理多个页面、或者尝试制作交互原型时。Photoshop 并不擅长流畅处理大量画板，也缺少响应式设计和交互流程所需的内建工具。此外，Photoshop 主要是一个基于位图（raster）的工具，这意味着它并不适合创作现代 UI 设计中常见的、可缩放且与分辨率无关的资源。
那 Illustrator 呢？由于它是基于矢量（vector）的，看起来似乎更接近需求，但它同样缺少界面设计中至关重要的能力，比如布局系统、原型工具和响应式行为。Illustrator 非常适合插画、品牌设计或复杂的图形构成，但它并不是为数字产品设计量身打造的。
相比之下，Figma 从一开始就是为屏幕设计、协作与交付而构建的。 它将矢量编辑的灵活性与基于组件的结构结合起来，因此在设计可扩展、可交互的 UI 时，显然是更好的选择。当然，如果你需要一些超出 Figma 能力边界的效果，比如水彩纹理或高级图片滤镜，你完全可以先在 Photoshop 或 Illustrator 这类外部工具中把资源做好，再导入到 Figma 中使用。但需要特别指出的是：Figma 的内建效果之所以有限，是有意限制的——它只包含那些可以在代码中真实实现的效果。
图 3.3 – Figma 效果与 CSS 效果
举个例子，Figma 允许你应用模糊（blur）这样的效果，因为这类效果可以通过 CSS（Cascading Style Sheets，层叠样式表） 来复现。CSS 是网页开发中用来定义元素外观的样式语言，它本质上是一组规则，用来控制颜色、排版、间距和视觉效果等内容。而“水彩效果”并没有对应的原生 CSS 规则，所以 Figma 不会把它作为内建选项提供出来。
这样的设计逻辑，保证了你在 Figma 中做出来的界面，可以被直接翻译成 Web 或移动端代码，而不需要依赖猜测或近似替代。这种方式让你的设计始终保持现实可实现，也更适合开发落地，从而减少后期出现“视觉上很好看，但根本做不出来”的风险。更重要的是：你并不需要会写代码。 Figma 充当的是设计与开发之间的一座可视化桥梁，让你可以设计出既好看、又能按预期运行的界面。
另一个让 Figma 极其易用的特性，是它的上下文敏感界面（context-sensitive interface） 。不同于那种把所有选项永远堆在眼前的传统软件，Figma 只会展示与你当前选中对象相关的工具。比如，除非你选中了文本对象，否则你不会看到文本对齐选项。
图 3.4 – 上下文敏感选项示例
这种动态机制减少了界面杂乱感，也帮助你把注意力集中在真正重要的操作上。起初，你可能会困惑某个选项“跑哪去了”，但大多数情况下，它只是被暂时隐藏了，只有当你选中了正确类型的对象时才会出现。一旦你点击文本框、形状或 frame，Figma 就会只显示与该对象相关的工具。如果你发现某项功能好像不可用，试着换一个对象重新选择，或者重新确认当前上下文——你需要的选项，很可能只是暂时没有显示出来而已。
一旦你熟悉了这套逻辑，你就会发现：相比很多竞品，Figma 的界面明显更干净，也更灵敏。这种 UX 模式如今正在被越来越多工具采用，而在 Figma 里只待上几个小时之后，就很难再回到那些一股脑把所有功能全堆出来的软件界面了。
接下来，我们就一步一步拆解这个界面，清晰认识 Figma 提供的各类面板、控件和工具。
熟悉工具栏
我们先从工具栏开始。它位于界面底部，是你找到 Figma 核心工具的地方，包括选择、绘制、导航和评论等功能。尽早熟悉这一区域，并记住最常用的快捷键，会让你从一开始就工作得更快、更高效。
主要工具与模式
Figma 将核心工具划分为若干个部分，这些部分都可以在底部工具栏中看到。接下来我们会按照从左到右的顺序，对各个区域做一个整体概览，并从最主要的一组功能开始讲起。
移动、抓手与缩放
在整个界面中，Move（移动）工具是你使用频率最高的工具。它允许你选中、移动、调整大小，以及旋转画布上的任意元素，包括 frame、组件和文本。你也可以点击并拖拽，画出一个选区框，一次性选中多个对象。
你可以按下键盘上的 V 来激活 Move 工具。在很多情况下，当你使用其他工具完成某个动作之后，Figma 也会自动回到这个工具，因此它本质上就是你与设计稿交互时的默认工具。
图 3.5 – Move、Hand 与 Scale 工具
Hand（抓手）工具则用于在画布中移动视图，而不会选中或误操作任何内容。当你已经放大画布、想在工作区中平移查看其他区域时，它就特别有用。你可以通过按住 空格键 临时调用它，也可以按 H 手动切换到该工具。
Scale（缩放）工具专门用于按比例缩放对象。按 K 激活后，你可以点击并拖拽来缩放对象，包括文本和分组，同时保持它们的比例不变。为了看出它和 Move 工具的区别，你可以做一个简单实验：先创建一个文本元素（按 T），然后用 Move 工具把它拉大。你会发现，变化的只是它的边界框大小，而字体本身并没有变大。接着，再用 Scale 工具重复同样操作，这一次，边界框和字体大小都会一起增大。
这几个工具在工作流中承担着不同角色：有的用于调整布局，有的用于浏览大型文件，有的则用于精确缩放元素。随着设计不断推进，你会在它们之间频繁切换。
Frame、Section 与 Slice
Frame 是 Figma 最核心的工具之一，也是你在任何项目中都会持续使用的工具。你既可以通过右侧面板选择预设来创建 frame，也可以直接在画布上拖拽绘制一个自定义尺寸的容器。正如前面提到的，frame 是一种灵活且可嵌套的容器，支持布局网格、自动布局和交互流程等功能。本书后面你会逐步深入学习这些能力。现在，你只需要先记住：添加 frame 有两个快捷键，F 和 A。它们的作用完全一样，用哪个更顺手就用哪个。
图 3.6 – Frame、Section 与 Slice 工具
Section 是从 FigJam 借用过来的工具。和头脑风暴白板一样，你可以用带颜色的 section 在画布上对不同区域做视觉分组。这在大型文件中尤其有用，比如你想把一组页面归类为某个流程，或者在展示时突出某一块区域。
而 Slice 则是一个更偏旧式 Web 导出工作流的工具。它允许你通过在画布上画一个矩形，定义一个自定义导出区域。只要视觉上位于这个切片范围内的内容，都会被包含进导出结果中。虽然这个工具现在依然可以用，但在现代工作流里已经很少使用了。除非你正在处理遗留规范，或者碰到某些特定导出需求，否则你大概率不会用到它。
形状 与 图片/视频
工具栏中的这一部分，可以让你快速访问各种 Shape（形状）工具，从基础的线段、矩形，到椭圆、多边形和星形等都包含在内。每一种形状都拥有可以在右侧面板中调整的专属属性。例如，一条普通直线就可以通过在描边设置里启用箭头端点，变成一条箭头线。Figma 中创建的所有形状本质上都是矢量对象，这意味着你可以自由修改它们的锚点和路径，从而做出自定义图标或插画。
关于矢量编辑和形状操作，我们会在下一章更深入地展开。
图 3.7 – 形状与 图片/视频 工具
如果你想插入媒体内容，可以使用 Image/video… 功能。点击这个工具后，会弹出文件选择器，让你直接从电脑中导入资源。你也可以把图片或视频文件直接拖拽到画布上。
图片会以静态图层的形式出现；而视频（仅限 Pro 及以上付费方案）则只能在被放入原型后进行预览和播放。在 Figma 中，所谓原型（prototype），就是你的设计的一个交互式模拟版本，用来表现它在真实应用中的行为方式。关于原型、视频和转场的具体操作，你会在第 10 章《在浏览器和真实设备中测试与分享你的原型》中系统学习。
钢笔 与 铅笔
在 Figma 的矢量工具中，**Pen（钢笔）**是最精确、也最强大的工具。它允许你通过 贝塞尔曲线（Bézier curves） 来绘制自定义形状——这是一种由锚点和控制手柄定义的数学曲线系统。借助这一机制，你可以精细控制每一段线条的方向、曲率和复杂度。无论你是在绘制图标、搭建定制化的 UI 形状，还是描摹插画，贝塞尔曲线都能让你以极高精度塑造图形。
所有通过 Pen 工具创建出来的元素，都是矢量对象，这意味着它们与分辨率无关，可以任意缩放而不会损失清晰度。不同于由固定像素组成的位图，矢量图形由描述路径和形状的数学公式构成。你可以通过按 P 来激活 Pen 工具。
图 3.8 – Pen 与 Pencil 工具
Pencil（铅笔） 同样是一个矢量工具，但它更偏向自由绘制，几乎就像你在纸上用笔随手画一样。你一旦松开鼠标，线条就会被自动平滑处理，以提升最终视觉效果。因此，Pencil 特别适合快速标注、自由探索，或者把 Figma 当作数字白板来使用时的手绘记录。
Pen 和 Pencil 都非常适合做插画工作，但它们服务的目的不同：一个强调精确控制路径，另一个强调快速而富有表现力的自由草绘。
文本
Text（文本）工具可以让你在设计中插入文本元素，无论是标题、按钮文案，还是正文段落。你可以通过按键盘上的 T 来激活它。
在 Figma 中，创建文本对象有两种方式：
- 在画布上单击一次，插入一个宽度可变的文本对象。它的边界框会随着你输入内容自动延展。
- 点击并拖拽，绘制一个固定宽度的文本框。在这种情况下，文本会在设定宽度内自动换行，而文本框本身不会随着输入而自动变宽。
理解这一区别非常重要：对于按钮文字或短标签，适合使用宽度可变文本；而对于段落或多行文本，若你需要更精细地控制换行，使用固定宽度文本框会更合适。
图 3.9 – 文本工具
评论、注释 与 测量
**Comment（评论）**是一项协作功能，允许你直接在画布上留下反馈。你可以按 C，或者点击工具栏中的评论图标来激活它。进入该模式后，只需在画布任意位置点击，就能放下一个评论锚点，输入消息，并通过 @ 提及协作者。这在设计评审，或者与团队成员异步共享作品时尤其有用。
在 Comment 模式下，你并不是在编辑设计，而只是在留下批注。评论会附着在你放置它的图层或位置上，并且在问题处理完毕后可以标记为已解决。当这个模式处于激活状态时，你会在右侧边栏中看到评论线程列表。
图 3.10 – Comment、Annotation 与 Measurement 工具
**Annotations（注释）**则是附着在特定图层或属性上的可视化说明。你可以按 ⇧ + T，或者选择 Annotation 工具来添加注释。激活后，点击某个图层进行标注，并选择你是想输入自由文本、突出某个属性（比如宽度、间距或对齐方式），还是两者一起使用。即使设计内容发生变化，注释也会保持同步更新，因此它非常适合用于向开发者传达关键实现细节。
注释还可以进行分类，以便更快地导航管理。Figma 提供了一些默认分类，例如 Development、Interaction、Accessibility 和 Content，你也可以根据项目需要创建自己的自定义标签。这会帮助你在大型项目中，根据用途更清晰地组织和筛选注释内容。
**Measurements（测量）**则允许你以像素级精度显示对象之间的间距。要手动添加一个测量标记，请按 ⇧ + M，或者选择 Measurement 工具，然后在两个图层之间拖拽，显示它们之间的距离。这些测量标记可以手动 reposition 或编辑，并会持续可见地存在于画布中。你也可以通过按住 ⌥（macOS）或 Alt（Windows）并悬停对象，自动查看它们之间的距离。
需要注意的是，Measurement 和 Annotation 工具仅对付费方案开放，并且只能在 Edit 或 Dev Mode 下访问。
无论你是要快速留评论、标出实现细节，还是检查对齐和间距，这几项工具配合起来，都会显著提升协作与交付的流畅度。
Actions
Actions 功能可以让你通过一个可搜索的命令栏，访问 Figma 中几乎任意命令、工具或插件。当你希望不再手动去翻菜单或找面板，而是更高效地操作时，它会特别有价值。你可以随时按 ⌘ + / （macOS）或 Ctrl + / （Windows）来激活它，也可以点击工具栏中的 Actions 图标打开它。后面我们还会更详细地介绍这个功能，因为它会成为高效 Figma 工作流中的关键组成部分。
在非美式键盘上，⌘ + P（macOS）或 Ctrl + P（Windows）也常常被用作打开 Actions 的替代快捷键。
Figma Draw、Design 与 Dev Mode
现在的 Figma 提供了三个彼此联动的模式：Draw、Design 和 Dev Mode，每个模式都针对界面设计流程中的不同阶段进行了优化。
图 3.11 – Figma Draw、Design 与 Dev Mode
你的起点是 Design 模式。这是默认工作区，也是你搭建布局、组件和流程的地方。大多数结构性和功能性的工作，都会在这里完成，包括 frame、文本、自动布局和原型等功能。
Figma Draw 则是在这个环境中加入了一层更偏创意表达的能力。启用它之后，界面会转变成一个以插画为中心的空间，提供如 Brush、Pen 和 Pencil 等工具，而且它们比标准 Design 模式中的对应工具更先进、更具表现力，同时还配有针对绘画场景优化的上下文面板。它让你能够直接在设计文件中创建富有表现力的矢量图形，包括动态描边宽度、纹理和视觉效果。无论你是在画图标、添加装饰性细节，还是制作产品插画，Draw 都让你无需切换工具或打断设计流程。对于那些希望把视觉叙事带入 UI 工作、又不想依赖 Adobe Illustrator 这类外部软件的设计师来说，这个模式尤其有价值。
而 Dev Mode（仅限付费方案）则面向实现落地阶段。打开 Dev Mode 开关后，你会进入一个专门为连接设计与开发而创建的视图。界面会具备“代码感知”能力，显示 CSS 数值、间距、设计 token 使用情况以及布局属性等精确信息。它的工作方式很像浏览器中的 inspect 工具，能够把设计元素翻译成开发者更容易理解和消费的格式。你可以直接复制代码片段、下载资源、查看规格说明，而无需修改文件本身。Dev Mode 在设计交付阶段尤其有帮助，它能够帮助最终构建出来的产品在像素级别上尽可能忠实于设计意图。
这三个模式组合在一起，就形成了一套无缝工作流：Design 负责结构与逻辑，Draw 负责表达与细化，Dev Mode 负责精确落地与协作。 你可以根据需要在它们之间自由切换，而始终停留在同一个文件和同一个生态之中。
设置及其他功能
现在你已经熟悉了底部工具栏中的核心工具，接下来我们来看看屏幕顶部剩余的界面元素。这一区域包含了文件管理、分享、设置、版本历史和协作状态等关键功能——它们并不直接作用于画布本身，但对整个工作流的支持同样非常重要。
主菜单
左上角的 Figma 图标会打开一个下拉菜单，这里集中了许多与文件管理、设置和工具相关的核心功能。它通常被视为整个应用的控制中心。
图 3.12 – Figma 主菜单
在这里，你可以导入和导出文件、管理图层和视图、启用插件或小组件，还能使用对齐、选择和协作相关的工具。其中有些命令也会根据你当前选中的对象，被重复放置在其他区域，比如右侧面板或工具栏中。
你并不需要一开始就把所有选项都逐个研究清楚。随着本书推进，你会在完成具体任务时自然遇到这些功能。不过，知道主菜单始终存在、并且可以作为“兜底入口”，会很有帮助——特别是当你在别处找不到某个命令时。
文件标题
在屏幕顶部、Figma 图标旁边，你会看到当前文件的名称。默认情况下，它叫 Untitled，但建议你一开始就把它改成更有描述性的名字，这样之后会更容易整理，也更容易查找。要重命名，只需点击文件标题并输入新的名称即可。
点击标题旁边的下拉箭头，会展开一个小菜单，其中包含复制、删除文件，或将文件移动到其他项目中的选项。比如，当你把文件从 Drafts 移动到某个团队项目后，它的可见性和协作设置也会随之改变。
这个菜单中还提供了 版本历史（version history） 功能，让你可以查看这个文件过去的所有保存版本，并在需要时恢复到任意一个旧版本。
图 3.13 – 文件名与设置
在免费 Starter 方案中，你可以查看过去 30 天 的版本历史；而在付费方案中，这个时间没有限制。你可以把它理解为 Figma 对应于 Google Docs 那类工具中的版本追踪功能——它会随着你和协作者的工作自动记录下来。
协作、分享与视图控制
在顶部栏的右侧，你会看到一组专门用于协作、分享、演示和缩放的控件——这些功能对于与他人高效协作，以及管理你查看项目的方式，都是必不可少的。
图 3.14 – 协作、分享与视图控制
当其他用户正在同一个文件中活动时，他们的头像会显示在这里，让你实时看到当前有哪些人正在与你一起工作。点击某个头像后，会进入 Observation mode（观察模式） ，它允许你实时跟随该用户在画布上的视角和操作。这在协作会议、设计评审或远程交接时非常实用。
在头像旁边，你会看到 Present（演示） 按钮。它允许你在专用查看器中预览当前选中的 frame，或者完整的交互原型。打开后会出现在一个新标签页中，并作为你文件的一个只读版本存在。它非常适合用来测试流程、模拟交互，或者向利益相关方展示已经打磨好的效果稿，而无需把可编辑的设计文件本身暴露出去。
紧接着就是 Share（分享） 按钮。点击它会打开一个面板，在这里你可以管理对文件的访问权限。你可以邀请协作者，分配查看或编辑权限，也可以生成项目的公开或私有链接。这个面板同时也是你将作品发布到 Figma Community 的入口，从而让其他人也能查看或复制你的设计。虽然关于社区发布的内容，我们会在本书后面更深入讲解，但现在先知道：这里就是管理文件可见性与协作设置的主要入口。
在这一组控件的最末端，你会看到一个数字形式的 缩放比例指示器，它显示的是当前画布的放大倍数。点击它会展开一个下拉菜单，里面包含多种缩放预设和视图选项。你可以输入具体缩放值，打开标尺或轮廓视图，或者快速让画布适配当前窗口。这些控制项能帮助你根据不同场景灵活调整工作方式，尤其是在浏览复杂布局，或者在不同设备视图之间切换时。
这些元素共同组成了界面顶部区域的最后一部分，为你提供了高效协作、清晰展示和精准浏览画布所需的全部控制能力。
快捷键
学习键盘快捷键，是加速 Figma 工作流最简单的方法之一。很多你每天都会用到的动作，比如切换工具、复制对象、对齐元素，只需要几个按键就可以立刻完成。
你并不需要一口气把所有快捷键全部记住。先从你最常用的那几个开始，随着它们逐渐融入你的日常操作，再一点点扩充自己的快捷键体系。要查看所有可用快捷键，可以点击界面右下角的 ? 图标，然后选择 Keyboard shortcuts。这时会弹出一个面板，并按工具、编辑、导航等类别进行组织。
Figma 默认采用的是美式 QWERTY 键盘布局作为快捷键基准，因此对于使用国际键盘的用户来说，有时会产生冲突或不便。幸运的是，如果系统没有自动识别你的键盘布局，你可以很方便地点击问号图标，然后选择 Change keyboard layout… 来手动切换。在某些情况下，这还会为你提供更简单、也更顺手的快捷方式。
那么，现在你已经对 Figma 的整体功能有了一个基础理解，也知道如何在工作区中放入内容了，接下来就该看看：你的文件中的所有图层，到底在哪里查看和管理。
探索左侧面板
如果说各种工具负责在画布上创建和编辑内容，那么左侧面板的核心作用，则是帮助你组织与导航整个项目。在这里，你可以访问文件中的所有图层、frame、group、组件，以及你创建或导入的资源。
理解这个面板的工作逻辑，会帮助你在设计逐渐复杂时依然保持清晰有序。接下来的小节中，你将看到它的结构，并学习如何更高效地管理内容。
图层与页面
Figma 左侧面板主要通过三个核心部分来管理文件结构：Layers（图层） 、Pages（页面） 和 Assets（资源） 。其中，Layers 和 Pages 都位于面板中的 File 区域下，而 Assets 则作为一个独立标签列出。这样的组织方式，能帮助你快速在设计结构本身与共享资源（例如组件和样式）之间切换。
每当你创建一个新元素，比如一个形状、一个文本字段，或者一个 frame，它都会出现在 Layers 面板中，并且以层级结构显示，反映它在画布中的深度关系和位置。反过来，如果你在画布上删除了某个元素，它也会同时从图层列表中消失。每个图层旁边的图标，能够帮助你一眼识别出它是什么类型的元素。例如，形状图层通常会显示该形状本身的缩略图标。
图 3.15 – Layers 与 Pages 面板
随着项目不断增长，图层数量也会迅速膨胀，因此，保持它们有序会变得非常重要。为每个图层起一个清晰且具有描述性的名字，能够显著提高可读性，也让团队协作变得更轻松。要特别注意的是：在面板中移动图层，也会影响它在画布中的堆叠顺序，而这一点正是布局控制的重要组成部分。
当同一块画布变得过于拥挤时，你可以通过 Pages（页面） ，把工作划分为同一个文件中的不同区域。Pages 像是相互独立的工作空间，但它们依然共享同一套资源、样式和库。它们非常适合用来组织项目的不同阶段，例如线框图、最终界面，或者开发文档，而无需切换到其他文件中去。
资源
在 File 标签旁边的 Assets 面板 中，会列出当前文件里的所有可复用元素，例如组件。虽然你现在还没有正式开始使用组件，但很快你就会在这里找到它们，并把它们用于重复复用。
图 3.16 – Assets 面板
Assets 面板让你能够直接访问当前文件、团队或已连接库中的所有组件和设计系统资源。在顶部，你会看到一个搜索框，方便你按名称快速找到特定组件；旁边还有一个筛选图标，可用于定制显示方式。搜索区域下方，则会以视觉化方式展示你当前启用的库，包括大缩略图和组件数量统计。这使得你更容易浏览和识别共享资源，比如官方 UI 工具包（如 Material 3、iOS 与 iPadOS），并把所需资源直接导入到设计中。
你可以在 File 和 Assets 两个标签间切换；而在面板顶部，那个书本形状的图标则会带你进入 Team Libraries（团队库） ，你可以根据当前项目，启用或禁用整个资源库。随着你的资源库越来越大，命名一致性就会变得越来越重要——无论是本地组件还是共享资源都是如此。配合搜索与筛选功能，这一结构能够帮助你在设计系统不断扩展时，依旧维持工作速度与清晰度。
探索右侧面板
Figma 的右侧面板通常被称为 Properties panel（属性面板） 。它是你控制设计元素所有视觉和交互属性的地方。这个面板同样是上下文敏感的，也就是说，它显示的内容会随着你当前在画布上选中的对象而变化。无论你正在处理什么，它始终只展示与你当前选择相关的属性，从而减少界面干扰，让你保持专注。
右侧边栏主要分为两个标签：Design 和 Prototype。接下来，我们分别看看它们是如何工作的。
Design
Design 标签默认是激活状态，你也会在这里花掉绝大多数时间。它包含编辑视觉元素所需的全部核心属性，比如尺寸、位置、填充颜色、描边、圆角、效果、字体排印、布局设置等等。
图 3.17 – 一个形状的上下文敏感选项
当画布上什么都没有被选中时，这个面板只会显示一些通用设置，例如画布本身的背景色。但一旦你点击某个元素，比如形状、frame 或文本框，面板就会立刻更新，展示与该对象对应的选项。例如，如果你选中的是 frame，就会出现布局网格、缩放约束和填充选项；而如果你选中的是文本，则会出现字体设置和排版控制项。
这种上下文敏感逻辑的目的，就是帮助你更快地工作：当你选中一个矩形时，不会看到字体选项；而如果当前对象不适用 Auto Layout，也不会出现相关设置。随着你越来越熟悉 Figma，你会越来越意识到：这种界面其实非常干净，也非常聚焦。
Prototype
Prototype 标签允许你为设计添加交互和流程逻辑，例如连接页面、定义过渡效果，或创建交互式浮层。和 Design 面板一样，Prototype 标签同样是上下文敏感的。如果当前没有选中任何对象，它只会显示页面级别的一些通用原型设置，例如原型预览的背景颜色，以及在演示原型时所使用的设备外框。
图 3.18 – Prototype 面板
你可以从设备预设列表中进行选择（包括设备外框颜色与方向），这对于预览设计在真实设备上的显示效果很有帮助。你也可以设置原型视图的背景色，或者在纵向与横向模式之间切换。
当你在画布上选中某个 frame 或组件时，面板会再次变化，并显示出 Interaction（交互） 选项。这时，你就可以定义各种事件，比如 on click、on hover 或 while pressing，并指定它们触发的结果，比如跳转到另一个 frame、打开一个 overlay，或者滚动到某个位置。
图 3.19 – Frame 预览窗口
Figma 构建交互时采用的是一种非常简单的逻辑：if this, then that（如果发生这个，就执行那个） 。例如：
如果用户点击这个按钮 → 那就跳转到下一个页面。
你还可以控制动画类型、过渡速度和方向，从而打造更顺滑、更有响应感的体验。
在这个面板中，最强大的功能之一就是 Flows（流程） 区域。它允许你在同一个文件中定义多个入口点。这对于在单一原型中构建和测试不同用户旅程非常有用，比如新手引导流程、搜索流程，或者结账流程等。
关于原型、交互、转场和动画，你会在第 9 章《用 Transitions、Smart Animate 与 Interactive Components 构建原型》和第 10 章《在浏览器和真实设备中测试与分享你的原型》中学到更多内容。届时，我们会深入讲解如何构建并分享响应式、可交互的体验。
帮助中心
如果你在某个时刻感到卡住了，或者想进一步探索某项功能，Figma 也很方便地提供了官方资源入口。只需点击屏幕右下角浮动的 ? 图标。通过它，你可以打开 Keyboard shortcuts、访问 Help Center、浏览社区资源，或者观看 Figma 团队提供的教程内容。
总结
在短时间内接触了这么多新内容之后，感到有些信息过载，是完全正常的。Figma 的界面丰富而动态，要真正熟悉它的结构和工具，确实需要一点时间。随着你继续推进自己的项目，任何时候只要你想重新确认工具栏、左右面板，或者不同界面模式的用法，都可以回到这一章来复习。
到目前为止，你所学习到的，正是你在 Figma 中开展工作流的基础。随着一章一章推进，你会越来越有信心，也会学会以越来越实际、越来越有创造力的方式来运用这些工具。与此同时，由于 Figma 本身也在持续演进，所以保持关注官方发布说明和社区资源，始终是一个好习惯。
在下一章中，你将开始把这些知识真正用起来：你会通过形状、布局块和界面结构，设计出自己的第一张线框图。
