Figma UI3 分析解读页面

2024-08-02

近期，Figma UI3 全新的页面修改引起了设计界的广泛讨论。有的设计师无法适应这次大更新，有的则欣赏新界面的简化和互动体验。本文将为您深入分析 Figma UI3 网页的具体变化，以及这些变化背后的原因和潜在影响。

近来相信相当一部分设计师已经尝试过了 Figma 的 UI3 接口，这次的变化幅度如此之大，以至于许多设计师在朋友圈里吐槽，觉得自己无法接受。

想到 Figma 事实上，现在的情况和很多情况有关。 B 终端产品非常相似：经过 10 2008年的发展增加了太多的新功能，但是整个产品的互动逻辑并没有太大的变化，导致你发现现在。 Figma 编辑过于臃肿。

那么我就是一个深度使用的人。 Figma 多年的顾客，来和大家聊聊。 Figma 为什么要做这个“颠覆性”更新，以及我对它更新变化后的整体思考。

一、Figma UI3 的实际变化

先给不懂的同学科普一下，UI3 这个页面的主要变化是什么？

全新的 UI3 整个界面的感觉是简化，减少了无用信息的出现，增强了编辑内容的空间，让你更加沉浸在工作中。视觉风格采用卡片和纯白色作为视觉核心，符合前面提到的视觉风格趋势，重新设计了系统中的许多图标，使得整个页面看起来更加简洁。

并且对于导航面板，工具栏，属性面板还做了详细的调整，我们具体来说：

1. 导航面板

在导航面板中，Figma 重构内部信息，使商品的存储逻辑更加清晰。

由于 Figma 自身分为团队 / 文档 / 页面 / 图层四个维度，以前是把将文件名放在顶部居中处，现将文件名与左侧导航面板合并，使整体路径更加清晰。

而且与文档相关的操作，如发布、支系、历史记录等，都会折叠到文件路径上，整体关系会更加清晰。

2. 工具栏

提升核心内容展示空间是工具栏中的主要内容。

因为日常使用的工具本身并不多，移动到底部后，可以有更多的空间展示你的内容区域。同时，在互动线中，向下移动会更方便。

但是因为我是将军 Mac 之中 Dock 栏目是隐藏的，因此在移动过程中容易误操作，这一点需要再次适应。

3. 属性面板

对属性面板来说，首先用户可以拖动定制属性面板的大小，然后重构特性内容，比如建立特性内容。 components ，现在它直接聚集在一个统一的区域，可以定制和调整标签的显示或隐藏。每个特性都配备了重新调整，设置更加细致。

在这里，我不得不提到小屏幕尺寸的优化，因为大多数设计师都会在日常工作中使用它。 MacBook，编辑本身的空间不够，现在可以了。导航面板，属性面板收起来，会在适度的条件下呼出，这对笔记本设计师来说是一个很大的提升。一定要试试！

第二，迭代背后的原因

对于一个 B 就端产品而言，其任何变化都有其背后的原因，同样， Figma 亦是如此。

1. 新功能铺路

你们会发现，几年前 Figma 事实上，所有的更新都是围绕目前的功能进一步深化，直到最近发布。 AI 功能。由于这个功能太重要了，所以回去考虑通过一些变化来引导用户快速使用。 AI。

和以前有点相似大版本的微信迭代，一般都会伴随着一些游戏功能，目的也是让用户快速入门，使用新版本。

2. 交互统一

目前 Figma 包括整个产品 Figma、FigJam、Slide。假如是设计师，也会考虑尽可能地将所有的交互统一起来，这样可以让用户使用一致。

如同 Office 你会发现，当你看到他们的页面时，你就会知道是全家桶。 Office 产品是一样的，Figma 实际上也是这样想的。

因此，在交互中，沿用了交互。 FigJam 整体布局方式，向上迭代 Figma 向下满足编辑器 Slide 同时解决了以前的产品需求， Figma 疑难病症，能让更多的新客户使用 Figma 完整的商品，创造更多的价值。

3. 商业考量

因为之前 Adobe 收购失败，Figma 作为一个设计软件，还需要考虑“爆红”和“变现”。我们可以理解，最近的变现。 code mode 事实上，这是一种非常典型的实现模式。爆红就是想把它弄出来 Figma 从以前做设计工具的野心，也逐渐转变为做办公工具，所以要注意针对很多普通用户的一系列提升。而且现在的互动统一就是它这一提升的最佳呈现。

最后，我们来谈谈这次迭代改版。

我觉得 Figma 它为我们提供了一块白板，用户可以在里面自由发挥，操作各种信息。当我隐藏每个面板时，此时此刻，我真的专注于页面，编辑信息。