序言
随着全球疫情反弹，国外很多城市都延长了封城时间，国外大厂相继实行了远程办公，这无疑放大了团队协作上的一些问题。特别是在用Sketch的时候，一直有多人协作和版本管理困难的痛点，而且在家办公可能遇到跨终端和提前准备素材的情况。以我本人的情况举例，家里只有PC电脑且没安装任何字体和素材，这些都成了远程办公最大的阻碍之一。
据了解，越来越多大厂像国外的Microsoft、Twitter、Dribbble 、Airbnb，国内的字节跳动、网易里某些部门等等都在开始使用Figma作为团队设计工具，而且每年一度的UXTOOLS用户体验工具调查报告显示，Figma在国外有逐渐攀升的趋势。
借着这个契机我试用了下Figma，发现它竟然是云端协作模式的，这是一个非常前瞻的设计！此前市场研究机构Gartner就预计，到2023年全球互联网通信云市场规模将比2020年翻一倍达到133.5亿美元，从云游戏、远程医疗的落地也足以一窥云服务未来的前景。那Figma除了前瞻且强大的云端协作功能外还有哪些优势呢？这款软件到底能不能代替Sketch呢？
本文将从一个UI设计师的角度对比分析下两款软件的优劣特点，为大家就组件、团队协作、兼容性、迁移成本等多方面展开详细的测评，我们一起来看下吧~
注：本文中的组件是指：可以在你的设计中重复使用的UI元素， 它们可以帮助你跨项目创建和管理一致的设计。其常见的步骤有①首先创建主组件并定义组件的属性。②然后创建主组件的实例。③更新主组件时，该组件的所有实例也将更新。因此，作为说明类文档的组件汇总，即不满足第三点的组件，不在本文的论述范围内哦~
一、做图效率
很多团队可能觉得组件是用来统一视觉同学规范的，交互稿不需要符合规范，所以交互同学不用组件，而且组件学习成本太高了之类的。但是组件库作为一个合格的效率工具，易用好上手提高效率就应该是它的指标。在这里我们重点从效率、易懂、简洁、安全 四方面对比分析。
1.灵活效率高
这一部分我们将从 ①启动软件 → ②查找组件 → ③覆盖实例* → ④编辑实例 这四步逐步分析，Sketch与Figma两者效率和灵活度的差别。
*实例是主组件的精确副本且受主组件控制。它具有与原始属性相同的所有属性，包括任何文本样式、样式或布局约束。
1.1软件启动速度快
Sketch如果安装插件过多或打开文件过大过多，容易造成闪退或无响应，闪退后即便可以重新打开，也会时不时地丢失数据，之前的图都白做了（精神抖擞.JPG）。而Figma我用到目前为止还没闪退过，秒启动近期打开过的文件，而且时刻自动保存，做起图来不会被打断心流，既安心又省事！
1.2多视图灵活查找
在这一步中Figma有列表和网格两种视图可供用户选择，适应了不同的查看组件需要。而Sketch仅支持列表查看，像Icon这类组件就极难从略缩图里辨认。
1.3覆盖实例门槛低
我们平时做图时总有一些列表类的页面如关注用户列表，在拖出一个列表实例后，需要批量修改昵称和头像以模拟出高保真的样式。Sketch在批量填充素材时，必须选中同一实例，而Figma只要选中了图层即可。如下图，同为批量修改头像，Figma无论头像大小多少，是否属于同个组件，都能在选中图层后一键替换，素材填充门槛极低，效率UPUPUP！
1.4编辑实例步骤少
在这部分我们将用弹窗组件去对比两个软件~ 弹窗，也称作dialog，是APP中最基础最常见的组件之一，弹窗常见的组成元素有反馈Icon、标题、正文、辅文和一般有1到3个操作等。
有些弹窗是对上一级操作的反馈，需要添加操作成功与否的Icon。同样是隐藏Icon的操作，Sketch需要先点击进入二级编辑菜单再选择隐藏共两步完成，而Figma入口更浅仅需一步。
这是因为Sketch没有对编辑行为依照编辑频率的高低分而治之，「是否显示」及「切换组件」都收进了二级入口。
而Figma是这样分类：一类信息是「必定显示」的如操作项，用户仅仅选择操作的数量：是单按钮还是双按钮，这类必定显示的放在一级入口；一类信息是「非必定显示」的，把显示开关放一级入口，切换组件¹放在二级入口。这样根据类别分级展示，层次更扁平，操作更便捷。
1.这里的「切换组件」指切换当前弹窗实例下某一元素显示的内容，并非整个组件换掉，下同。
小tips：Figma信息的显示与隐藏除了上述方法外，还可以通过直接选中图层，点击删除即可。
Sketch编辑组件统一在「控件」页面进行，用户需要与实例相互切换。Figma则可以在当前页直接编辑不用跳页面，编辑起来更快更直观。
继续拿刚刚的弹窗举例，我们把组件里每行的编辑点列出来逐个对比下~除了Sketch中置灰的3、5、7、8点，每个点都能一一对应起来。这些置灰的这些点代表什么？Figma是怎么处理的呢？
我们发现置灰的点都是编辑文本的操作，左图的Figma把它设计在了组件上，直接双击文本层就能编辑了。虽然Sketch后面也借鉴了这个功能，但没取消掉右侧的编辑菜单，导致像右图这样信息一行行的看着密密麻麻，界面自然就没这么简洁清爽了。
2.易懂好上手
上一部分我们提及，Figma的编辑界面更清爽，那理解难度会因此增加吗？
Figma采取的是结果导向式地描述编辑点：有没有Icon？有没有正文？有没有辅文？操作项数量是多少？这些词语哪怕对从未使用过组件的新同学都很好理解，而且还能备注使用规范辅助说明。不仅如此，上述的编辑点也能根据自身业务自定义，即便每个团队对组件的叫法习惯不同也不用担心了。
而Sketch却要经过双重理解：组件原理和编辑顺序双重理解。下面就这两点分析下Figma是怎么做的~
2.1无需理解组件原理
如下图，Figma通过变体*功能穷尽实例展示了如下图蓝字所示的3个编辑点：选择操作数量/有无正文/有无Icon；Sketch则穷尽单个组件，展示了如下图右边黑字所示的8个编辑点。导致Sketch一上来就铺天盖地地展示很多编辑点，用户不知道要怎么编辑才能得到想要的样式，是切换组件，还是修改Icon颜色，还是编辑文本。没有理解原理，就无法建立编辑点与样式的关系。这么高的学习成本，直接就被劝退了。
*变体组件原名variants，又称组件集/超级组件，是Figma在2020年10月28号发布的新功能，我们来看下官方解释。说白了就是通过穷举单个组件的多种类型、尺寸、状态并按此分类（如上图左侧蓝字）最后集合成一个组件集合体，使其可以通过右侧编辑菜单按类别地快速选择及切换（如下图右侧所示）以获得最终的样式。
2.2无需理解编辑顺序
Sketch的组件图层顺序等于它的编辑顺序，导致Sketch是否好上手极其依赖它的创建者。一旦没有整理图层，编辑顺序就容易混乱。用户得先理顺组件与编辑顺序的对应关系，这就抬高了上手成本，降低了效率。而Figma则不存在这样的问题。
Sketch要经过组件原理和编辑顺序双重理解，加上它组件名特别长，阅读起来很枯燥，让新手望而却步。闪现当时为了解决枯燥的问题，增加emoji提高辨识度去区分切换组件、是否显示、编辑文本等功能，但治标不治本。
2.3组件可添加提示语
组件可以增加提示语以在实例中能直观告诉用户如何使用该组件，解除用户的使用疑虑。再者，它可以写成是组件的一些别称，使其拥有模糊搜索的功能。例如一些搜索Icon，我们可能称之为「查找」「搜索」「放大镜」等等，添加提示语后能有效提高搜索的准确率。
同时它还能添加链接，该链接可以是介绍组件的详细说明，或是一些灵感资源来源，一些视频等拓展资料，也可以链接到你的另一个Figma文件。帮助产品或开发更好的理解我们的设计初衷和理念，或许能推动他们会按照这个理念去实现。
注：查看时注意一定要选中组件，而非组件里面的图层，这样才能出现链接。
3.简洁有条理
3.1界面清爽
下图是弹窗在Figma和Sketch的编辑状态。在选中组件后，软件右侧就会如下图所示出现编辑界面。明显看出Figma的层数少了很多，单行文本很清爽没这么多密密麻麻的文字，能展示更多的编辑功能甚至增加组件提示语呢。
从截图我们可以看出Sketch是通过「一行文案说明」「一行填充或选择」相间布局的，导致编辑页面行数特别多，纵向非常长。信息越多获取信息的成本则越高，效率就越低。
不仅纵向非常长，横向上单个组件名字也特别长。如果在当前页找不到目标组件，需要去信息更密集的总组件库搜索或者查找。这是由于Sketch使用「/」命名这种繁琐的方式组织组件，Figma虽然也支持「/」分类，但它新增一点：可使用 Page 以及 Frame/Group 的方式且不会出现在组件名上，这意味着名字更短了看着也没这么费神了。
3.2分类编辑
Figma之所以简洁还有一个关键的点在于，它的组件更具原子级。通过对组件的编辑行为作了分类：组件组合方式、颜色样式、文本样式、不透明度、切换组件等行为都单独了出来，相互之间单独控制不糅杂，当我们需要改颜色样式时，不用像 Sketch 那样深入到元件中去调整。还是用弹窗举例，一起看看下图。
信息分好类了，找信息的速度就自然快了，效率也上来了。
4.版本可追溯
所有版本可追溯，随时用回第一稿！
Figma有自动保存文件的功能，如果 30 分钟内文件没有被更改，则会自动保存为一个版本。 这意味着如果你在文件上连续工作 3 个小时然后停止编辑，则会在 30 分钟不活动后创建一个版本。也可以通过快捷键Command + Option + S（Win：Ctrl + Alt + S）主动创建新版本。命名或保存版本时，还可以添加标题和描述，当你想找回第一稿时就更容易辨认啦。
二、团队协作
1.交付更准
如果Sketch出了新功能，第三方软件未同步更新就会引发像下面这个bug：设计稿上传到xshow（类似蓝湖）后，Icon色值显示错误。左侧是图标样式，中间是Sketch的正确色值，右侧是上传到第三方软件后的错误色值。
实际上这是由于Sketch新出了一个「色调」功能，可以在该图层直接覆盖一个新颜色。而xshow没根据这新功能同步更新，导致交付给开发的时候显示的还是原图层色值。我还试过在Sketch等比拉伸组件后，虽然组件的外轮廓尺寸为整数，但在第三方软件组件内的元素会出现小数点，导致开发按照了错误的间距进行开发。而Figma从做图到交付都使用原软件源文件就不会出现这个问题。
2.交付更快
省去了上传第三方平台或导出时间，所见即所得。
3.进度同步
因为Figma文件都在云端，因此可以时刻查看设计进度，打破信息差，对全局地控制项目进度更方便了。
4.即时评论
在设计稿的任何地方与上游产品&下游开发通过评论反馈修改建议，甚至能在评论中 @其他人 或将评论标记为已解决。
5.多人创作
支持多人共同创作。因为Figma基于web平台开发，所以软件可以自动更新，不会出现因为多人的软件版本不同而无法协作的问题。多人同时异地、异时异地完成创作，不用来回传送修改文件，是不是方便许多？
三、组件管理
1.组件数量更精简
利用Figma样式单独控制的功能，不用再因颜色不同新增组件了！不用再因文本居中居左不同新增组件了！
变体组件的设计让组件数量更少了！同样是头像组件，Figma的变体会使组件数量归一，而Sketch则需要全部罗列展示出来。
2.样式管理更便捷
第一点提到文本样式分离出来单独控制了，图层样式减少了，颜色投影圆角等样式也是这个原理。选中图层后右侧会出现使用过的颜色，能直接批量管理，剔除不符合组件规范的色值，或让断链（即与组件库失去链接）的组件批量重新链接，不容易遗漏。
3.组件库一键迭代
组件库经常会根据业务需要而更新迭代，这时候实例文件怎么跟着组件库同步迭代呢？Sketch需要挨个点开同步组件才能与最新组件库保持一致，当文件过多时，这个操作就变得极其繁琐。Figma则通过一个开关控制，真正做到修改一处就能改变所有。而且更新后的变体功能，更加方便组件使用与迭代。
四、兼容考量
1.资产跟人
文件、插件、素材、字体统统都是跟着账户走，不用担心临时更换终端而花大量时间准备这些材料。
文件不用占用本地内存，团队内也不用购买高额的共享网盘。网上也有非常多的插件介绍文章，这里就不展开了。倒是有个工具强烈安利给大家：一个插件可视化以方便查找和快速启动的小工具！
官方解释：Figma ex是使用在Figma里，使插件列表可视化的工具，并提供「自定义修改插件显示顺序」和「中文备注说明」等功能，简直就是插件重度患者的福音！而且客户端浏览器都支持，请看下图。官网链接https://moonvy.com/FigmaEX/
素材则可以用插件「Concent Reel」管理，不同于Sketch需要从本地拉取头像或昵称文本素材，Concent Reel插件里包含着大量的在线素材可供挑选，包括姓名、电子邮件、公司名称、网址、个人资料图片等一系列内容。当然你也可以为团队上传一些素材方便大家使用，这样就可以保证我们的设计稿更加高保真，下图也有一些推荐的素材大家可以收藏使用。
字体跟账户的门槛则稍微高点，需要Figma 企业版才可以，它允许组织中的用户访问和使用特定团队内或整个组织内的共享字体。也就是说，凡是我用过的字体，在其他电脑上都可以正确的显示。
2.任意终端
Figma可以在任何系统中使用，因为它是基于浏览器的，不依赖做图终端。Windows、iMac甚至手机iPad都能做图，可谓全平台制霸了。iPad做图的话推荐下载Figurative软件，它用浏览器封装成了软件，配合 Magic Keyboard、触控板或鼠标使用体验极佳。而Sketch现在只能在macOS上使用，很多团队不得不为此购买了昂贵的苹果办公设备。
五、关于迁移
1.迁移成本大吗
学习成本：学习成本低，两个软件界面和快捷键很相似，安装了汉化插件特别好上手。
资金：二人团队免费。
时间：Figma可直接导入Sketch文件，当时我一个人熟悉软件+导入所有视觉稿文件花了四个工作日完成。刨去导入稿子的时间，应该一两天就差不多了。
2.最佳迁移姿势
可直接导入的：文本、颜色、空状态、占位图、Icon等素材为主的，以及头像、分隔线、圆角等仅规范尺寸档位的都可以直接导入。这类组件基本没有使用软件的特性，所以对软件依赖度很低。
导入后需要加上auto layout布局约束的：操作气泡、action sheet、下拉筛选菜单等，需要在Figma中加入布局约束。这类组件往往有着大量重复的列表，有了Figma的布局约束，在实例中可以任意地新增或删减列数，以适应业务的个性化需要。
建议做成变体的：按钮、开关、弹窗等有多个类型/状态/尺寸的组件。变体组件的核心是用来高效管理多状态属性的组件。像那种可以通过小元素的变化延展出很多个实例的，如果不集合成一个变体，容易造成组件的冗杂，查找费劲，操作也繁琐。但我建议property变量控制在5个以内，否则穷举会使得变体非常庞大。
六、相关推荐
下面分享一些我常用的学习网站~
官方使用帮助： https://help.Figma.com/hc/en-us
中文版用户手册： https://Figmachina.com/guide/
版本迭代说明： https://releases.Figma.com/
Figma插件可视化工具： https://moonvy.com/FigmaEX/
B站推荐UP：草帽sMao、像素范
更多想法、发现或疑惑，欢迎大家评论留言交流哇。
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。