Figma 新版的用户界面主要是 UI 的变化，并没有功能的更新。

在这篇文章中，我们会详细介绍此次改版所做的所有更改。

你有发现这些变化么？

1. 整体外观
2. 查看设置
3. 图层面板
4. 页面
5. 团队资源库
6. 属性面板
7. 评论模式

整体外观

自 2017 年推出以来，Figma 发生了很大变化。多年来，Figma 新增了一系列新功能，每个功能都引入了新的设置和控件。

渐渐的我们觉得侧边栏的布局和设计使用户会感到局促，导致难以驾驭。

现在是时候创造更多空间并将 Figma UI 的所有元素整合在一起了：

• 我们将应用程序中使用的字体从 Roboto 更改为 Inter UI (opens new window) - 由我们团队的 Rasmus Andersson 设计的字体。
• 我们更新了整个应用中使用的蓝色。因为之前得到反馈是我们使用的蓝色太亮，影响了某些元素和设置的易读性，所以为了提高对比度和可读性，我们现在使用一种颜色较深的蓝色。

视图设置

为了在工具栏中创建更多空间，我们将“视图设置”菜单与“缩放”控件组合在一起。

你现在可以通过单击 Figma 应用程序右上角的缩放百分比来访问这些设置：

在这里你可以调整以下有关视图的设置：

• 放大（Zoom in）
• 缩小（Zoom out）
• 缩放至适合（Zoom to Fit）
• 缩放到 50％（50%）
• 缩放到 100％（100%）
• 缩放到 200％（200%）
• 像素预览（Pixel Preview）
• 像素网格（Pixel Grid）
• 吸附到像素网格（Snap to Pixel Grid）
• 布局网格（Layout Grids）
• 多人游标（Multiplayer Cursors）

图层面板

我们将左侧的侧栏称为“图层面板”，你可以使用它来访问图层，页面，组件和团队资源库。

图层面板顶部现在有三个选项卡。你可以使用这些来：

1. 打开图层列表
2. 在资源面板中查看你的组件（并访问团队资源库）
3. 在页面之间切换

我们还对图层面板的排列方式进行了一系列改进，使你的图层列表使用起来更加顺滑：

• 你可以通过单击图层面板顶部的“页面名称”来展开或折叠页面列表。
• 顶级框架（直接添加到画布的框架）现在以粗体显示在图层列表中。
• 图层面板中顶级框架的背景颜色为白色，而不是灰色。
• 选定的图层以黑色文字，浅蓝色背景突出显示，相比旧的 UI 中蓝色背景白色文字提升了更多对比度。
• 更新了框架的图标，以便更容易区分框架和组。
• 组件页面现在称为 资源面板（Assets Panel）。你可以在其中查看并使用当前文件或你有权访问的其他文件和库中的组件。

页面

现在你可以通过面板顶部的页面标题访问页面列表。

• 之前，标题显示了总页数以及选择了哪个页面，例如：1 of 4 或者 3 of 4，同时页面名称将在标题以粗体显示。
• 现在你可以使用标题中的箭头展开或折叠页面列表。
• 当前页面之前会在页面列表中以蓝色突出显示，现在我们用对勾表示所选页面。

团队资源库

这些年来，团队资源库换了好几个地方，不过别担心，快捷键还是老样子：

• MacOS：Option + 3
• Windows：Alt + 3

你现在可以在 资源面板 中找到团队资源库的图标：

你可以单击团队资源库图标以：

• 为此文件切换资源库的关闭或打开
• 查看其他资源库中的样式和组件
• 将组件从其他文件和资源库拖到你的文件中
• 将更改发布到你的团队资源库

属性面板

这是此次 Figma UI 改动最大的部分，我们的目标是减少视觉上的混乱，创造更多空间并使其易于查看浏览。

• 标题现在以首字母大写和粗体显示。以前这些都是全大写的。
• 我们不再用明确的矩形框来指示属性面板中的选项卡。现在，我们以粗体显示当前选定的选项卡，而其他选项卡显示为灰色。
• 为了创造更多空间，我们删除了每个字段周围的描边。
• 与图层面板一样，所选设置不再具有蓝色背景。相反，当前设置以蓝色标出。
• 我们缩小了图标的尺寸，使其占用空间更少。
• 可见性切换图标更改为睁眼和闭眼
• 当前未激活的属性和设置现在将显示为灰色。你仍然可以通过单击设置旁边的 “+” 图标添加需要的设置或属性。

评论模式

我们还对评论的外观进行了一些更改。

• 进入评论模式后，不再显示橙色的评论图标。相反，你会看到一个白色的评论图标：

  

• 当你单击某个位置添加评论时，评论图标会放大并显示为蓝色。 而且 发布（Post） 现在位于右上角，而不是右下角：

  

• 关于评论的回复会附在评论的下面，而不是显示为单独的帖子：

  

• 你现在可以点击右上角的复选框解决评论：