一个好的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

• - Twitter

• - Dribbble

• - Slack

• - Dropbox

• - GitHub

InVision:

• - HubSpot

• - LinkedIn

• - 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，不会是一件容易的事，也并非每个公司都愿意花时间和精力去形成新的使用习惯。 工具的切换需要大量的学习，在此上所花的时间有的时候可以持续数月之久。

Powered by Froala Editor