作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Ben Kopf
Verified Expert in Design

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

PREVIOUSLY AT

ADP
Share

在最近的Toptal信息图表中:The Best UX Tools,“我们研究了市场上各种各样的数字设计工具, 其中大多数都能够协助个人的日常工作 UX designer.

Three of the tools featured, Sketch, Figma, and Axure, 因为他们擅长UX设计工作流程中的特定工作而产生了忠实的追随者.

然而,这些工具的性能各不相同 取决于手头的设计任务. 而不是在比较表中列出它们的所有特性, 我们将通过基于任务的评估来确定它们的有效性.

以下是对竞争对手的快速概述:

  • Sketch 由位于荷兰海牙的波西米亚编码公司开发. Sketch is a Mac-only application.
  • Figma 来自加州旧金山的Figma公司. Figma可以通过浏览器在任何操作系统上运行.
  • Axure 由位于加州圣地亚哥的Axure软件解决方案公司开发. Axure有Windows和Mac两个版本.

我们将根据每个工具开箱即用的日常设计任务执行情况对其进行评分without 插件、附加组件或第三方应用程序. The tasks include:

  1. Doing Concept Ideation
  2. 创建低保真交付成果
  3. 创建高保真交付成果
  4. Creating Interactive Prototypes
  5. Creating a Design System
  6. Delivering to Development

Note: 当这些工具具有完成任务所需的几乎相同的特性时, 胜利将属于更容易使用和提供更快交付的工具. 如果这一决定看起来势均力敌,那么第三方的支持将是决定性因素.

Task: Doing Concept Ideation

构思是产生新想法的创造性过程, 这通常是由设计师组成的跨学科团队完成的, developers, product owners, and project managers.

目标是在考虑基本需求和任何已经在构建中的工作之后,创造出新的想法用于产品. 例如,一个团队可能会经历一个概念构思会议,以创建一组 MVP 新应用的功能,或者现有应用的下一代功能.

图片展示概念创意设计协作:草图vs figma

许多设计师在白板或纸上构思概念. 然而,创意也是通过数字方式完成的,尤其是在美国 distributed offices. 概念生成是一项团队运动,包括非设计师,如产品负责人/经理和前端开发人员. 促进协作且易于使用的工具最适合此任务.

Winner: Figma

Sketch和Axure都提供云共享服务, 但是没有办法与合作者实时共享屏幕.

Files shared in Figma 是否可以实时加入,并显示每个参与者的标记光标. 单击工具栏中的代表性头像,将视图切换到该人物的透视图, 使快速分享想法变得容易. Additionally, Figma doesn’t require non-designers to own a copy; they open the file link and start working.

其他白板协作工具可能比Figma更适合概念构思,比如 Mural and Realtimeboard但是作为一个设计工具,Figma比Sketch和Axure要好得多.

任务:创建低保真交付物

低保真度的可交付成果通常是 wireframes 或者是其他设计师和产品负责人可以分发和审查的数字草图. 根据用户体验过程,它们也可以由开发人员和其他利益相关者查看.

线框图旨在显示应用程序的基本结构,以便在花时间创建高保真模型之前定义交互模型.

Axure vs Sketch线框界面设计生成

创建低保真线框图可以通过专门用于该任务的工具来完成, including Balsamiq Mockups, Moqups, and FluidUI. However, Sketch, Axure, 和Figma都可以完成同样的任务, 特别是当用户创建线框组件库时.

因为线框图通常作为应用程序或页面的初始UI布局, 它们是单色的毛坯,经常变化. 这有助于控制涉众的期望.

For wireframes, ease of use, speed of delivery, 修改是必不可少的,因为它们使设计师能够有效地产生不同的设计.

Winner: Axure

Axure vs. 草图:绘制线框拖放组件

Axure 在这里获得胜利,因为它有预先包装的组件,可以在安装软件后立即进行线框图. Sketch and Figma have the tools that let you create wireframes, 但是您需要绘制线框组件或下载包含它们的文件. 无论哪种情况,它们都必须积分成a symbol (Sketch) or component (Figma)库可以像Axure组件一样拖放.

