前几天问一个做了7年UI设计的朋友

“你用sketch吗？”“不用”

“你用XD吗？”“不用”

“你用figma吗？”“不用”

“你用invision Studio吗”“啥？”

“挺好的软件，为什么不用用呢”“我用PS，PS最好了！”

“MMP......”

我们今天所处的环境，互联网飞速发展，新的意识形态不断涌现，工作方式不断发生变化，开放、共享等理念被更多的行业更多的人理解，在这样的环境中效率显得越来越重要。好的工具和工作方式带来的是先进的生产力，比如Figma的异军突起改变了设计师传统的工作方式也正在改变着我们的工作理念，作为互联网设计师我们应该是互联网中的前卫者。

接下来我们看一下UI设计软件的现状和发展，不管有没有去使用它们，但设计师应该认识到我们所处的环境。

大约在90年代以前，我们可以给它起个名称，叫做“软件1.0时代”。“软件1.0时代”软件在自己的专业领域不断的改进，比如Illustrator1.0、Photoshop1.0 ，word1.0、金山的wps1.0 等，此时的软件最求的是功能的完善，系统的稳定等。

来到2000年左右，我们可以称作“软件2.0时代”。“软件2.0时代”开始最求便捷高效的工作方式，多软件协作，比如2002年Adobe的创意套装Adobe Creative Suite，包括了今天大多数的Adobe软件。

1999年的WPS已经集成了电子表格和多媒体演示，2001年更名为WPS Office。

Microsoft office更早一些，在90年代就完成了从单一软件到套装的转变。

2010年前后我们可以称作“软件3.0时代”。随着技术的发展和普及，这个时代的软件开始加入“云”的理念，云端存储，云端共享，比如2013年Adobe的创意云Adobe Creative Cloud也就是我们熟知的CC系列，一个账号就可以在任意电脑上使用自己的资源。

金山2012年推出WPS云文档，2016年发布WPS+云协作，2018年多人实时在线协作的金山文档上线（金山软件的发展很好的体现了软件的发展趋势）。

2013年至今，我们可以称作“后软件时代”或者“软件4.0时代”，当然这只是主观的一个叫法，时间节点也未必科学。

2013年

·订阅号从无到有，成为内容创业抢夺的蓝海到市场逐渐饱和；

·为发烧而生的小米销量开始被华为、OPPO、VIVO三家合力围剿；

·Papi酱依靠短视频吐槽拍出2200万元“天价”广告位后被逻辑思维撤资；

·滴滴与快的、优步之间的烧钱大战打的分外眼红最后也喜结连理；

·ofo和摩拜平地一声惊雷引发了出行领域的又一轮烧钱大战；

·4G拍照正式发放；

......

这些和软件并没有太大关系，有些扯远了，跟软件相关的是，2013年ProcessOn在线做图工具的上线（国外同类型的产品出现的更早），ProcessOn是一款在线做图工具，主要用来绘制流程图，思维导图等，团队成员可以实时协作。更重要的是ProcessOn一个web应用，一个浏览器，一个窗口，全部搞定。ProcessOn在0销售成本下用户突破100万。这在一定程度上折射出软件的发展趋势：云端化、去平台化、共享化，传统的软件必将逐步被云应用所替代。

此后，国内的墨刀和摹客2014年上线，国外的Figma 2015年上线，Adobe XD 2016年上线，2017年的国内的xiaopiu上线，2020年9月xiaopiu推出“即时设计”，新版本的墨刀也加入了实时协作功能。看到国内的设计软件越来越优秀，非常的高兴和期待！2020年突如其来的变化，让无数人居家办公，团队协作，远程办公等工具和理念被更多的人注意到......

我们可以看到软件的发展大致是这样的线路：

接下来我们看一下“后软件时代”的UI设计软件，今天要说的是目前主流的UI设计软件——Sketch、Figma、Adobe XD、Invision Studio

首先说明一下


