本文首发公众号「十二十 聊什么设计」

01

—

Figma是什么？

Figma是一个基于浏览器的协作式设计工具。有着跨平台（Win、Chrome、Linux、Mac）和无需保存（因为是基于浏览器操作，数据存在云端，并不会生成本地文件）、便捷对接（通过一个链接就可以分享设计文件）等使用优势。

通过官网中的一句宣传语：“Design from Start to Finish”——可见Figma的野心绝不仅仅局限于单一做一个像Sketch那样的设计工具，而是要做从头到尾全流程的设计平台。Brainstorm、Design、Build是它在官网上介绍自己的三大模块。即从一开始的设计构思，到设计实践、演示、交付，最后是整个设计资产的构建和沉淀，所有的这些设计师只需要这一个Figma就够了。

Figma的主要三个场景：HOME页、FigJam面板和Design面板

* 设计文件不会再存在于本地，这一点会让不少设计师感到不习惯和担忧：在线保存的文件会因为网络或者意外删除等其他因素丢失吗？

在这一点上，Figma是支持历史版本恢复的。在个人免费版中历史版本最多能保存 30天。专业或团队版本下则是无限制。同时Figma也考虑了灾难恢复的情况，所有的基础架构都分布在3个AWS数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作。

02

—

在Figma中构思设计

—— 白板功能 FigJam 

设计的第一步，并不是提笔绘制，而是在接受需求后的思考。那么在设计伊始，设计师们所思所想的片刻灵感，以及项目前期方向的探寻要如何记录和沟通？Figma为此提供给了整个团队构思和集思广益的在线白板功能——FigJam。

FigJam白板操作界面

一个实时团队合作白板。在这个模块下设计师们可以自由地进行头脑风暴，创建情绪板，记录设计项目进度、会议纪要等。只要你想，可以在这块白板上创建任何内容。和其他在线白板功能一样，团队成员间可实时协作共同创作。FigJam提供绘图、便签、贴纸、形状、文本、连接、盖章、甚至语音评论等多功能。其中表情感受和可爱的卡通贴纸给让人头秃的工作增加了一丝趣味。

FigJam表情

03

—

在Figma中进行设计

前期沟通和构思结束后，设计师就会进入到真正的设计环节。在Figma中设计有什么优缺点是UI、UX设计师们现在最关注的问题。

Sketch & Figma Design

可以看到Figma的Design设计界面和Sketch设计界面结构相似，两个平台大部分的功能相同，甚至很多快捷键都一致。因此，熟练sketch的同学基本可以直接上手Figma。

但Figma当然有着不同于Sketch的独特点，这里主要介绍三个我觉得有意思的区别点。

—— 01 Frame VS Abroad 

Figma和Sketch的第一个重要区别在于它没有Abroad（画板）的概念，而是创建Frame（框架）。也许有的小伙伴会说：“这只是改了个名字，我还是可以创建一个大一点的Frame把它当画板用就好了。”诚然，在设计过程中创建一个画板和创建一个框架乍一看没什么区别，但Frame是可以互相嵌套的——即当我们把一个较小的Frame拖到另一个较大的Frame上时前者会自动成为后者的子元素。将其他元素（如形状、 文字等）拖入进一个Frame里时，它也会自动嵌套成为这个Frame的子元素。

理解了这个概念，你就会发现Frame和Abroad是完完全全两个不一样的东西。Abroad画板就像你在速写板上夹着的画纸，在创作一开始就先设定好了创作的范围。而搭建Frame框架更趋近于前端布局时HTML中的容器（div），一个容器可以放置在另外一个容器内，再一起放置进更大的容器…创作不再有的最大范围的限制，如果你乐意，你可以无限套娃。这就使得设计师整个设计思路过程更会趋近于前端化。

我个人对Frame是很惊喜的，因为一直以来就习惯于前端化的设计逻辑。在Sketch的场景下我经常绘制一个透明矩形来充当容器，这样的作图方式是十分便于前端同学来理解你的设计结构的，后续沟通中从设计到代码的过渡也会更快更有一致性。

Frame相互嵌套

—— 02 Component VS Symbol 

