2020年应该使用哪种UI设计工具？2020年中期UI设计工具的现状

到了2020年，当今的市场已经充满了UI设计工具。自从Sketch应用以其时尚，简单，高效的工具来制作用户界面设计以来，许多公司就纷纷效仿，抢占了设计工具的市场份额。根据UXtools.co进行的2019年设计工具调查，Sketch去年处于领先地位，但与上一年相比，有很多工具正在赶超。

作者：Poyi Chen

2019最受欢迎的UI设计工具调查结果

2018最受欢迎的UI设计工具调查结果

根据我观察到的这些工具的增长，我自己使用这些工具的经验以及听到其他设计师使用这些工具的经验，我预计明年一两年内，Sketch，Figma和Adobe XD可能会受到关注。 。

今年，我与有抱负的设计师交谈时遇到的最常见问题之一是“ 我应该学习Sketch还是其他工具？\’。为了回答这个问题，我们可以深入研究工具的几个关键方面并进行比较。为了使本文简洁明了，我们仅关注调查中的前三个工具Sketch，Figma和Adobe XD。

系统要求

让我们从该工具的关键要求开始，这就是您正在运行的操作系统。许多人不知道Sketch是仅适用于Macintosh的应用程序。因此，如果您正在运行Windows或Linux计算机，则只能使用Figma或Adobe XD。

对于Mac用户，所有选项都在表中。

价钱

许多人的另一个关键决定因素。以下是每种工具的个人/个人定价模型的摘要：

• 素描：$ 99一次性付款。一年免费更新。这意味着您可能希望每隔一年支付$ 79的续订价格，以享受新功能。
• Figma：它是免费的，具有3个项目限制，一个项目中不限数量的文件和2个编辑器。
• Adobe XD：免费，具有无限的项目/文件，并且没有共享限制，直到2020年10月。之后，限制为1个共享项目和2个编辑器。

在撰写本文时，鉴于促销，Adobe XD似乎提供了最大的价值。

布局编辑

在布局管理上花费了大量设计时间。选择具有精心设计的布局功能的工具对于提高生产率至关重要。

对于Sketch，它们具有智能布局功能，可以在更改内容长度/大小时执行自动调整容器大小的操作。例如，按钮背景会调整为其文本长度。

Figma通过其自动布局功能（例如，拖放内容重新安排）在此区域提供了一组与Sketch类似的功能。

Adobe XD具有 内容感知布局功能，这有助于在调整内容大小时强制图层组的填充。 与其他工具的布局功能相比，我认为Adobe XD对填充功能的执行非常独特。

在更改内容高度时自动调整图层的垂直位置的功能可以节省大量时间。Figma在该区域略有边缘。

合作

如果您与其他设计师一起工作，则这三种工具都提供了与其他人共享文件的方法，如果您想计算插件的可用性，则可以提供更多方法。在这里的讨论中，我们将重点介绍每个工具附带的与默认协作相关的功能。

对于Sketch，文件可以存储在其云服务器中。就像其他云存储服务一样，这些文件也可以与其他人共享和编辑。可以使用版本控制，并且在撰写本文时，他们的检查工具处于beta版。从历史上看，Sketch与其他工具（例如Invision或Zeplin）配对使用，以实现诸如设计共享和移交之类的协作功能。Sketch正赶上提供这些功能的更好版本，但在2020年仍落后于其他竞争对手。

Figma凭借其实时协作功能脱颖而出，它允许多个人同时查看/编辑同一文件。这是近年来UI设计工具市场上最独特的功能之一。就是说，此功能仅对实际上同时在同一项目上进行协作的设计团队有用。实时编辑/预览功能很方便，因为任何人查看设计文件都将始终看到最新的更改。除了实时协作之外，Figma还具有其版本控制，设计系统和检查功能，与其他工具相当。

Adobe XD于2019年11月推出了自己的共同编辑功能，其中包括多用户编辑和文件版本控制等功能。此外，XD具有与其他工具相似的共享和挂断功能集。

考虑到XD功能的beta状态，Figma是这里的首选，特别是对于重视实时协作的设计师。

性能

对于大多数拥有适当硬件规格的人来说，这三种设计工具之间的性能差异不会太大。当使用大量画板/框架，外部插件和文件中的图像资产时，性能问题将变得更加明显。

