Vako Shvili

产品和UI设计师经常面临一个艰难的决定,他们将使用哪种工具:Figma还是Sketch?让我们最后来了结这件事Figma和草图辩论。在这篇文章的最后,我们将明确赢家,你将知道哪个应用程序最适合你的目的。

我是一个web和UI设计师。当我第一次尝试草图时,我爱上了它。素描快速,轻巧,易于使用。它非常适合接口设计。

完成网页设计:从Figma到Webflow再到Freelancing

2021年9月

畅销书
  • 202课
  • 各级
4.7 (5926)

1门课程:学习用Figma设计网站,用Webflow构建网站,并以自由职业者为生。|由Vako Shvili

探索课程

大多数UI设计师都有同感。在Sketch出现之前,我们必须使用Photoshop进行界面设计。Photoshop有它的用途,但它不是为用户体验和UI设计而设计的。这是用来处理照片的。因此,它的名字中就有了“photo”这个词。

很快,素描就成为了行业标准,并保持了多年。

Figma有时被称为“类固醇素描”。

为什么我要在素描和菲格玛之间做出选择

当我第一次尝试Figma时,我没有看到任何主要的好处,所以我又回到了Sketch。

但几年后,当我开始创造一个网页设计课程,我需要选择一个界面设计工具来教学。Sketch并不是最好的选择,因为它只在Mac上运行,而且你必须支付许可证。我需要所有机器都能免费使用的东西。

这让我想到Figma和Sketch之间最重要的区别。

差异1:平台可用性

虽然Sketch只能在macOS上使用,但Figma可以在Mac和Windows上运行,并且有一个web应用程序。

如果你没有Mac电脑,这个简单的事实足以让你做出决定。

即使对于MAC拥有设计师,这仍然是一个重要的事实。当我在像移动应用程序设计这样的大UI项目时,我与一支团队合作。有时我需要将设计文件提供给另一个设计师。如果他们有一个PC,我无法分享我的草图文件。

获胜者:Figma.

区别2:成本

Figma对个人设计师是免费的,但对拥有两名以上设计师(编辑)的团队要花钱。然后它就比Sketch更贵了,每个编辑每月12美元起。但这是你老板该担心的。

Sketch的下载价格为99美元。

素描计划
素描计划
Figma计划
Figma计划

获胜者:Figma.

差异# 3:风格

我开始在课程中使用Figma。我开始注意到微小但有意义的差异。

图绘制的风格与素描的差异是让我为我的自由工作切换到图形。

在Figma中,您可以从文本、颜色、笔划和效果创建独立的样式。可以将这些样式应用于任何图层。您可以应用文字样式和颜色样式,仅应用阴影,或将所有内容一起应用。

在Sketch中,这是不可能的。你只有两种类型:文字和图层样式。每个属性都成为这个样式的一部分。例如,在下面的例子中,一个带有投影的粉色矩形是一个单层样式。

Sketch中的图层样式
Sketch中的图层样式

我不能将粉色或阴影单独应用于任何其他元素。

在图中,粉红色的颜色和阴影样式是独立的:

Figma中的颜色和阴影样式
Figma中的颜色和阴影样式

这个小细节会产生所有差异。我需要创建一次粉红色或拖放阴影样式,然后在整个项目中使用它。如果我将其应用于文本,矩形,椭圆,组,帧或其他任何其他任何东西并不重要。颜色是颜色,阴影是阴影(不根据草图)。

我可以稍后决定改变粉红色的颜色风格为蓝色。这个改变会影响到这个样式的每一个图层。所有粉色的按钮,粉色的文字,粉色的图标,所有粉色的东西都会变成蓝色。一声刷漆。哇!

您可以在Sketch中实现类似的功能。但是您需要组合样式、嵌套符号等等。Figma的方法更加优雅。

文本样式

有更多的。Figma处理文本样式要比Sketch好得多。在Sketch中,您不能覆盖特定文本样式的任何属性。

例如,假设我们有一个大标题文本样式:Roboto,粗体,45px,左对齐,黑色。

在整个项目中,我们需要标题有时居中对齐,有时左对齐,有时蓝色而不是黑色。

在Sketch中覆盖文本样式
在Sketch中覆盖文本样式

