静电说:各位设计师,你们是不是已经有选择困难症了?现在工具越来越多了,那么究竟用哪个做UI更合适呢?来看看作者的分析吧!在这里提前给大家一些建议,对于Win平台同学,建议先熟悉一下Figma,因为它比XD确实好很多。Mac平台同学,根据需求决定就好。
Sketch vs Figma
Figma与Sketch这两个如今热门的工具之间的竞争仍在继续。大多数设计师会有疑问,这两个哪个更好点呢?我是否应该从一种工具过渡到另一种呢?
在过去四年中,我一直在使用Sketch,而且是非常忠实的粉丝。因为在Photoshop做UI捉襟见肘的时代,Sketch确实是真正的救星,我相信你一定会记得那是多么痛苦。
不过最近我们公司改用了Figma,所以我有机会来尝试这款工具,并在Sketch之后,发现了这款工具,同样有了不起的地方。
在本文中,我将会告诉大家一些插件,最后咱们来看看哪个更好用。我们主要从下面几个方面介绍这两款工具:
- 工具特征 2.元件统一性 3.设计协同 4.物料交接 5.原型制作 6.导出文件 7. 离线工作 8. 插件
001.工具特征
两种工具几乎具有相同的功能,相同的快捷方式和相同的结构。如果您知道如何使用其中一个,则默认情况下您会知道另一个。
- Figma支持在Figma中打开Sketch文件
- Figma是基于Web的,因此可在任何操作系统(Windows,macOS ..)中使用
- Sketch是本机macOS应用程序,因此仅适用于mac
- Sketch和Figma的性能现在差不多
- Figma花费很长时间来加载项目,而Sketch只需1秒钟即可打开文件。
002.设计系统-元件
我在Sketch上用了很长一段时间来构建设计系统,这很好,但是当我转到Figma时发现那里的情况要好得多。让我来告诉你为什么!
当我想要创建文本样式时,sketch的文本/图层样式 不是原子级别的,我必须定义我想要的样式的所有情况,这些情况最终可能会导致非常长的文本样式列表。
让我们来解释一下Sketch样式的工作原理:当定义任何文本或图层样式时,Sketch会以该样式保存所有属性,并且如果您对任何属性进行了任何更改,那么您将覆盖文本样式。例如,如果您要使文本具有不同的对齐方式或不同的颜色。使用Sketch,您必须为每种情况创建文本/图层样式。
接下来看看Figma如何进行工作:
Figma属性面板
对于Figma来说,样式是依据原子化思路来设计的,在属性面板中的每个属性都可以为其定义样式。这就是它与设计标记完全一致的工作方式,您可以分别保存颜色,字体,阴影,并使用想要的样式的任何组合。这真的很有帮助,因为如果我决定更改颜色,在Figma中,如果您在一个地方改变它,它将在所有地方改变。
现在让我们讨论一下组件,我注意到Figma的表现也要好得多,它采用了sketch的元件系统,但是减少了它的限制。在Sketch中,如果有元件,则只能通过覆盖来修改符号,但是不能删除组件内的元素。例如,如果您有一个带图标的按钮,则必须创建2个符号,一个带图标,另一个不带图标。
Figma组件有些不同,您可以更改替代,但也可以修改组件层,以及图层的属性。
Figma组件实例,可以删除图标层并更改border-radius
003.设计协同
如果多个设计师进行协作,那么选择合适的工具就非常重要。
Figma在合作中采用了Google文档或时间查看器的方法。它允许所有设计人员同时处理同一文件。您会看到许多鼠标在项目中四处走动,并且可以观看其他设计师的工作。老实说,我确实不太喜欢在我工作的时候,另一个总盯着我的屏幕看,这确实是一团糟。但是其他一些设计师更喜欢这种工作方式,而且也会大幅提升效率。
Figma网站的屏幕截图
让我们看看我们可以用Sketch做什么,我发现Sketch在这方面要好得多,Sketch有一个名为abstract的插件,它允许设计人员拥有版本分支系统,类似Github(针对开发人员),并且每个设计人员都在分支中进行设计,然后合并该分支并解决存在的冲突。我个人更喜欢这种工作方式,但是有些设计师觉得它太复杂了。
004.设计交接
我们如何将设计稿交付给开发人员呢?Figma有自己的方式,但是开发人员所遇到的最大问题是,当我想发送一个屏幕时,我必须将所有项目文件链接发送给他们。当他们单击该链接时,他们必须等待直到项目加载完毕,才能看到设计稿中的一个界面。
而对于Sketch来说,Sketch Cloud可以共享您的屏幕,它仍在开发中,但是您可以使用插件来使工作流程更流畅,例如(Zelpin,invision…等等插件)。
005.原型制作
Figma中的原型工具很棒,您可以轻松地对其进行用户测试,因为它非常易于共享,并且始终随设计进行更新。 但是Sketch本机的原型功能不是很好,因为它不那么容易共享,您必须使用Sketch Cloud才能共享它。
但是令人欣慰的是,在Sketch和Figma中,你可以用Flinto,Protopie,Principle等来创建交互原型。
006.导出文件
这两款工具,导出操作相似,并且有很多集成插件可以同时使用,例如Zeplin插件和Simpli插件,这使得导出更加容易。但是我在Figma中真正想做的是,复制任何画板或任何元素,然后将其粘贴到Figma外部,这是行不通的,但Sketch可以。我过去一直这样做,所以我的桌面上没有太多垃圾。如果Figma有这个功能,那就太好了。
007.离线工作
两种工具都可以脱机工作,但是Figma无法加载组件,并且脱机工作很浪费时间。所以,Sketch胜出。
008.插件对比
Sketch比Figma开发时间早得多,因此插件更多。但是我真正喜欢Figma的地方是,它对每个插件都进行了插件审核,然后才能发布。这确保插件受信任并且不会破坏您的项目文件。
最后,我想强调一点,对于哪种工具更好,希望大家能亲自体验一下,因为到目前为止两者都做得很好。如果你sketch用的很好,那么也可以非常轻松的转到Figma中去。
所以,我建议大家根据自己的需求,根据自己的项目实际情况来选择具体的工具。
原文:https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a
作者:Ahmed Abdelmageed
翻译:静电@静Design