1、上面提到的墨刀和摹客也是非常非常优秀的设计软件，功能也非常的完善，甚至一些功能比这些软件的体验还要好，墨刀摹客也是很好的选择。不过我们更习惯把墨刀和摹客看做原型设计工具，所以不在讨论范围。


2、还有一些很好的软件比如Framer、Affinity Designer，也非常优秀，但本人没有深入体验过加之国内使用者较少，所以不在讨论范围。


3、大部分同学依然使用的是PS，但PS算不上正经的UI设计工具(*^▽^*)，虽然它很强大，所以也不在讨论范围。


4、Sketch由于我们的使用环境所限，更像是一个传统软件，但它也为了保持竞争力不断地更新迭代，也可以通过各种插件实现团队特有的工作流。


5、Invision Studio是Invision众多产品中的一个，Invision包括Invision Cloud、Invision Studio、Invision DSM

“后软件时代”的UI设计软件具有共同的特点就是一站式设计——从线框、原型、设计、动效、讨论到协作一站式完成。

首先我们看一下这几个软件的基本信息：

能够发现这四款软件的定位包括功能基本是一致的。

1、基础功能

首先说一下基础功能，所谓的基础功能就是本地化设计常用的，图形绘制、路径编辑、布尔运算、文本设置、图层样式、蒙版、模糊、页面设置、栅格等，这些功能和基本的操作Sketch、Figma、Adobe XD、Invision Studio的差别不大，甚至很像，相对比较简单，如果熟悉其中的一个其他的很容易上手，这里就不多做介绍。

2、组件系统

组件系统，概况来说组件系统就是方便设计师对组件、样式、颜色、文本样式复用，可以统一修改。

最近几年组件化设计思维越来越被重视，各大厂都有自己的组件系统，它是一种高效的工作方法及思维模式。关于组件化设计思维在这里就不再赘述，有兴趣的同学可以看一下站酷的这几篇文章 点击标题查看

《组件化设计思维》

《组件化设计思维 – 从规范到工具的构建与探索》

《【滴滴平台体验设计研究】设计的“整理术” —滴滴表单项目的组件化设计思维沉淀》

它们的组件系统各有千秋，比如

· Sketch、Figma、Invision Studio切换组件时可以下拉选择切换，XD的切换是直接拖动组件到原来组件上替换，可以用斜杠 / 命名对组件进行分组；

· Figma、XD的组件可以有多种状态，并且可以直接识别到sketch文件的组件；

· Sketch、Invision Studio把组件归类到一个单独的页面空间；

· Figma、XD的组件更灵活；

当然我们习惯一种就好，关键的是运用到实际工作中！

Adobe XD ↑

Figma ↑

Invision Studio ↑

Sketch ↑

Sketch ↑

3、团队组件库

说到组件库就不得不说团队组件库，组件可以使设计师管理单个文件的设计资源，而团队组件库可以使我们整个团队使用同一套规范，一个组件有所改动，所有用到这个组件的文件都会自动修改，这对于团队协作是至关重要的。

Sketch的团队组件库

可以使用自带的Sketch Libraries，也可以使用苹果的iCloud ，蓝湖为Sketch量身打造的“设计规范云”使用体验也是超级棒！

Figma的团队组件库

Figma的团队协作本身就是大家共同编辑同一个文件，免费用户只能在一个文件里面使用组件，团队项目可夸设计稿使用，但需要是付费的专业版。

XD的团队组件库

把设计文件共享给团队成员，团队成员即可使用文件中的组件，并且可以共同编辑。

我也会在我的教程 →《Adobe XD进阶使用教程》← 中讲到

Invision Studio的团队组件库

Invision Studio暂时没有团队组件库，但它可以导入其他文件的组件，我们可以通过文件传送的方式间接实现组件的共享。

Invision Studio ↑

Adobe XD ↑

Sketch ↑

4、智能布局

