Figma更新了这几个功能后，设计师终于可以告别996了

01.png

从2019年设计工具调查报告中可以看出，Sketch作为UI设计界的扛把子雄踞了多项榜首，但是2020年突如其来的疫情，让许多人不得不在家办公，这时候团队协作就变得格外重要。也正是借助这一时机，Figma的用户量在最近一年开始疯涨，很多国外的团队纷纷抛弃了Sketch，投入了这一设计界小鲜肉的怀抱，不论是我之前实习的小团队，还是现在正式工作的大公司，都在使用Figma作为首选的设计工具。虽然2020年的调研报告还未出炉，但是结果已经可想而知，设计工具届的头把交椅非Figma莫属。

目前国内UI设计的主流工具依然是Sketch，但是一些科技巨头公司像百度、腾讯、阿里巴巴已经开始逐渐将项目转移到Figma，相信不久的将来，这种趋势会越来越明显。Figma接下来的动作势必会在互联网届掀起一场巨大的革命，它彻底颠覆了我们以往的工作模式，强大的在线协作功能让设计师和程序员之间的合作越来越紧密，云端存储、实时更新、版本回退等功能让设计流程越来越顺畅，设计师再也不用被改回第一稿的恐惧所支配。

02.png

目前云端存储功能已经帮助用户节省了2000%的空间，生产力大幅提高之后，终结996、按时下班也就指日可待了。

在9月17日的早上，CEO Dylan在Config Europe上宣布了Figma接下来的几项重大更新。本次演讲的主题是<打破代码与设计之间的技术壁垒>，在产品研发的过程中，代码与设计之间一直存在一些看似难以跨越的障碍，在设计师的眼中，他们看重的是该去设计什么样的产品，而在开发人员关注的是如何实现产品的功能。

在以往的工作流程中，设计和开发是两个不同的职业领域，他们分别使用不同的工具。在团队中，他们一起相互合作，让产品最终从概念变成现实，最终被用户们所使用。尽管他们的工作内容有所不同，但是每一个人都发挥着重要的作用。设计师们对于产品形态、外观进行创造性和突破性的探索，开发人员选择最安全、可靠的方法来构建它们。

但是结果是，在这个过程中不可避免的会产生一些矛盾，程序员们认为，在设计师看来那些有创造力的设计给他们的开发工作带来了很大的挑战和困难；而在开发人员看来比较合理的设计方法，设计师们又会觉得不够有设计感。

Figma的愿景就是打破这些隔阂，在保证代码的严谨性和可用性的同时，给予设计师们极大的自由探索和创造的空间，以最小的更新成本，加快产品的迭代速度。

Figma接下来更新的几项功能，会帮助开发人员更直观的理解设计稿，同时高效的将之转化为可执行的代码，免去了大量的重复且低效的体力劳动。

代码组件库与设计组件库的融合（Variants）

团队中通常需要维护两套组件，一套是设计文件，一套是开发文件。虽然这是常规操作，看起来也十分有效，但是两个库如果可以达到统一，那么开发人员就可以快速的将设计文件转换成代码，这样，整个开发进程就会更加高效。所以Figma将要宣布的第一个新功能就是Variants，它是一个新的可交互组件，在Auto Layout的基础上进行了升级和改进，可以帮助团队实现上述功能。

通过Variants连接设计和开发组件（将于11月上线）

04.gif

针对于不同的情况，组件会呈现不同的状态。在开发中，一个组件往往会有各种不同的视觉样式。例如，一个按钮组件或许会分为主要按钮和次要按钮，大尺寸和小尺寸，以及针对iOS和Android的不同版本。目前这样的按钮将用不同的组件表示，每一个都有不同的视觉样式，这时候，设计和代码之间的这种不匹配就会导致设计和开发两方沟通不畅，最终拖慢开发进程。

为了解决这个问题，Figma推出了Variants，它可以在逻辑上，将由同一个组件变体出来的、具有相同功能的一系列子组件重新归类到一起，这个集成了父组件和子组件群的、功能更强大的组件就叫做Variant。可能这段话理解起来有点绕，其实意思就是将组件们再次打组，形成一个“更大的组件“就是Variant。为了简化配置面板，这个更新让设计组件们，可以更好的转换成程序代码。

通过拖拽，在原型中使用可交互的组件（将于明年1月份上线）

05.gif

通过Variants，你可以将这些组件的不同交互状态集合到一起，这时候你可能会想，那么我在制作可交互的原型时，是否能让它们直接在同一个页面中，在不同的状态之间进行切换。因为现在我们如果想由一个状态转换到另一个状态，就需要再多复制一个页面，而有些时候除了这个可交互组件的状态改变，页面中的其他的内容都是不变的。


这些大量的重复内容造成了页面的视觉混乱，尤其当设计师在演示一个交互逻辑非常复杂的产品原型时，混乱程度往往就会到达灾难级。

为了解决这个问题，Figma让组件之间直接进行交互，然后通过Variant将这些具有交互逻辑的组件集合在一起，设计师在设计稿中只需要使用Variant就可以继承这个组件的所有交互行为，而不必再去为每一个交互状态创建一个演示页面，从而使原型制作更加高效。

更加符合代码规则的Auto Layout布局（将于11月上线）

08.gif

Figma的Auto Layout功能在2019年上线，为我们带来了全新的布局规则，通过这一功能设计师们不需要再去手动调整按钮，只需要设置好固定的间距，它就可以根据按钮中的文字长短自动变换尺寸，Auto Layout让我们可以更加方便地创建响应式布局。

但是这些还远远不够，为了让Auto Layout更加接近CSS代码中的盒模型和Web前端中Flexbox的工作方式，Figma在下一次的更新中，为Auto Layout功能创建了一个简单的UI面板，方便用户更加快捷的设置各项参数，并根据一些最常见的工作场景和用户需求，增加了新的功能：它允许沿两个轴向（横向和纵向）拉伸元素，为某一元素设置单独的间距数值，并且为一些常见的，例如导航栏图标等UI模型，提供间距自动优化方案。

使组件库更易于访问（已上线）

09.png

当我们需要构建功能复杂、结构庞大的产品时，往往会使用到非常多的组件，这个时候组件库就会变得非常复杂。


当需要替换掉某一个组件的时候，设计师们就必须要记住它确切的名称，然后打开庞大的组件库，接着是很多层级的菜单列表，在成千上万个icon中苦苦寻觅那一个正确的组件。

为了改善这一笨重的搜索体验，帮助设计师和开发人员更快速的定位，Figma除了即将推出的Variants，还支持直接在搜索结果中显示对应组件库，现在这一功能已经上线。我们可以通过缩略图、快捷方式和名称搜索来定位组件。

全新的代码显示面板（已上线）

12.gif

当进行到开发阶段的时候，程序员们需要找到正确的样式信息。新的Inspect Tab面板取代了原有的Code 面板，提供了更多有效的属性代码。所选图层的名称会显示在顶部，帮助设计师和开发人员同步获取实时信息。


并且增加了对于Variants、颜色、阴影、内容、字体、边框等属性值的支持。程序员们只需要点击一下，就可以将这些属性值复制粘贴到编辑器中，轻松的还原设计稿的视觉呈现。

14.png

以上这些更新只是Figma消除设计师和开发人员技术壁垒的开始，设计师们常常希望自己可以拥有极高的创作自由，尽情创新；程序员们希望代码结构更清晰，易于开发和维护。Figma的出现让我们可以畅想这样一种美好的未来：设计和开发的交付变得更加顺畅自然，设计师和程序员可以在各自的领域以最舒服的状态进行工作，由相爱相杀变成相辅相成。