恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
因远程协作大火的Figma,会取代Sketch的地位吗?
0.0°
2020-04-28 自译外文 经验/观点 原作者: Ahmed Abdelmageed 举报 14060 129 91 16

写在前面:最近因为疫情的影响,很多公司使用了远程办公的模式,同时也把很多远程协作的问题摆在了台面上。对于设计团队来说,一款好用的协同工具非常重要,最好设计工具本身就是可以方便协同的。


据我了解到,在国外目前已经有非常多的公司正在从sketch切换到Figma,国内的话也有一些公司开始使用Figma,比如像网易就有设计团队也开始利用这款工具开展远程协作设计。


那Figma这款软件到底能不能替代sketch呢?有哪些优势,又有哪些坑,能不能平滑过渡呢?很多人是存在疑惑的,所以彩云给大家找到这一篇干货文章,对比分析两款软件的优劣特点,一起来看看吧。


译文:



两款非常好用的UI设计工具,sketch和figma之间的竞争还在持续,设计师最经常问到的是:哪一个软件更好用?我应该从sketch迁移到Figma吗?或者反过来。


我已经用sketch4年多了,我非常喜欢这款软件。因为有sketch这样的神器将我们从PS做UI的历史中解救出来,如果你是从PS时代开始做UI的话,你就应该记得有多痛苦。


我的公司最近开始迁移到用Figma。所以我有机会使用Figma来工作,然后我就发现它居然是和sketch不相上下的神器。


所以在这篇文章中,我将会带大家一起看看这两款工具的差异点,以及最后会告诉大家到底哪个才是最好用的。


我将会在以下几个方面来比较这2款软件:

  • 功能特性
  • 组件系统
  • 协作能力
  • 文件交接
  • 原型功能
  • 文件导出
  • 离线办公
  • 插件


1.功能特性

这两种工具几乎具有相同的功能,相同的快捷方式和相同的结构。如果会使用其中一个,另一个往往也能直接上手。



  • Figma支持在Figma中打开sketch文件
  • Figma 可以在任何系统中 (Windows, macOS..) 使用,因为它是基于浏览器的
  • Sketch 是 macOS  里的原生应用, 所以它只能在Mac中工作
  • Sketch 和 Figma 目前的性能表现非常相似(彩云注:Figma实测还要略胜一筹)
  • Figma 需要花费比较长的时间来打开一个项目文件(彩云注:一定程度上取决于网速),而sketch打开往往只需要1秒


2.组件系统— Symbols Vs Components

我原来用sketch的symbols来制作组件库感觉还不错,但是当我开始使用Figma后,我发现在组件化这块做的更加优秀。让我来告诉你为什么!


Sketch中的组件样式并不是原子级的,当我想要构建文本样式时,我必须把所有想要的样式全部列出来,需要做一个长长的列表。



我来解释下Sketch是如何工作的:当你定义任何文本或图层成组件样式时,Sketch会将所有属性保存在这个样式中,如果想要修改symbols中的任何样式,都是以覆盖的形式来完成修改。例如,如果你希望有不同的对齐方式或不同的颜色的组件,在用Sketch时,就必须提前做好所有可能的文本/图层样式。


让我们再来看看同样的情况Figma是怎么处理的:


Figma 属性面板


Figma的惊人之处在于它的组件更具原子级,在component属性面板中的每一个属性都可以直接定义样式,它的工作模式更符合设计师的需要,你可以单独保存颜色,字体,投影,并且可以任意组合成你想要的主要样式。这种工作流程是非常有帮助的,因为如果当我想要改变颜色时,我不在需要像Sketch那样深入到元件中去调整文本风格或者是图层颜色。在Figma中,你可以真正做到修改一处就能改变所有。


(彩云注:从我自己的使用经验来看,Figma中的component复制后产生新的Instances,比symbol强大的地方在于,存在子父级的关系。相当于你可以调整一个实例样式,但又不会干扰到父级的样式,而修改父级的样式又能修改全局。有点绕,看一张图吧。)



我也注意到Figma把组件做的更灵活了,相比于Sketch的symbols,限制更少。


在Sketch中,如果你想要修改symbols属性,可以通过symbol中的覆盖样式来调整。但是你不可以删掉组件中的元素。例如,如果你有一个带有图标的按钮,此时就必须创建2个symbol,一个带有图标,另一个不带图标。


Figma 的组件有些不一样,可以跟sketch一样修改覆盖样式,但也可以直接修改组件层,以及层的属性。


Figma 组件的一个示例,我可以删除图标和改变按钮的圆角半径。


3.协作方式

选择一个合适的工具对于设计师之间的协作是非常重要的。


Figma在协作的过程中采用了谷歌文档的模式,允许所有设计师在同一时间,同一个文件上同时开工。你能见到许多鼠标在页面上,可以看到其他设计师正在做什么。


