一个好的UI设计工具应该可以满足快速创建设计，无需在多个平台之间切换等特点。现在市面上的这类型的软件越来越多，但是功能上能够形成真正竞争关系的其实不算多。今天我们来看一看两个业内认知度比较高的工具：Figma 和 InVision，看看他们的比较结果会如何。
通过本文你会了解到：
- 什么是UI（界面）设计工具
- Figma 和InVision的相近之处
- Figma 和InVision中哪一个更适合你
- 大家熟知的大厂都在用哪些工具
- 一些可以帮助你做决定的实用信息
什么是UI设计工具？
UI设计工具供设计师来完成线框，原型，界面，交互设计。通常设计师会用UI工具来完成以下的工作：
- 构建UI导航模式，比如用户流（可视接触点）
- 交付设计给开发，促进与开发人员的协作
- 确定交互的视觉效果（原型）
- 与其他设计师在线上合作，收集反馈并优化设计
UI设计工具市场（包括功能齐全的平台，也包括注重于某块特定功能的工具）已经相当饱和了。 一些比较流行的UI设计应用程序包括：
Sketch
Adobe XD
Mockplus
InVision (InVision Studio)
Figma
这些工具里，我们关注最后两个：Figma和InVision（InVision Studio）。 原型能力上，InVision的功能只有Figma功能的一小部分。InVision加上InVision Studio作为一体，才算一个完整的产品。
Figma和InVision：相同之处
我们来看一看两种工具的共同点：
- 支持组件嵌套
- 整体的界面和视觉结构
- 支持常用开发语言的代码段生成
- 能够设置响应式布局
- 支持静态UI屏幕设计
- 都有免费版
- 支持三方工具的对接
推出后的市场接受度
Figma在2016年正式上线，InVision早在2011年就进入市场（InVision Studio在2018年上线）。 根据2800位设计师的2018年设计工具调查显示，界面设计上，Figma的使用频率高于InVision。
最受欢迎的UI设计工具。 资料来源：UXtools
但是，在原型工具的使用上，InVision的使用数量几乎是Figma的两倍：
最受欢迎的原型制作工具。 资料来源：UXtools
平台工具和生态系统
InVision Studio的推出很大程度上补充了它之前的不足。推出之后，设计师可以在同一个产品内做设计和原型，让InVision达到了对设计师的需求整体满足的状态。
不过，InVision的生态本来也比较全面，它既有专注于某一板块的功能工具，也有很多与第三方的对接。
Figma没有把产品线拆得这么细，功能都在一处提供。InVision的大部分功能，在Figma中都可以通过Web的应用程序得到。
因此，使用InVision就要从其他平台包括自身工具导入/导出文件。InVision Studio是一个桌面端产品，支持macOS和Windows，但是无法基于浏览器使用。 Figma里的工作流程更简化，更顺畅。Figma也有Windows和macOS的桌面端应用程序，但是同时支持浏览器运行，所以并不挑平台。
动画制作
在Figma中，制作动画只能通过Principle插件。 需要注意的是Principle只支持macOS。
InVision Studio有相当不错的时间轴动画功能。这一点上，与UXpin一起在UI设计工具领域中名列前茅。
视频地址：https://asperbrothers.com/wp-content/uploads/2019/09/figma.mp4
InVision Studio中的时间轴动画编辑器。 资料来源：InVision
协作
Figma有类似于Google Docs的实时协作功能。 Figma中，支持对不同项目设置细化访问权限，有编辑权限的团队可以随时随地实时在线编辑设计稿。 严格的权限设计确保了任何未经授权的人无法以任何方式更改项目。
Figma支持设计中的实时评论
InVision里有注释功能，但没有Figma的多人协作功能。 并且，在InVision Studio中完成的设计稿必须上传到InVision线上版才能使用到协作和反馈等功能。
Figma工具栏能显示在同一设计稿上的编辑者。
历史版本
Figma的表现类似于Google Docs-有自动生成的历史记录。可以查看，也可以选择返回到以前的状态继续编辑。
InVision没有这个功能。
组件
Figma的组件库，每个组件都有缩略图。 并且，在右侧的图层面板中就可以设置组件覆盖，使用很方便。 Figma还允许自定义许多图层变量，比如颜色，字体，文本对齐方式，不透明度等。
视频地址：https://asperbrothers.com/wp-content/uploads/2019/09/ezgif.com-gif-to-mp4-2-1.mp4
Figma组件覆盖。 资料来源：Figma
在InVision Studio中，组件没有略缩图，必须按列表的视图来浏览组件名称。 组件覆盖的功能与Figma的非常相似，但是InVision Studio中的图层属性可自定义板块性没有Figma提供的多。
性能
尽管InVision线上版本在性能方面与Figma相当，但InVision Studio仍存在一些细微却能被察觉到的问题。 当原型文件比较大的时候，会感觉到断断续续，软件响应时间变慢。 InVision社区中，就有用户就提出过这个问题。
Figma过去的性能也常常出问题， 但是，经过一些更新之后这个工具变得非常的稳定。即使在多人同时处理同一文件的情况下，也可以平滑地呈现。
团队规模和项目
因为Figma支持多人实时编辑，加上性能稳定，对于大型团队或者项目中的快速原型制作和快速迭代而言，它是一个不错的选择。 在企业环境中，Figma提供的开放式协作和简化的工作流程确实可以提高效率。
Figma支持同一团队中，不同成员各有不同的权限。
但是，这也并不是说InVision仅适用于小型团队。 恰恰相反，许多国际知名品牌在设计过程中都使用了InVision。
使用Figma和InVision的大厂
Figma：
- - Microsoft
- - Dribbble
- - Slack
- - Dropbox
- - GitHub
InVision:
- - HubSpot
- - Sony
- - Visa
- - GoDaddy
- - Atlassian
SVG导入
InVision Studio导入SVG文件一直都存在少许的问题。 他们的官网上有更多的信息。 虽然这不算是个大的缺陷，但对于在项目中需要大量使用SVG文件的团队来说，这是一个需要认真考虑的点。
到目前为止，在Figma中还没有出现过这样的问题。
Figma与Invision的定价
Figma：
Invision：
最后——Figma还是InVision？ 取决于你对不同工作流程偏好
Figma和InVision之间最大的区别似乎在于协作的风格。 Figma在设计UI方面有实时协作体验，而InVision则偏向于有些孤立的设计工作流程，但也支持收发反馈，进行更改。
UI设计工具的选择本质上可以回归到项目，工作方式的特点，以及特定工具中设计师的偏重。 对于许多团队来说，从一个由Sketch InVision（或者其他互补工具组）过渡到Figma，不会是一件容易的事，也并非每个公司都愿意花时间和精力去形成新的使用习惯。 工具的切换需要大量的学习，在此上所花的时间有的时候可以持续数月之久。