在Sketch中,我们可以进行这些覆盖,但它们是临时的。当我们需要调整主样式时,比如改变字体,所有这些覆盖都会消失:

在更新大标题样式后,所有覆盖都会丢失。
在更新大标题样式后,所有覆盖都会丢失。

甚至连对齐都不能保持。因此,要在Sketch中使用文本样式,我们不能有一个大标题文本样式。我们需要:

为每个颜色变化等等。这只是一种类型的标题。我们需要其他头条新闻,副标题,段落,链接和标题。这会产生这样的混乱,通常最好不要使用样式。

在Figma,只有一个大标题。注意当我更新主文本样式时,所有颜色和对齐属性是如何保持的:

Figma的文本样式更新
Figma的文本样式更新

在Figma中我们需要多少大标题文本样式?一个。这个发现几乎让我流泪。

获胜者:Figma.

差异#4:实时协作

关于Figma的最讨论的细节是其实时协作功能。

实时协作演示。来源:Figma.com
实时协作演示。来源: Figma.com

由于这一特性,许多人将Figma称为“数字设计的谷歌文档”。下面是它的工作原理:

对于拥有许多设计师的大型团队来说,这是一个改变游戏规则的方法。

素描远远没有这个功能。他们确实有一个云功能,但到目前为止,它更像是文件共享的Dropbox。

获胜者:Figma.

差异# 5:原型

根据我的经验,Figma的原型设计优于草图。这就是为什么:

使用Figma的智能动画弹球动画
使用Figma的智能动画弹球动画

Figma原型的失败之处

菲格玛的原型缺少一个关键的东西——页面之间的链接。目前,它不允许我们连接在不同页面上的框架。

在Sketch中,这不是问题。你为什么需要这个?

我开发的应用程序通常有300多个屏幕。在Sketch中,我将这些屏幕组织成页面。例如,我将有这样的页面:

这样,如果我需要更新用户的头像,我可以进入“用户配置文件屏幕”页面,轻松定位头像。

但由于Fluma不允许在页面之间链接的原型,因此我需要在同一页面上所有:

在Figma的同一页面上有317个应用程序屏幕
在Figma的同一页面上有317个应用程序屏幕

在图中,我浪费了很多时间寻找屏幕。为了更容易搜索,我必须花时间组织不同组中的屏幕。

如果我知道框架的名称,并使用搜索插件,我可以很容易地找到它。但我记不住317个屏幕的名字。我需要直观地浏览一下那里有什么。

此外,当同一画布上有300多个屏幕时,最终会在彼此相距较远的屏幕之间进行大量缩放和平移。但是对于页面,您只需单击一下就可以进入该屏幕。

比起那些花哨的动画选项,我更需要这个功能。所以对我来说,这是素描。

赢家:草图

差异# 6:插件

有大量优秀的插件可以填补Sketch功能缺失的空白。

Figma在可用插件的数量上不如Sketch。这是因为它是一个新工具,他们在2019年推出了插件支持。

但Figma在质量上弥补了数量上的不足:

下面是如何找到和安装Figma插件:





安装Figma插件的演示

Figma需要一些时间,以便第三方开发者能够跟进并创建更多插件。现在,我们姑且称之为平局。

获胜者:平局

差异#7:符号和组件

Sketch中的符号与Figma中的Components相同。它们的工作方式相似,除了一个主要的区别。

在Figma中,您可以覆盖组件的大多数属性。在草图中,您只能覆盖符号的文本,除非您通过嵌套它内部的其他符号和图层样式准备符号。仍然是,这只限制了您嵌套选项。

Figma中的组件
Figma中的组件

上图是Figma中的单个按钮组件。颜色的差异是简单的填充覆盖。我不需要有四个不同的按钮组件或内嵌层样式。一个组件可以统治所有组件。

如果我想标准化按钮颜色,我可以从我的通用颜色样式中选择颜色:

使用颜色样式覆盖颜色
使用颜色样式覆盖颜色

获胜者:Figma.

区别#8:暗模式

暗模式不仅看起来很棒。这对于无障碍和防止眼睛疲劳是必要的。

反之亦然。在明亮的日光下,在黑暗模式下工作是困难的。用户界面的可视性很低,大多数时候你都会眯着眼睛。