老实说,我个人不大喜欢有人一直盯着我看,或者和别人在一个文件上工作。因为当文件放大时,两个人想要在同一个屏幕上工作时,简直崩溃。但有一些设计师更喜欢这样的工作方式。


来自Figma 的网页截图


让我们看看Shetch如何处理协作的事情,我发现Sketch在这部分其实做的更好因为它里面有一个插件叫做abstract(彩云注:可以用来做版本管理)。它允许设计师拥有像Github那样的项目分支系统,每个设计师都在分支中进行设计,然后合并分支,解决冲突。我个人更喜欢这种工作方式,但有些设计师觉得它太复杂了。


4.文件交接

设计师如何把设计稿发给开发?


Figma 有自己的内置标注工具,但我在实际中跟开发人员遇到的最大问题是,当我发一个界面给开发时,我必须发送整个项目文件链接。当他们点击那个链接时,就必须得等,直到项目完全加载才能看到项目中有一个界面的标注文件。或者在汇报会议上,我们想打开设计稿时,可能会等到会议结束,链接都还没打开。


Sketch有一个Cloud来分享界面,但我觉得目前还未开发完善,但其实目前已经有非常多的插件来使得分享更加流畅,比如像abstract, Zelpin, invision …。使用这些插件,你只需要共享需要的界面文件,这样加载的速度会快上很多。


5.原型功能

在Figma里面做原型是非常方便的,你可以把原型非常容易的发给用户作为测试,因为它的分享和更新都异常简单,打开一个连接就好了。


Sketch是本地化工具,做原型分享就不大方便了,你必须通过Sketch cloud来分享它,而且这个云目前还非常基础,基本上做不了太多事情。


对于想做出有意思的动画和漂亮的原型,Sketch和Figma都可以结合需要工具来做,比如Flinto, Protopie, Principle…


6.文件导出

这两个工具在导出时是比较类似的,并且有许多插件可以同时被使用的,例如Zeplin和Simpli,它们的存下使得切图导出更加容易。


但我在Figma中真正怀念的功能是可以复制任何画板或任何元素,并将其粘贴到Figma之外的软件中,但现在是不行的。Sketch是可以的,我以前经常这么做,所以我的桌面并不会有太多文件垃圾,我希望Figma能尽快实现这一点。


7.离线办公

两种工具都可以离线工作,但Figma不能加载组件,而且离线工作时非常慢。但Sketch在离线的情况下几乎是没啥变化。


8.插件

Sketch比Figma出来的早很多,所以插件也要更丰富一些。但我真正喜欢Figma的是他们在每个插件进入到Figma商店之前都会对它们进行审核。这很好的保证了插件是可信的,不会破坏项目文件本身。


最后,我想强调的是,我对使用哪种工具更好没有特别强烈的意见,因为到目前为止,这两个工具都还做的不错。学习其中一种,你也就会使用另一个,转换其实非常容易的。


因此,我建议要根据项目的具体条件来选择合适的工具。


9.彩云再补充一些内容

我个人是比较看好这种云端协作模式的,云才是未来。在sketch的使用过程中,一直都有版本管理困难,多人协作不便,组件库逻辑层级复杂等痛点,在使用Figma时,这些问题都已经被解决,期待大家尝试使用。目前在国外的一些大厂,像Twitter, Microsoft,Github,Dribbble ,Dropbox,Airbnb ,Uber都开始使用Figma作为团队设计工具,可能在未来成为主流设计工具也说不准哦,提前准备好吧。


另附上Figma中文用户手册:https://figmachina.com/guide



原文:https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a

作者:Ahmed Abdelmageed

译者:彩云sky

本文翻译已获得作者的正式授权


译者:彩云sky ,腾讯ISUX高级视觉设计师。微信公众号:彩云译设计

本文由 @彩云Sky 翻译整理发布。未经许可,禁止转载。


Powered by Froala Editor

微信公众号:彩云译设计

更新:2020-04-28

收藏

129人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 177

    作品

  • 1.3w

    粉丝

  • 13

    关注

  • 实战案例!如何从0到1为Apple Vision Pro设计
  • 苹果Vision Pro上到底有哪些设计亮点?| 视觉篇
  • 抢先体验苹果visionOS的方法
  • 深度解读VisionOS设计原则,掌握下一代设计趋势!

    猜你喜欢

      2020-04-28 自译外文 经验/观点 原作者: Ahmed Abdelmageed 举报 14060 129 91 16

      因远程协作大火的Figma,会取代Sketch的地位吗?

      0.0°

      你确定要举报因远程协作大火的Figma,会取代Sketch的地位吗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年04月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      91
      129
      16

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录