智能布局是“后现代设计软件”的重要功能之一，它可以帮我们快速实现响应式布局。

虽然它们的叫法不一样，但功能基本一致。

· Sketch叫Smart Layout “聪明布局”；（这翻译好别扭o(*￣︶￣*)o）

· Figma叫Auto Layout“智能布局”；

· Adobe XD叫Content-Aware Layout“内容感知布局”；

· Invision Studio叫Responsive Layouts“响应式布局”；

其中Figma的Auto Layout可以实现更为复杂的效果，同时嵌套逻辑也更复杂。Invision Studio的Responsive Layouts的功能稍弱，只能实现一些简单的自适应效果。Invision Studio响应式布局的核心是使用百分比的单位。

Invision Studio ↑

Sketch ↑

Figma ↑

Sketch ↑

5、数据填充

数据填充是我们做设计的时候经常遇到的问题，就是填充一些头像、图片、文字等模拟的数据，它可以使我们的设计效果看起来更真实，代入感更强。数据填充可以分为两大类型：

一是随机的数据

随机数据内容不可控，它们都有这样的插件，其中sketch自带这个功能。

二是自定义数据

定义自己想要的文字和图片。比如同时支持Figma、Adobe XD的Google Sheets插件。

· Sketch可以自定义本地的图片和文本或者使用插件如Kitchen等；

· Figma可以通过Google Sheets插件实现自定义数据，或者用其他插件进行随机数据；

· Adobe XD可以直接拖动本地的图片和文本进行填充，或者使用其他插件；

· Invision Studio可以通过“Data”插件实现随机数据或定义本地数据。

Adobe XD ↑

Sketch ↑

Figma ↑

6、原型

原型功能是一站式设计的不可或缺的功能。这一点Figma、Adobe XD、Invision Studio的体验是比较一致的。

· 可以实现不同的交互方式如点击、滑动、长按等等；

· 可以实现不同的交互效果如缓入、缓出、线性等等；

· 可以以连接的形式分享给他人；

· 可以在手机上预览并实际的操作；

Sketch只能实现简单的跳转和过渡，当然Sketch可以借助它的最佳拍档Principle完成复杂的交互动效。

Figma、Adobe XD可以实现带有过渡效果的动效，也就是补间动画。因此可以完成更真实的交互效果。

Invision Studio的原型功能最完善，因为本身Invision Studio就是同时借鉴了Sketch设计部分和principle动效部分，可以调整动效的关键帧以及动画曲线。所以Invision Studio可以实现更复杂的交互效果。但Invision Studio的弹性效果不能像Principle那样自定义张力和摩擦力，也就是弹性幅度。

Invision Studio ↑

Invision Studio ↑

Figma ↑

Invision Studio ↑

Invision Studio ↑

7、实时协作

实时协作是团队协作的重要体现。实时协作概况来说就是多人实时编辑同一个文件，就像打LOL一样。它给我们带来的不仅是工作流程的改版，也是逐步改变了我们的思考方式和工作方式。

这也是很多软件的发展趋势，如各种协作文档，前面提到的ProcessOn，以及最新版本的墨刀也增加了实时协作功能。相信实时协作将在不久的时间里大放异彩！

在实时协作方面Figma无疑是在这四个软件里面出现最早的，Figma也是非常的稳定。

Adobe XD紧随其后，并且Adobe的实时协作体验也非常的不错，不过免费用户只能两个用户编辑。

Sketch也增加了实时协作，目前还在测试阶段。

Invision Studio的实时协作不是共同编辑设计稿，而是在设计稿上实时进行涂鸦式的讨论。

Adobe XD ↑

Figma ↑

Figma ↑

Invision Studio ↑

8、工作交接

工作交接可以分为三个方面

一是设计分享，他人或者团队成员可以通过链接看到你的设计稿。

二是设计讨论，就像蓝湖、Zeplin一样，进行打点的评论，@团队成员，回复等。