这就是为什么同时拥有光明和黑暗模式是理想的。你在一天中的任何时候都能获得最佳的视觉效果。

素描光明和黑暗模式
素描光明和黑暗模式

草图有两种模式。但菲格玛只有一个,光模式。您可以在Figma中手动更改画布颜色,但仅此而已。用户界面保持白色。

赢家:草图

差异#9:第三方资源

如果您使用现成的UI工具包,启动设计项目通常会更容易。

Sketch的示例UI套件
Sketch的示例UI套件

素描是这里的胜利者。它已经很久了,它有一个更大的市场(现在),因此有很多付费和免费套件下载。

您可以将草图文件导入图形图,但样式不会转换,并且您将在套件中丢失重要功能。

赢家:草图

差异#10:用户乐趣

我是一个苹果“粉丝”。我最喜欢苹果产品的是小而令人愉悦的细节。例如,在macOS上最小化窗口时的精灵效果。

我在《Figma》中也发现了许多有趣的细节。

消失的组

在Figma中,如果删除组中的所有层,组也会消失。

在删除了孩子之后,这个组就消失了
在删除了孩子之后,这个组就消失了

它很小,但这讲述了一个更大的故事,关于谁在产品后面。每个人都可以获得基础知识。但要使一些令人愉快的事情,令人敬畏地努力和奉献精神。

复制属性

在Sketch中,您可以复制一个元素的所有属性,并将其粘贴到任何其他元素上。这是一个方便的功能。但是你不能只复制一个属性,比如背景阴影。

在Figma中,可以复制单个属性。例如,我在一个按钮上添加阴影,我想在其他元素上也使用相同的阴影。我可以在属性面板中选择这个属性,复制它,然后粘贴到其他图层上。

在Figma中复制粘贴属性。我正在使用标准副本(Ctrl + C)和粘贴(Ctrl + V)函数。
在Figma中复制粘贴属性。我使用标准的复制(CTRL+C)和粘贴(CTRL+V)功能。

快捷键教程

图为图形的鲜为人知的快捷方式教程栏。它显示了各种捷径。

快捷键在Figma
快捷键在Figma

您已经使用的快捷方式以蓝色突出显示。这样你就可以告诉所有的快捷方式来学习。这就是我所说的令人愉快的产品。

自动帧编号

当我开发一款拥有300多个屏幕的应用时,我绝对需要为它们编号。当我问我的产品经理他们谈论的是哪个屏幕时,他们需要能够说“#51”,而不是“最终付款确认前出现的预订屏幕”。

在Sketch中,我必须手动为帧编号,但Figma自动做到了这一点。

自动帧编号在Figma
自动帧编号在Figma

有没有更多的方式无花果愉悦,但我会让你发现那些。

获胜者:Figma.

结论

让我们把分数加起来。

过去,这两个应用程序之间的差异甚至更大。但他们很快就能赶上另一家公司推出的任何新功能。我赌菲格玛。我希望读了这篇文章后,你也是。如果你想通过Figma学习设计,这门课可能适合你.剧透警告:我是教练。

页面最后更新:2020年9月

Web设计中的顶级课程

Web Design for Beginners: Real World Coding in HTML & CSS
布拉德希夫
4.6 (17992)
畅销书
Adobe XD Web设计:UI和UX的基本原则
Cristian Doru Barin.
4.6 (45)
2018年登录页设计和转换率优化
艾萨克Rudansky
4.8 (6934)
畅销书
熟练使用Photoshop进行网页设计
Cristian Doru Barin.
4.7 (2320)
Dreamweaver-使用Dreamweaver编码您的第一个网站
丹尼尔沃尔特斯科特
4.8 (601)
开始Squarespace网站设计业务-在家工作!
达拉赫·沃尔什,菲利普·德拉克
4.6 (88)
2021年Ultimate Web Designer&Web开发人员课程
布拉德·哈斯
4.5 (12389)
畅销书
学习Photoshop,网页设计和有利可图的自由职业
Cristian Doru Barin.
4.5 (6104)
畅销书

更多网页设计课程

网络设计学生也会学习

让你的团队。领导行业。

通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。

请求演示

Vako Shvili课程