Figma 101｜03 探索 Figma Design 新版界面 UI3

Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。

Figma 101 是「设计防潮箱」发布的一个带领大家系统性学习 Figma 的教程合集。跟随本教程学习后，所有人也可以轻松上手 Figma 软件，并找到适合自己的设计工作流程。

导览

上篇文章给大家介绍了一下旧版（UI2 时代）的 Figma 界面和一些基础功能。

自六月底 Config 宣布改版以来，Figma 陆陆续续为不同用户更新 UI3 界面(Beta 版本)。在 10 月中旬，Figma 终于给所有用户全量了。据调查，老用户刚上手时基本不大习惯，主要有几个问题：

常用功能跟旧版本基本一致，但是位置修改了很多，导致本来用顺手的功能找不到了
样式有贴合最流行的视觉风格（大圆角、大空间、浮层+阴影、模块内层级扁平……)，但视觉简化必然导致某些功能入口合并，从而层级变深

对于习惯使用旧版 UI2 的朋友们，本文带大家看看 UI3 的主要变化在哪里。值得一提的是，文章第三部分是新旧 UI 的重点功能位置变动记录，对比查看可以帮助大家更好地适应新界面。

对于刚开始接触 Figma Design 的新朋友们，可以把本文当作操作手册，了解重点功能在 UI3 的位置。

什么是 UI3: Figma's New UI

为了设计师更加专注地处理设计内容，同时为了让 Figma 旗下多款产品 (Design, Dev Mode, Jam, Slides) 界面保持一致性，Figma 公司在 2024 年 Config 大会上推出了全新的 Figma UI3 界面。6 月以来，部分用户陆续开始使用新 UI(Beta 版本)。此间几个月，Figma 也在不断调整修正用户提出的新 UI 问题。

从视觉上看，界面颜色对比减弱，功能模块更精简，用户可作图的画板空间变大，加上近年流行的大圆角和渐变阴影，整个界面非常清爽。

UI3 的主要变化

Navigation panel 导航面板（原「Left sidebar 左侧边栏」）

旧 UI 中，「Left sidebar 左侧边栏」可让用户查看和管理文件里的「Layers 图层」「Assets 资产」和「Pages 页面」。

「Left sidebar 左侧边栏」的顶部，用户默认看到文件中的「Layers 图层」，即当前页面有多少图层和内容。
用户点击最右侧「Pages 页面」按钮后（即点击图中“📍Over……”），收起的分页名称依次出现在图层模块顶部，再次点击后会收起。
用户点击「Assets 资产」画板后可以查看文件内组件库和全局组件库。

新 UI 中，「Navigation panel 导航面板」从三个 tab 简化成两个 tab。「Layers 图层」和「Pages 页面」的关系更清晰（合并到「File 文件」tab 中）。

「File 文件」就是原来的「Layers 图层」tab 。用户在这个面板的上半部分可以管理「Pages 页面」，在下半部分可以管理「Layers 图层」。「Pages 页面」模块会默认展开。
「Assets 资产」同旧版内容基本一致，可查看文件内组件库和全局组件库。本次 Figma 新增了 Apple / Google Material / Figma 三套官方组件库，设计师可以快速调用系统级别的设计元素搭建基础设计。

最小化用户界面

如果设计师需要更多空间进行创作，「Navigation panel 导航面板」右上角有「最小化用户界面」的快捷按钮。点击按钮，界面左侧的「Navigation panel 导航面板」和右侧的「Properties panel 属性面板」将收起，再点一次则重新展开。

⚠️ Tips: 在收起状态中，选中页面中的某些元素，右侧的「Properties panel 属性面板」将自动展开，方便用户的进一步动作。

文件名和位置

点击「Navigation panel 导航面板」顶部文件名，可以直接修改文件名称。

点击旁边的下拉图标，拉出下拉菜单，可以对文件执行操作：例如移动文件位置、导出文件、发布库、创建分支或显示历史版本……