使用Sketch时，在一个Sketch页面上包含几十个画板的文件上工作时，经常会遇到呆滞的交互。我还看到了一些报告，其中人们在使用第三方插件时遇到性能问题。

在使用Figma的日常流程中，我很少遇到性能问题。鉴于Figma是基于浏览器的工具（也具有桌面应用程序，可能是Web应用程序的包装），因此性能对硬件的依赖性较小，并且在大多数情况下都相当不错。与Sketch类似，根据其内容和功能，插件可能需要花费一些时间才能加载，但这并不是很重要。

对于Adobe XD，我在2019年初首次启动时遇到了一些性能问题。此后，后续的更新解决了相同的性能问题。老实说，我没有像其他工具那样广泛地测试过XD的性能，但是到目前为止，该性能已经可以与Sketch媲美。

在性能类别中，根据我的经验，Figma是最可靠的。

原型制作功能

关于原型制作工具，有很多讨论要讨论，因为市场上有更多专门的原型制作工具可供考虑。但是，使用这三种工具总结原型功能是有益的。

Sketch支持屏幕链接以使用热点构建可点击的原型。然后可以在本地预览原型，也可以通过Sketch Cloud与其他人共享原型。具有“滚动时固定位置”和“单击后保持滚动位置”等功能的其他功能使Sketch与Invision提供的原型制作功能相当。

Figma具有与Sketch几乎相同的原型制作功能。主要区别在于过渡效果，其中Figma具有智能动画功能，该功能可自动为两个帧之间的状态设置动画。使用Smart Animate，我们可以创建外观更复杂的原型。

Adobe XD在原型制作领域具有更多功能。除了Figma和Sketch提供的功能外，还有更多功能（如键盘，游戏手柄和基于语音的触发器）可以支持更专业的原型体验。

对于原型开发的开箱即用功能，Adobe XD是领先者，提供了更多输入选项。

外挂程式

这三个工具都带有插件生态系统。

经过很长一段时间的发展，Sketch具有庞大而多样的插件库。您可以找到许多有用的插件来加快设计工作流程或扩展Sketch的功能。

Figma的插件支持于2019年8月启动。此后，添加了许多插件，但与其他工具相比不足。

Adobe XD于2018年开始了其插件生态系统。它可能尚未与Sketch处于同一级别，但正在迅速赶上。在我看来，这三个工具中还具有更好的浏览和插件管理体验。

由于其庞大的插件库，Sketch仍然赢得了插件类别的冠军。

发展速度

在选择一种设计工具来投入学习时间时，一个重要的考虑因素是该工具的发展速度。

查看Sketch的更新日志，他们在过去一年的更新中名列前茅，平均每月大约有一个重要的更新（完整版本1个）。他们可能会在2019年初获得最新资金，以赶上其他竞争对手。这里的关键词是“赶上来”，坦率地说，与Figma和Adobe XD相比，Sketch在功能上落后了一段时间。考虑到Sketch在其竞争对手之前已经推出了数年，因此看到Sketch与其他竞争设计工具相当时，这令人有些灰心。

Figma的发布功能与Sketch相似。值得注意的是，Figma与其他工具（如Maze（用于测试）和Framer Web（用于原型制作））一起发布了更多与集成相关的功能。因此，Figma与使用其他工具来补充设计工作流程的设计师或团队合作良好。

Adobe XD的发布速度令人印象深刻。它最初发布时（考虑在2017年末发布beta版本）时遇到了问题，但在不到两年的时间里它迅速成为其他工具的有力竞争者。XD没有与其他第三方设计或开发工具广泛集成，但与Adobe套件紧密集成。

对于此类别，尽管XD到目前为止已经取得了不错的成绩，但Figma在推出新的多样化功能方面拥有较长的记录。

那么您应该使用哪个工具？

Sketch，Figma和Adobe XD都是出色的UI设计工具。如果您只是开始并讨论要使用的工具，我建议您以Figma作为起点。如果您正在寻找一种设计工具，该工具还具有创建更复杂的原型的能力（例如，语音输入触发器），请使用Adobe XD。最终，您的雇主/设计团队可能最终会为您选择工具，但是好消息是这三个工具非常相似。这意味着，如果您一直在花时间购买一种工具，那么当您选择另一种工具时，大部分知识都是可以转让的。