Axure has many third-party libraries 用于创建低保真交付物,Sketch有许多免费和付费的工具 files 可以下载,而Figma public resources are still fledgling.

Once a designer 已经创建了线框组件库,这三个工具是均匀匹配的吗. 请注意,Axure的组件拥有 parametric and adjustable properties, but for static wireframes, 当库可用时,这三个工具都表现良好.

任务:创建高保真可交付成果

高保真的交付成果来自于从低保真线框图中收集的反馈和学习. 它们是显示颜色、视觉细节和建议应用程序最终设计的模型.

Figma vs Sketch: Figma高保真原型.

高保真度还意味着屏幕模型可以展示给客户, internal executives, 以及其他非设计师利益相关者. 擅长这项任务的设计工具拥有所有必要的功能,可以为最终面向客户的交付成果添加修饰.

这包括对对象填充和笔触的控制, 添加阴影和渐变填充等效果,并将艺术导出为易于消化的格式(png), pdf, jpg).

Winner: Figma

Figma审查高保真交付

Sketch 和Figma有几乎相同的工具集,可以创建高保真的模型,但是 Figma’s 交互模型更加精细,工具从一开始就更容易使用. 这两个工具都可以轻松访问高级编辑和布尔命令,如Join, Intersect, Union, and Subtract. For high fidelity in Sketch, 有一个插件支持,允许第三方创建额外的功能, 但这些工具在安装后并不能立即使用.

这三个工具都具有允许自定义对象创建的特性, 但Axure让访问这些命令变得有些困难. 上面提到的编辑在工具栏上不可用. 只有在选择多个对象时,才能通过上下文菜单获得访问权限.

Additionally, Figma’s vector networks 使使用线条工具变得轻而易举.

招聘美国全职自由UI设计师

任务:创建交互原型

互动原型可以像纸上原型一样粗糙,也可以像现有应用的分支版本一样详细,这些分支版本已经被修改以探索新功能. Typically, 交互式原型允许用户从一个屏幕导航到另一个屏幕,并使用菜单和列表等功能.

Sketch vs. Axure vs Figma交互原型功能

对于许多设计师来说,在展示他们的作品时,一个基本的交互式幻灯片就足够了. 对于手机应用来说尤其如此,因为简单的过渡提供了足够的设备交互来解释设计.

Figma的原型模型集成良好,使用简单, 因为它是一个实时的基于云的应用程序, 当文件更新时,不需要刷新HTML页面.

Occasionally, 利益相关者希望通过实时数据连接来加载带有真实世界数据的原型,从而测试设计的可扩展性, 但现在绝大多数设计师都不需要复杂的原型.

Winner: Figma

Figma design sketch alternative

Sketch和Figma都支持简单的原型设计,带有“对象到画板”链接和有限的过渡集. Plugins 帮助支持Sketch中的简单原型, 但在为原型提供健壮的交互模型方面,Axure是最强大的.

Task: Creating a Design System

设计系统,虽然在用户体验设计领域相对较新, have been around for decades. 它们包括共享的设计语言, components, resources, 以及指导方针,使团队能够协作并做出更好的决策. 设计系统库通常作为网站实现,并作为整个欧博体育app下载的单一来源.

Winner: Figma

While component libraries 可以在任何程序中构建吗, 它们都不允许设计师在一开始就拨动开关并生成可行的组件库. Axure can generate an HTML page with custom components on it, 但是没有办法查询单个组件来找出颜色值, size, and other properties.

使用这些工具构建设计系统仍然是一个手工过程. 不过,Sketch也有插件(比如Google最近发布的插件) Material Design plugin) and at least one third-party tool in the works for Figma.

Figma赢得了胜利,因为协作是一个好的设计系统的核心. 公司员工来自多个学科(设计), development, quality, 内容)需要访问设计系统库, 许多人将添加到与共享库同步的设计组件文件中. Figma can be used by anyone, not just a license holder, 使访问和添加共享文件变得轻松.

Figma设计系统支持符号和库- Figma vs sketch

Task: Delivering to Development