Sketch中的Symbol大家并不陌生：在作图过程中可将多个元素打包成为一个新的元件，此后在Symbols页面里对元件的编辑将同步至该文件下所有用到此元件的地方。也可通过在给元件命名时以使用斜线「/」进行分类，将不同类型的元件组织起来，变成一个元件多状态组合。设计过程中可对Symbol的副本的：文本、形状内嵌图片、元件内嵌的子元件等进行更改替换。看起来似乎功能已足够强大，但实际使用过程中还是太过复杂繁琐。因为Symbol使用起来限制较多，如果真要将一个项目里大多数模块组件化，设计师往往需要建立多个Symbol，对它们进行复杂的组织和维护（Symbol套Symbol套Symbol…）。这个过程足以让大多数设计师望而生却了。

大概是看到了Sketch Symbol的限制，Figma团队减少了使用过程中不少条条框框的限制，让他的Component功能更自由轻便灵活。

一些比较绕口的特点：

1、在创建Component组件后，复制出的Instances实例可调整它：文本、形状颜色、形状描边、投影、边界框的属性，这远远多于Sketch中Symbol的副本里可变动的点。且调整Instances并不会影响到Component元件；

2、更改Component的某个元素的某属性，会同步于所有Instances组件中未变化过此属性的元素，但已经调整变化过该元素的Instances则会保持调整后的样式；

3、创建Component不需要复杂的命名结构（icon/app/search），重命名Component时，新的名称将自动同步到所有复制出的组件；

4、将同不同状态的Component拖进一个Frame中，就完成了这个组件多状态集合编组，这点实在太好用了；

5、访问Component非常便捷，不必考虑命名结构来从嵌套菜单中一层层去找。设计师可以直接看到Component的缩略图列表，拖动就可使用。

*1、2点简单来说：Component和其复制出的Instances就像一个父子级，变动父级中的元素，子级会跟随变动；子级同时有很大程度的自由编辑权利，子级如果更改了一些元素后，那么父级再变动该元素对子级就不再造成影响了。

Component编组，真的太便捷了

子级Instances高自由度变化，不会影响父级Component元件

—— 03 自动布局 Auto Layout 

在Sketch中我们能对组件内的元素进行简单的布局设置。而在Figma中可对任何一个Frame添加Auto Layout自动布局。而Frame是可以嵌套的（再次强调，Frame真的很便捷），所以设计师可以通过过合并多个自动布局创建出适配不同设备尺寸的完整页面，从而快速完成响应式设计。

Auto Layout功能面板介绍

Packed布局和Space布局

同样是删除第三个元素，在Packed模式下Frame的宽度是变化的，元素之间的间距是固定的，即第四个元素会移动至原本第三个元素的位置上来；而在Space模式下Frame的宽度是固定的，删除其中的一个元素后,其余的元素会在这个Frame下重新布局，元素之间的间距也随之变化。

在创建Auto Layout自动布局后，还可看到一个Resizing（变化）功能。此功能是用来设定一个对象的父元素或是子元素尺寸发生宽/高度的数值变动时，内部元素会以什么样式来变化。

Resizing功能面板

Fixed width/height：字面意思固定列宽/高，不跟着父级元素或者其他子元素的变化而变化；

Hug contents：根据子内容的宽/高变化来改变元素大小，父级元素来适应子元素；

Fill container：即填充，元素拉伸变化为所能达到的最大宽高值；当进行父级变化时Fill container模式下的子级可以自适应匹配；

Fill container模式下创建文本框

04

—

在Figma中进行协作

—— 设计师之间的协作：Library VS Library 

在项目的设计过程中，设计师会往往会沉淀出一套可复用的设计规范与组件系统。这些都是能供给团队中其他成员使用的设计资产，是提高团队协作效率、规范设计统一性的重要环节。

在Sketch平台下，团队协作的时可通过Libraries实现组件的复用：将Library文件存放在本地服务器、云存储或版本控制系统当中，同时向其他成员开放访问权限。譬如设计师A将Libraries文件放置在Dropbox共享文件夹里，其他设计师将它添加到自己的Sketch Libraries当中，这样就完成了一份文件的共享。但对于该文件的任何变更都是作用于设计师本地的Sketch文件，并没有实时同步更新的功能。这样的共享方式太过复杂，在我所待过的几个团队毫无例外都选择了其他的设计协作方式。

Figma同样有着Library功能。在这个设计文件都可实时共享，共同操作的平台里，Library的共享也变得更快捷轻便。设计师可将文件中的Styles（样式）和Component（组件）发布到团队资源库。当一个设计师变更了组件内容的时，只要通过点击书本样的「Team Library」图标就可以发布更新。

