UI设计工具的爆炸式增长是2019年Web设计师感兴趣的最大发展之一。这些应用程序标志着我们创建现代用户界面的方式的转变。可能是在Photoshop中创建PSD原型的时代即将结束。

不服气吗？在过去的几年中，Sketch和Figma都发展了忠实的追随者。但是，最大的发展也许是设计软件巨头Adobe通过其XD产品跳入了游戏领域。这表明我们的工作方式确实正在向更加专业的工具转变。

考虑到这一点，让我们看一下这些“三大”应用程序。我们将介绍一些核心功能以及可能影响哪一项最适合您需求的其他因素。

是什么使UI设计工具与众不同？

多年以来，Web设计人员使用上述的Adobe Photoshop来创建网站模型。这比直接进入代码更可取，因为它使我们能够构建高度详细的界面并轻松进行编辑-无需拆开HTML，CSS等。

尽管这仍然可以是有效的工作流程，但这种新型应用程序具有特定于Web设计的功能。UI元素（如导航和按钮）是交互式的–您可以看到悬停效果或单击进入其他页面。

此外，使用UI设计应用程序构建的界面通常是响应式的。这意味着您可以看到它们在不同视口下的工作方式。您不再需要为电话，平板电脑和台式设备构建完全独立的PSD文件。

此外，还有大量的预制UI套件和模板可供使用，从而为设计过程提供了良好的开端。

本质上，您不再需要创建静态屏幕，而是完全沉浸式的原型。

现在，让我们看看这些应用程序！

Sketch

Sketch是最早投放市场的新型工具，最初于2010年发布。在此综述中，此应用程序比其他应用程序领先。因此，这也意味着有大量可用资源。

有各种扩展的库，这些库带来了新功能并增强了工作流程。功能范围从调整各种设计元素到配合库存图片服务以方便导入。

在其主要功能中，您会发现：

• 矢量图像编辑；
• 通过智能布局进行响应式设计；
• 支持可变字体 ;
• 与同事和客户的合作；
• 轻松将基于文本和图像的数据添加到演示中；
• Sketch Cloud服务可共享您的创作；
• 跨文档共享资源（符号，图像，文本，样式）的库；
• 创建和使用模板的能力；
• 大量可用的插件；

Sketch是一款桌面应用程序，提供30天的免费试用期，但商业许可的价格为99美元。可以按折扣价每年续订。

这里的一个重要警告是Sketch仅适用于macOS。如果您使用的是Windows或Linux，则将无法参与其中。

Figma

Figma于2016年首次发布，是一个基于浏览器的应用程序，吹捧一种协作设计方法。这样做的好处是，无论您使用什么操作系统，都可以在旅途中轻松访问它。

另外，当您与他人共享项目时，您将通过实时链接来实现。这意味着您不必首先导出为PDF或其他图像。他们所看到的正是您所创建的。

此外，Figma已构建为支持实时协作。团队成员可以相互交流并管理自己的项目任务。随附的版本历史记录使您可以根据需要回滚更改。

除此之外，您还会发现：

• 创建一致的样式并将其应用于项目的能力；
• 直接从设计文件中复制CSS；
• 可搜索资产库；
• 用户权限；
• 创建动画的交互式原型；
• 自动布局功能，响应式设计；
• 一个插件库，以及创建自己的插件的能力；

Figma有一个免费计划，允许3个项目，2个编辑器和30天的版本历史。功能齐全的商业计划起价为每月12美元（每年结算）。

Adobe XD

现在，到街上的新孩子。Adobe XD于2017年10月以beta版发布，面向想要创建网站，移动应用甚至游戏的设计师。它具有一个称为“ Coediting”的内置协作系统，并且可以使客户和同事提供反馈。

像其竞争对手一样，XD使您能够一次又一次地重复使用设计组件。您还可以一次编辑一个组件并将其推送到所有实例，从而实现更好的设计一致性。

也许最大的好处是Adobe XD与其他Adobe应用程序可以很好地配合。例如，您可以直接从XD在Photoshop中打开和编辑图像（只需右键单击图像以将其打开）。您对图像所做的任何更改也会自动反映在XD中。它还从Adobe Illustrator，Photoshop甚至Sketch导入文件。

其他值得探索的功能包括：

• 状态允许您基于用户交互（例如，悬停或单击）来编辑设计组件；
• 轻松复制设计元素；
• Adobe字体集成；
• 为原型创建交互和触发器；
• 通过配套应用在真实设备上预览移动应用；
• 文档历史记录使您可以回滚到以前的版本；
• 开发人员友好的资产，例如CSS，颜色，可下载资产；
• 支持功能并与第三方服务结合的扩展；

Adobe XD是基于订阅的软件。它需要完全的Creative Cloud成员资格，或者，您可以选择以每月9.99美元的价格单独订阅XD。如果您想先尝试一下，有一个免费的XD入门计划，可让您尝试一些限制。您可以在macOS或Windows上运行该应用程序。

做出正确的选择

这些工具中的每一个都有其自己引人注目的功能。这样，很难说您会犯错。

但是，要缩小选择范围，请考虑计划和在何处使用该应用程序。例如，如果您是Windows用户，则将无法使用Sketch。如果您更喜欢基于浏览器的产品和/或使用Linux，那么Figma是您的选择。如果您是Mac用户，并且希望通过模板和插件选择很多东西，那么Sketch是赢家。忠实的Adobe客户会喜欢XD的互操作性。

否则，您会发现许多相似之处。每个应用程序至少都具有一些协作能力。它们都创建矢量图形并提供资产库。所有人都擅长创建设计系统。另外，它们都可以扩展到一个或另一个程度。

无论您走什么方向，都可以确定一件事。您将处于网页设计的最前沿。