当UI设计师完成界面的创建时, 他们有责任将设计文件交给开发人员,以便完成项目. But a handoff 是不是不止是一个简单的数据交换, 对于设计师来说,这是一个交流他们工作原理的机会,从而帮助开发人员将形式与功能结合起来.

有几十种切换方法,甚至更多的第三方工具,以方便从草图和Figma文件(见 Avocode and Zeplin). However, in this comparison, 我们会在添加插件或其他应用程序之前查看原始设计工具.

Interestingly, 用户体验设计系统的兴起减轻了对这种形式的切换的需求, 因为发布的组件库是开发人员的唯一真实来源. 他们可以提取组件的确切布局和设计信息,而无需等待交付或UX咨询.

Also, 在设计系统的构建过程中,从设计文件中的对象获取信息是很有帮助的, 所以CSS的一些视图是一件好事.

Sketch允许您选择对象并使用上下文菜单来“复制CSS属性”,但它并不理想. Figma通过在属性面板中提供一个“Code”选项卡来生成CSS,做得很好, iOS, 或选定对象的Android值(开发人员可以在仅视图或原型模式下使用此功能).

Winner: Axure

草图原型工具开发人员的交接——axure vs Sketch

At this time, 只有Axure有强大的“生成器”来生成完全可发布的HTML文件, Word Specifications, 甚至可以将CSV格式的报告导入电子表格. 虽然结果不是一个设计库,但该应用程序确实提供了有用的开发人员移交材料.

最佳整体设计工具:Figma

By the numbers, Figma是这次比较的赢家, 主要是因为它的协作性和跨平台可用性. 随着越来越多的团队使用需要在前端开发和设计之间更紧密集成的设计系统, Figma的实时协作和实时嵌入特性赋予了它很大的优势. On the downside, Figma是一个在线应用程序,出于安全原因可能会被禁止在企业中使用.

Axure位居第二,因为它的内置组件具有开箱即用的优势, 强大的交互原型功能, and document generation. 在更罕见的情况下,当公司需要访问真实的数据存储以查看特定功能的行为时, Axure is the best or only option.

Sketch may have come in last, 但是,一旦用户利用了该工具的许多插件和可用资源, 它非常强大,可以根据设计团队的需求进行定制. 这里的警告是,插件必须在每次Sketch更新后更新, and as a Mac-only application, 使用Windows电脑的公司不能使用它.

本文中介绍的这三个工具都非常强大. However, each has limitations. 这取决于个人设计师和团队来确定他们的工作流程, 权衡每个项目的利弊, 并根据自己的需求选择最佳的用户体验设计工具.

Understanding the basics

  • What is Axure used for?

    Axure是一个用于创建线框图和交互原型的用户体验设计工具. Axure移动原型对移动和桌面设计师都很有用, 它在企业公司中受到高度重视,因为它可以在原型中内置高水平的功能和视觉细节.

  • Axure是最好的原型工具吗?

    Axure是面向企业用户体验设计师和数字设计团队的领先原型工具之一. However, 像Sketch和Figma这样的Axure替代品也因其协作工具而广受欢迎, handoff features, and plugin support.

  • Why is ideation important?

    构思是用户体验设计过程的重要组成部分,因为它允许设计师自由快速地生成通常不会考虑的概念和解决方案. 这也是设计师在解决问题的过程中合作和结合他们的知识和过去经验的宝贵时间.

  • What is high-fidelity design?

    高保真设计交付成果是准备好展示并展示给客户的屏幕模型, internal executives, and other stakeholders. 擅长这一任务的设计工具拥有所有必要的功能,可以为最终面向用户的界面添加修饰.

  • What is a low-fidelity prototype?

    低保真原型是线框图或数字草图,可以由其他设计师和产品负责人查看. 根据用户体验过程,它们也可以由开发人员和涉众查看. 线框图是为了在制作高保真模型之前展示应用程序的基本结构.

聘请Toptal这方面的专家.
Hire Now
Ben Kopf

Ben Kopf

Verified Expert in Design

Canton, GA, United States

Member since March 19, 2018

About the author

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

PREVIOUSLY AT

ADP

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 privacy policy.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 privacy policy.

Toptal Designers

Join the Toptal® community.