置资源选项卡

新 UI 组件库的内容可视化做得更好。新 UI 组件库中，类型组件新增示意图，对名称不熟悉的用户可以通过图像快速找到自己想要的组件。

也是因为图像内容变多，不像旧 UI 可以同时展开多个组件，新 UI 组件库采用层级进入的交互，需要用户一层一层点击进入。新 UI 强调对当前组件库的内容的搜索，而非所有组件库同时搜索，方便用户找到当前组件库内对应组件。

Toolbar 工具栏（原「Toolbar 顶部工具栏」）

旧版中，「Toolbar 工具栏」位于界面顶部，是常用工具和常用功能的合集。区域内的图标基本是设计过程中最常用的工具，比如选择、缩放、创建框架、创建形状、创建文本、创建蒙版和创建图层……

新版中，「Toolbar 工具栏」的位置移动到界面底部，为用户的「Canvas 画板」腾出了更多的工作空间。根据官方文档，Figma Config 2024 里出现全新 AI 功能也位于「Toolbar 工具栏」中，AI 功能将于 2025 年前陆续测试。

移动/拖拽/缩放

「Move, Hand, and Scale 移动/拖拽/缩放」是整个工具栏中使用频率最高的工具组。如同字面意思，它们可以让用户移动元素、拖拽画板以及等比缩放元素。用户在 Figma design 中，默认展示「Move 移动」的图标。点击右侧的下箭头后，用户可以看到「Hand 拖拽」和「Scale 缩放」工具。

「Move 移动」：选择和移动元素。可以使用快捷键 V调出。
「Hand 拖拽」：拖拽画板，但不移动元素。可以使用快捷键 H 调出，或者长按空格键 SPACE 切换。
「Scale 缩放」：单个元素或整组元素等比例放大缩小。可以使用快捷键 K 调出。

框/分区/切片

「Frame, Section, and Slice 框/分区/切片」是给设计元素增加背景或底框的工具组。用户在 Figma design 中，默认展示「Frame 框」的图标。点击右侧的下箭头后，用户可以看到「 Section 分区」和「Slice 切片」工具。

「Frame 框」：在 Figma 中设计特定尺寸的交付物时，需要一个固定的外框容器放置其他的形状、文字和图片，这个容器就是「Frame 框」。新建「Frame 框」时，用户可以选择属性面板中 Figma 中预设好的尺寸，或者是自由设定尺寸。
「Section 分区」：「Section 分区」也是一个组织/分类的容器。它可以帮助用户快速归类同一组设计，方便标明状态，进行交付。
「Slice 切片」：同传统 Adobe 工具，用户使用「Slice 切片」来导出指定区域。

形状

「Shape 形状」工具组是圆形、方形、星形、三角形和线条这些基础形状。用户点击右侧下箭头可以切换不同形状。

「Rectangle 方形」：可以使用快捷键 R 调出。
「Line 线条」：可以使用快捷键 L 调出。
「Arrow 箭头」：可以使用快捷键 Shift-L 调出。
「Ellipse 圆形」：可以使用快捷键 O 调出。
「Polygon 多边形」
「Star 星形」
「Image/video…… 放置图片/视频」（所有形状都可以自由切换填充和边线。如同颜色一样，图片和视频也是可以被填充的。）

钢笔/铅笔

「Pen and Pencil 钢笔/铅笔」是手动绘制图形的工具组。用户在 Figma design 中，默认展示「Pen 钢笔」的图标。点击右侧的下箭头后，用户可以看到「Pencil 铅笔」工具。

「Pen 钢笔」：钢笔工具用于创建矢量形状和图标。用户可以使用矢量路径、锚点和贝塞尔曲线创建复杂的矢量网络。
「Pencil 铅笔」：铅笔工具是更自由的画图/标注工具。Figma 会自动平滑处理所有铅笔绘制的路径。在完成一次绘制后，用户选择路径后按下 Enter 或 Return 按键，可以重新编辑该路径。