1.第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。
2.第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。
3.当前阶段各种新兴设计工具如XD、Figma、FramerWeb逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。
界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。
注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具（如Figma、FramerWeb）试图将产品、设计、开发、测试融为一个整体，让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生，扫除各工种之间的协作障碍。
今年9月Figma举办的第二届ConfigEurope大会，其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性，设计工具不仅可以帮助设计师输出设计稿本身，而且致力于打破设计与代码之间的壁垒，降低交接成本。让设计实现变得更加轻松高效。
Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示，Figma的使用率从12%增长至26%，在今年的ConfigEurope大会上Figma也预告了一些即将推出的功能迭代，其便捷高效的特性使其受到众多设计师的追捧，正在逐步抢占sketch的用户市场。
Figma与Sketch相比，亮点功能有哪些？
（1）Windows用户也可随心使用
与sketch只支持苹果生态系统相比，Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用，理论上只要你能打开浏览器，就可以使用Figma愉快地设计。
（2）云端文件使用不卡顿，支持离线编辑
Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题，Figma也给出了相应的解决方案。其支持离线编辑，离线时会自动把内容保存在本地，当网络恢复后自动同步到云端。
（3）一键导入sketch文件
Figma可导入Sketch文件，大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。
（4）更强大的组件功能
Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。
同时Figma也在不断优化其组件功能，在ConfigEurope大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。
如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。
（5）与代码紧密结合
在使用sketch输出设计稿时，设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合，本身自带交付功能。其文件中的每个模块都有代码模式，只需要将开发同学的账号开通查看权限并发送链接，就可以直接在设计文件上获取标注，也可自行导出所需的CSS、ios、Android样式。
（6）一键恢复历史版本
Figma会将设计师的每一次修改存成对应的历史版本，当老板说想要某一版时，设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件，也有机会一键抢救。
（7）团队协作
小结
FramerWeb是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framerclassic、FramerX,FramerWeb突破了其以代码为操作核心的理念，上线的新版本对设计师来说更加易用友好。
FramerWeb的核心亮点是什么？
（1）网页端全平台可用
相比于Framerclassic和FramerX作为本地客户端软件只支持Mac电脑，FramerWeb是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。
（2）文件导入
FramerWeb可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。
（3）轻松实现复杂动效
Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效，但对于设计师们来讲十分不友好，学习成本过高。此次发布的FramerWeb为了解决这一问题，增加了适合设计师使用的可视化界面控制动效，设计师可以通过MagicMotion轻松实现复杂动效。
MagicMotion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在MagicMotion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。
同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video，本身会有一些独特的交互行为如End、Pause、Play（播放、停止、暂停），当进行这些操作时，会触发相应的页面变化。
（4）从设计到代码
（5）高效协作
FramerWeb放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此FramerWeb非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来FramerWeb还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。
虽然云端化的设计工具正逐渐兴起，但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外，也会介绍一些好用的sketch插件，大家可以根据自己的需求自行尝试体验。
设计师在做较大项目时导出的设计稿过大，存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件，导出多个图片时还会自动生成一个zip压缩包。
这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时，会遇到如图所示的：“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后，该组中所有组件的名称都会随之改变，十分方便。
Figma本身自带交付功能，但该插件的好处是生成的是离线文件，导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。
设计师在导出设计稿时有时图片过大，ImageOptim可以在导出图片时压缩图片，但不会影响图片的质量。使用时需先安装app再安装Sketch插件。
3.6FontFinder（Sketch）
设计师在做较大项目时可能会绘制几十个页面，难免会存在字体使用错误的情况，FontFInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体，你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改，大大提升了工作效率。
Sketch自带的对齐工具对形状来说很好用，但对于文字来讲一般是文字的文本框对齐，并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐，这样就以保证不同大小的文字都可以对齐，设计效果更完美。
对于设计师
（1）可视化上传文件
设计师先在Sketch中安装XSHOW插件，可使用快捷键或直接点选需要上传的文件画板，接着直接选择XSHOW中的“导出”，就可直观快速的将文件上传到XSHOW。
（2）记录所有版本迭代，轻松找回第一稿
对于项目管理者
（1）直观了解团队输出,组建团队展示能力空间
XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况，同时可以组件团队展示能力空间。
（2）方案变更及时知道
XSHOW有记录所有版本迭代的能力，因此作为项目管理者可以及时知道团队成员对方案的修改变更，解决了团队内部有时同步不及时的问题。
（3）便捷组建项目和管理团队成员
项目管理者可以在XSHOW便捷组建项目和管理团队成员，大大提高了项目管理者的管理效率。
对于合作产品经理或甲方
（1）多端查看更方便
XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果，如果合作方身边没有电脑也可以及时查看稿件。
2.查看历史变更
XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况，大大提升了信息同步效率。
对于开发工程师
（1）便捷查看标注与管理切片
在未来界面设计工具会继续向云端性、协作性、通用性发展。大家可以根据自身情况尝试使用Figma、FramerWeb等新兴工具来提高设计与协作效率，形成良性的协作体系，使自己更专注于设计本身，创造更大的设计价值。