一键发布

团队里的其他成员打开Figma的时，若是看到资源面板中的团队库图标上显示了蓝点，则表示有待处理的更新。设计师可在Library弹窗面板里看到所有待更新的组件库。团队级的Library组件库，适用于该团队下的所有设计项目中。Figma中对组件库的管理也十分便捷，设计师甚至可以选择启用或禁用某单个组件库。

团队间Library的使用和管理

—— 设计师与研发之间的协作 

设计师如何把完成的稿件交付研发？

这一直是设计流程中不可避免的一个重要环节。在使用Sketch时，设计师往往用插件、第三方平台（如蓝湖、 Zelpin等）来解决设计标注和切图交付的问题。我们将设计文件上传至第三方平台，然后共享给研发侧所需要的设计界面链接。

在Figma中，它有着自己的内置标注工具。你只需要给研发侧账号开通查看权限并发送链接就可以，很便捷的协作方式。但现有阶段也存在着一定程度上的问题：

1、首先Figma只提供了一些简单的参考代码；

2、这些代码无法一键复制；

3、设计师发送的也许为多页面设计项目的链接，研发侧需要先在全页面中找寻到需要使用的页面，一旦页面过多访问速度就成了问题。

当然现在也出现了一些Figma插件来解决设计师与研发协作过程中交付的问题，但是否好用还待尝试。

提供 CSS、iOS、Android三种模式参考代码

—— 团队之间的协作

Figma的一大特点就是可实时同步协作，它可使设计师的整个设计过程透明化，团队里的每个人都可以快速对齐并保持对齐。设计师之间可以同步作图，产品、业务侧也可在设计稿件中进行嵌入式评论，设计和协作可以是同时进行的，团队成员可以在评论中 @其他人或将评论标记为已解决方便沟通反馈。

同时，Figma也提供了创建交互式流程以模拟用户的交互方式来分享演示的功能，通过Figma Mirror在手机上预览效果。更直观的感受到设计成果。关于原型设计的相关，此次先不详细展开介绍了。

05

—

小结

Figma是一个囊括：白板、设计、资产沉淀分享这三大模块，从设计伊始的头脑风暴到设计结束后分享和资产归纳都可在此一个平台上完成的协作式工具。它无需保存，分享便捷。

使用Figma或许会改善我们的设计流程：

1、项目团队可以在一个白板中进行前期的头脑风暴和项目进度管理等；

2、实时协作更块地迭代，工作交流更加的便捷：设计文件变为一个连接，团队成员可在同一个页面中实时交流；

3、设计到代码的过渡更快且有一致性：在Frame的概念下，设计师搭建设计框架，类似于HTML中的容器（div）和前端布局思维更趋近；

4、设计资产管理更灵活和易用：Component较Symbol来说更易创建和管理，Figma中的Library也更便于实时迭代和维护，这两点都十分利于设计团队进行设计资产的长期管理和使用。

所以：

—— Figma 值得使用吗？

作为设计师个人来说，我觉得非常值得大家尝试一番。尤其是对B端设计师而言，Figma的自动布局和组件功能可以极大程度的减少设计中繁琐的重复的模块设计，自动响应式布局也能解决很大程度上多端设计的问题。

在Figma平台中同伴之间的协作也更加便捷和密切。只需要一个连接加上一个权限，设计师就不会再困扰于各种交付流程，可以更专注于在设计本身上。而且个人版本是永久免费的。

但对公司来说，将整个设计团队的设计工具更替为Figma是值得的么？

摆在面前的第一个大的问题就是以往工作中沉淀下来的庞大设计资产的迁移问题。诚然Figma支持直接导入Sketch文件，但导入后的文件难免会存在属性变化，效果丢失等等意外问题。将一个个文件导入后再去调整，效率低且成本高。

第二个大的问题是团队版的Figma费用开销，每月$45的支出比Sketch贵了不少。虽然在功能上Figma比Sketch更强大和优秀，但它并非无可替代。站在公司的角度是否需要更替还待商榷。

————————————

花絮：

在和一些设计师介绍过Figma后，收到了这样的反馈：“设计文件不在本地，那我离职的时候还怎么带走啊？”

其实是可以导出Figma格式文件的~

本文首发公众号「十二十 聊什么设计」

Powered by Froala Editor