三是交付前端，就像蓝湖、Zeplin一样，查看代码信息下载切图。

Figma、Adobe XD、Invision Studio在工作交接上的体验是一致的，Invision Studio的设计讨论更加灵活，可以进行多人实时讨论。

Sketch也增加了这样的功能，但由于我们的使用环境等问题，我们一般还是习惯借助蓝湖等第三方软件实现这样的工作交接。蓝湖也支持Adobe XD。

Figma ↑

Invision Studio ↑

Figma ↑

Invision Studio ↑

Figma ↑

Sketch ↑

9、插件

插件极大丰富了软件的功能和软件之间的协作。所以他们都很鼓励更多的人开发插件。

说到插件，不得不提到Sketch，由于Sketch用户基础广，所以它有非常完善的插件生态，也吸引了很多开发者创作插件。

Figma、Adobe XD、Invision Studio虽然起步相对较晚，但他们的插件数量也在快速的增加。

Sketch里非常优秀的craft插件，就是Invision团队开发的。

Sketch ↑

Figma ↑

Adobe XD ↑

Invision Studio ↑

10、资源

这里说的资源包括：设计文件、作品、第三方控件、教程等。

Sketch的资源是最丰富的，因为它出现较早，经过了多年的发展，互联网上已经有非常多的关于sketch的资源。但大多集中在第三方网站，sketch官方资源较少。

说到资源，不得不提到Figma社区，Figma的社区集中了绝大部分的资源，包括作品、控件、插件等等，加上Figma本身云端的特性，使用起来非常的方便，比如插件，点一下安装按钮即可。

Adobe XD也有自己的社区，当然这个社区不仅是是XD的，包含了Adobe的很多软件，打开Creative Cloud 在Discover一栏就能看到相关的内容。

Invision Studio由于国内使用者相对较少，所以资源也相对较少，特别是中文资源，Invision Studio的资源可以直接去它的官网查找。Invision Studio自带的Studio App Store还处于bate版本，不过已经收集了几十套的文件资源和插件。

Sketch ↑

Figma ↑

Adobe XD ↑

Invision Studio ↑

如果分别用一句话总结他们的核心特点，那就是：

· Sketch群众基础强大，“功能不够，插件来凑”，Mac独宠

· Figma云端软件，协作无敌

· Adobe XD 大厂软件，多软件协作便捷

· Invision Studio设计与动效融为一体

Sketch是最早在UI设计师中流行的一款软件，但被只能在mac电脑上使用，这就把很多人拒之门外。Sketch受到后起之秀Figma、Adobe XD很大的冲击，但也促使sketch更好的发展，比如也开始加入实时协作。但不能否认Sketch目前仍在UI设计工具中占据首位。

由于Sketch需要付费使用，加之我们的使用环境，它自带的很多功能我们并用不上或者不好用，我们可以借助插件完成。Sketch的插件系统十分强大，很多工具都有为sketch开发插件，像蓝湖设计规范云、墨刀、摹客等等。

关于Sketch的教程网上非常多，可以在B站上搜索sketch，会有非常多优秀的教程。比如

像素范https://space.bilibili.com/15741969/

新像素 https://space.bilibili.com/389903587/

优设基础训练营https://space.bilibili.com/39990344

Figma是“后软件时代”的典型代表。云端、社区、协作等特点使他能够在短时间内被行业追捧。不管你认不认同这种趋势，它就在那。

但就我们国内的使用环境，还存在一些不好的体验：

一是被很多人诟病的依赖网络问题，就算有网也可能加载较慢，可能还需要更科学的上网方式。这一点体验确实不好，不过并不影响它的正常使用。但作为UI设计师难道不应该经常去看一些设计网站吗，科学的上网方式不应该是我们UI设计师的一项基本技能吗？

二是前端交付问题，它不支持蓝湖，或者说蓝湖不支持Figma，我们国内很团队都在使用蓝湖，这一点使得它的迁移成本较高。

