Figma vs草图：10个差异设置分开
产品和UI设计人员经常面临难度决定，当涉及到哪种工具，他们会使用它：图格/素描？让我们终于解决了分数图格马与素描辩论。在本文结束时，我们将拥有明确的赢家，您将知道哪个应用程序最适合您的目的。
我是一个web和UI设计师。当我第一次尝试草图时，我爱上了它。素描快速，轻巧，易于使用。它非常适合接口设计。
最后更新5月2021
3在1课程中：学习使用Figma设计的网站，使用WebFlow构建，并制作自由职业者。|由Vako Shvili.
探索课程大多数UI设计师都以同样的感觉。直到素描出现，我们必须使用Photoshop进行接口设计。Photoshop具有其目的，但它不是为UX和UI设计制作的。它是为照片操纵制作的。因此，名称中的“照片”一词。
很快，素描成为行业标准，多年来保持这种方式。
输入图形，有时称为“类固醇草图”。
为什么我不得不在素描和图形之间决定
当我第一次尝试图形时，我没有看到任何重大好处，所以我回到了剪影。
但几年后，当我开始创造一个网页设计课程，我需要选择一个接口设计工具来教授。素描不是最好的选择，因为它只在Mac上，你必须支付许可证。我需要一些免费的东西，可供所有机器。
这让我介绍了图格玛与草图之间最重要的区别。
差异＃1：平台可用性
虽然素描仅在MacOS上可用，但Figma在Mac和Windows上工作，并且有一个Web应用程序。
如果您不拥有Mac，这个简单的事实足以让您做出决定。
即使对于MAC拥有设计师，这仍然是一个重要的事实。当我在像移动应用程序设计这样的大UI项目时，我与一支团队合作。有时我需要将设计文件提供给另一个设计师。如果他们有一个PC，我无法分享我的草图文件。
获胜者：Figma.
差异＃2：成本
Figma是个人设计师免费，但为具有两个以上设计师（编辑）的团队而成的费用。然后它比素描更贵，从每位编辑/月12美元开始。但这是为了你的雇主担心。
素描是一个99美元的下载。
获胜者：Figma.
差异＃3：款式
我开始使用图中的课程。我开始注意到微小但有意义的差异。
图绘制的风格与素描的差异是让我为我的自由工作切换到图形。
在Figma中，您可以从文本，颜色，笔划和效果创建独立样式。您可以将这些样式应用于任何图层。您可以应用文本样式和颜色样式，只有阴影，或一切都在一起。
在草图中，这是不可能的。您只有两种类型：文本和图层样式。每个属性都成为那种风格的一部分。例如，下面示例中具有丢弃阴影的粉红色矩形是单层样式。
我无法在任何其他元素上独立地应用粉红色或阴影。
在图中，粉红色的颜色和阴影样式是独立的：
这个小细节会产生所有差异。我需要创建一次粉红色或拖放阴影样式，然后在整个项目中使用它。如果我将其应用于文本，矩形，椭圆，组，帧或其他任何其他任何东西并不重要。颜色是颜色，阴影是阴影（不根据草图）。
我稍后可以决定将粉红色的颜色样式更改为蓝色。而且变化会影响那种风格的每个单层。所有粉红色的按钮，粉红色文本，粉红色图标，以及粉红色的一切都会变成蓝色。单击“绘制作业”。哇！
你可以在草图中实现类似的东西。但是您需要将样式，嵌套符号等组合。Figma的方法更优雅。
文字样式
还有更多。Figma处理文本样式比草图好得多。在草图中，您无法覆盖特定文本样式的任何属性。
例如，假设我们有一个大标题文本样式：Roboto，Bold，45px，左对齐，黑色。
在整个项目中，我们需要标题有时是中心对齐的，有时左对齐，有时是蓝色而不是黑色。
在草图中，我们可以使这些覆盖，但它们是暂时的。我们需要调整一些关于主样式的时刻，如改变字体，所有这些覆盖都会消失：
甚至是对齐仍然存在。所以，在素描中使用文本样式，我们不能有一个大标题文本样式。我们需要有：
- 大标题/左侧对齐
- 大标题/中心对齐
- 大标题/右对齐
- 大标题/蓝色/左对齐
- 大标题/蓝色/中心对齐
- 大标题/蓝色/右侧排列
为每个颜色变化等等。这只是一种类型的标题。我们需要其他头条新闻，副标题，段落，链接和标题。这会产生这样的混乱，通常最好不要使用样式。
在图中，只有一个大标题。请注意所有颜色和对齐属性如何持续，因为我更新了主文本样式：
我们需要多少大标题文本样式？一。这个发现几乎带来了泪水。
获胜者：Figma.
差异＃4：现场合作
关于Figma的最讨论的细节是其实时协作功能。
由于此功能，许多人都配给了Figma“Google Digital Design的Google Doc。”这是它的工作原理：
- 实时对他人可见的变化。
- 您可以看到其他编辑器的鼠标移动，颜色编码和命名，如上面的GIF中。
- 它实际上是有效 - 没有同步问题或长滞后。
这是一个游戏更换器，适用于具有在同一项目上工作的许多设计师的大型团队。
素描远远没有这个功能。他们确实有一个云功能，但到目前为止，它更像是文件共享的Dropbox。
获胜者：Figma.
差异＃5：原型设计
根据我的经验，Figma的原型设计优于草图。这就是为什么：
- Figma提供更多UI触发器：点击那拖累那同时徘徊那鼠标进入/离开，还有几个。唯一的草图触发是点击。
- 原型预览更稳定，在图2中更好地工作。
- 两个应用程序都有原型屏幕之间的标准转换，例如移动输入/输出。但图形有一个额外的一个被称为智能动画。这允许您创建高级动画，例如我在几下单击中创建的这次弹跳球：
图形原型失败的地方
Figma的原型设计缺少一个关键的东西 - 在页面之间联系。目前，如果它们在不同的页面上，它不允许我们连接帧。
在草图中，这不是一个问题。你为什么需要这个？
通常，我在有超过300个屏幕的应用程序上工作。在素描中，我将这些屏幕组织在页面中。例如，我将有这样的页面：
- 注册屏幕
- 帮助屏幕
- 预订屏幕
- 用户配置文件屏幕
这样，如果我需要对用户的头像进行更新，我可以转到“用户配置文件屏幕”页面，并轻松找到化身。
但由于Fluma不允许在页面之间链接的原型，因此我需要在同一页面上所有：
在图中，我浪费了很多时间寻找屏幕。为了更容易搜索，我必须花时间组织不同组中的屏幕。
如果我知道框架的名称，我使用搜索插件，我可以轻松找到它。但我无法记住我以317屏幕命名的东西。我需要在视觉上浏览那里的东西。
此外，当你在同一个画布上有300多个屏幕时，最终结束缩放并平移很多，以便在远离彼此的屏幕之间。但是对于页面，您可以单击到该屏幕。
我需要这个功能超过那些花哨的动画选项。所以对我来说，这个人去剪影。
赢家：素描
差异＃6：插件
有一个很棒的插件的海洋，可以填补缺少草图特征的差距。
涉及到可用插件的数量时，Figma跌倒了草图。这是因为它是一个新的工具，他们在2019年推出了插件支持。
但是缺乏数量的图形缺乏质量：
- 插件安装是单击图形的单击。在素描中，您需要下载一个zip文件，通常是从github，提取它，找到插件文件夹，并将其放在那里。不好玩。
- 找到一个插件就在图2内碰巧。有一个插件选项卡，您可以在其中浏览和搜索所有图形插件。我喜欢这个。当我需要像拼写检查一样简单的东西时，我不需要离开这个应用程序。
以下是如何查找和安装Figma插件：
Figma插件安装的演示
Figma需要一点时间，以便第三方开发人员可以追赶并创建更多插件。现在，让我们称之为绘画。
获奖者：画画
差异＃7：符号和组件
素描中的符号与图形中的组件相同。他们以类似的方式工作，除了一个主要区别。
在Figma中，您可以覆盖组件的大多数属性。在草图中，您只能覆盖符号的文本，除非您通过嵌套它内部的其他符号和图层样式准备符号。仍然是，这只限制了您嵌套选项。
以上是图形图中的单个按钮组件。颜色的差异是简单的填充覆盖。我不需要在它内有四个不同的按钮组件或嵌套层样式。一个组件可以统治它们。
如果我想标准化按钮颜色，我可以从我的通用颜色样式中选择颜色：
获胜者：Figma.
差异＃8：黑暗模式
黑暗模式并不看起来很棒。可访问性是必要的，并防止眼睛疲倦。
相反的是真的。在明亮的日光期间，在暗模式中工作很难。UI的可见性非常低，您最终大部分时间都会眯起。
这就是为什么具有光和黑暗模式是理想的。您每天都会获得最佳观看。
素描有两种模式。但图形有一个，光模式。您可以手动更改图形图中的画布颜色，但这是关于它的。UI保持白色。
赢家：素描
差异＃9：第三方资源
如果您使用现成的UI套件，则启动启动设计项目通常更容易。
素描是这里的胜利者。它已经很久了，它有一个更大的市场（现在），因此有很多付费和免费套件下载。
您可以将草图文件导入图形图，但样式不会转换，并且您将在套件中丢失重要功能。
赢家：素描
差异＃10：用户喜悦
我是一个苹果“粉丝”。我最爱的是苹果产品的少量但令人愉快的细节。例如，在最小化摩托斯上的窗口时，Genie效果。
我也在图中发现了许多令人愉快的细节。
消失的组
在Figma中，如果删除组内的所有图层，则该组也消失。
它很小，但这讲述了一个更大的故事，关于谁在产品后面。每个人都可以获得基础知识。但要使一些令人愉快的事情，令人敬畏地努力和奉献精神。
复制属性
在草图中，您可以从一个元素复制所有属性并将其粘贴到任何其他元素上。这是一个方便的功能。但是你不能只复制一个属性，就像背景阴影一样。
在Figma中，您可以复制一个属性。例如，我在一个按钮上应用阴影，我也希望在其他元素上使用完全相同的阴影。我可以在“属性”面板中选择该属性，复制它，然后在任何其他图层上粘贴它。
快捷方式教程
图为图形的鲜为人知的快捷方式教程栏。它显示了各种捷径。
您已经使用的快捷方式以蓝色突出显示。这样你就可以告诉所有的快捷方式来学习。这就是我所说的令人愉快的产品。
自动帧编号
当我在带有300+屏幕的应用程序上工作时，我绝对需要编号。当我问我的产品经理他们在谈论哪个屏幕时，他们需要能够说“＃51”而不是“预订屏幕在该预订确认之前提出的屏幕。”
在草图中，我必须手动编号帧，但图形是自动的。
有没有更多的方式无花果愉悦，但我会让你发现那些。
获胜者：Figma.
结论
让我们统计得分。
- 图格玛：6分（平台，价格，款式，现场合作，组件，小型喜悦）
- 素描：3分（原型，黑暗模式，资源）
- 画：1（插件）
这两个应用程序之间曾经甚至更差异。但他们很快就会赶上任何新功能。另一个介绍了。我希望在阅读这篇文章之后，你也是。如果您想使用图格一样学习设计，这门课程可能会为你。SPOILER ALERT：我是教练。