Figma比较出名的是它的实时协作，多个人同时编辑一个文件，这种体验真的很棒。

关于figma的教程，我自己精心录制了一套完整的figma教程，从基础操作，到高级使用技巧，再到交互动效制作，是一套非常系统的课程，墙裂推荐哦~《figma教程》点击查看

Adobe XD的路径编辑很弱，连轮廓化描边都需要借助插件，询问Adobe官方，回答是后续可能会增加这样的功能，目前让从AI导入，或者使用Astui插件，好吧，毕竟是大佬，你说的算。

· Adobe XD的实时协作需要软件版本一致。

· Adobe XD的重复网格+自定义数据填充很方便。

· Adobe XD还有一个显著的特点就是属于Adobe系列，多软件协作特别方便，比如直接在ps里面编辑位图，直接导入AI文件，直接导出到AE去做交互动效。

· Adobe XD的组件和共享用不了，这个问题很好解决，在我的教程里会讲到。

关于Adobe XD的教程，网上也有很多的优秀资源，比如牛MO王老师的XD教程→。但这些教程并没有详细讲到团队组件、协作等。所以我自己做了一些教程《Adobe XD进阶使用教程》，还在陆续更新，欢迎大家学习 传送门→

· Invision Studio最大的特点就是直接做动效，就像是sketch+principle的合体。

· Invision响应式布局的核心是用百分比的单位；

· 目前没有多人实时编辑，但有多人实时讨论；

Invision Studio是Invision众多产品中的一个，Invision包括Invision Cloud、Invision Studio、Invision DSM。

其中的Invision DSM的服务对象是Sketch，简要来说就像是蓝湖为Sketch做的设计规范云。或者应该说设计规范云像Invision DSM；Invision Cloud还包括了Craft插件，Craft是使用在ps和sketch上的插件。

关于Invision Studio的教程，网上资源相对较少，如果你使用过前三个软件，那么只需要熟悉和习惯一下操作就完全可以上手。也可以去它的官网，有详细的使用方法和视频。

只要不是用ps就是进步

1、根据团队使用情况选择

2、如果是萌新用户建议选择Figma或Adobe XD

3、如果网络不允许可以选择Adobe XD或Sketch

4、如果想探索更多的不同可以选择Invision Studio

5、至少可以选择Adobe XD+蓝湖

他们都存在体验不好的地方，但他们都在快速的更新，这也很好的体现了快速迭代的产品思维。

上面提到的软件功能大部分经过亲自测试，难免有错误和不足欢迎大家指正！

就在我写这篇文章的同时，Adobe在10月20日召开了一年一度的Adobe MAX大会，大会的主要内容是：新应用，新功能以及更快，更轻松的协作方式。有兴趣的同学可以看一下这个60秒的短片 点击查看

也是在10月20日Adobe XD发布了34版本，这个版本的新增功能有：3D变换、组件嵌套、用于团队协作的Creative Cloud库、增强智能布局、共同编辑从bate版变为正式版、更多的插件。

3D变换除了做一些带透视的设计，还可以结合Adobe XD的自动动画做出来更多的效果，以下是我的一些简单的尝试，期待大家创作更多脑洞大开的效果。

组件的嵌套可以使Adobe XD像Sketch和Figma一样实现更复杂的效果。

最令人欣喜的是它智能布局增加了自动高度文本，这使得Adobe XD的智能布局更趋近Figma，配合组件嵌套给我们提供了更多的创作空间。

Sketch在10月份也更新了69版本，增加了助手、字体嵌入、组件管理等功能。

Figma最近也更新了很多功能，如优化了组件调用、增强原型等，并预计在11月份更新Auto Layout功能。

参考资料

wps的发展历程

Office办公软件发展简史

您不知道的Microsoft Word历史版本

Adobe公司的发展史

Adobe维基百科

ProcessOn

成了国民应用的在线文档，2020年走向何方？