来自优秀网页设计 ID：youshege
对于设计师的工具来说，Photoshop 算是一名老将了，它也是我们走上设计不归路的第一个敲门砖（当然还有 CDR）；被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来，一个是专攻用户界面的矢量设计，另一个则像是加强版的 PS 和 AI；Sketch 和 Affinity 还没用熟又冒出个 Figma：
说出来你可能不相信，Figma 是一款基于浏览器的用户界面设计工具。
基于浏览器是什么鬼？
就是你打开浏览器就能进行操作（当然要先打开 Figma 的官网并登录）。
那这玩意肯定不怎么样，估计连我电脑里自带的画板都比不上
先别急着下结论，Figma 的厉害之处就在于它的实！时！协！作！功能。不论何时何地、使用什么电脑系统，你都能和同事完！全！同！步！的进行操作！
而且它的历史记录功能也非常出彩，简单点几下就能快速找到之前编辑的版本！
哇，好赞！不过 PS 和 Sketch 我都还没用熟啊
Figma就像是浏览器中带有实时协作的Sketch。
讲真，虽然我上手的时间不是很长，但和在使用 Adobe XD 时的体验相比，Figma 简直赞爆了。它的亮点更多，功能更完整，除此之外它还有着让它非常出众的三个简直完美到哭的功能：实时协作（real-time collaboration）、矢量网络（vector networks）以及版本历史（version history）。它可以让多位设计师毫不费力地在同一个文档上同时进行操作。最关键的是，这家伙用起来真的是太顺畅了，在一个文档里20多个画板都能轻松应对！
作为同类工具的Sketch，两者之间的比较是在所难免的。今天就来看看它们俩有什么不同吧。
浏览器 VS 原生
一开始我不太相信 Figma 是一款基于浏览器的用户界面设计工具，上手之后我相信这会成为将来UI设计工具领域发展的一个趋势。一切都按照预期的那样进行，响应的非常迅速，简直就是除去符号（Symbols）、覆盖（Overrides）和插件（Plugins）功能的 Sketch。所有的文档和操作记录都存储在 Figma 的服务器中，不用再担心没保存之后文件丢失了。不过存储至本地也是支持的，可以将你的文档存储为.fig 格式来分享给你的同事。
Figma 的字体库默认使用的是 Google Fonts，你也可以通过安装插件来导入自己的字体。Figma 还集成了非常流行的图标字体库和CSS框架—Font Awesome，在我看来这是非常明智的一个举动，协作者再也不会打开文档发现字体缺失而去*载下**这个字体了。
实时协作
对于很多团队来说，Figma 简直就是一款神器。设计师能够和工程师或者客户实时进行设计工作能够极大的提高执行效率，同时还能降低沟通成本。虽然并不是所有项目都需要共同协作，但这个功能有总比没有好。
你可以先快速的制作好模板，然后邀请他人（不论登录与否）来一同编辑或只是查看你的设计进度。基于浏览器的工具有一个好处就是接收者不需要安装任何东西，也不需要一台 Mac 就能够参与进来，它能在 Mac、Windows、Linux以及移动设备（只能查看不能修改）上运行。任何人都可以审阅字体、颜色、尺寸、大小、距离等元素。开发者则能够检查规范并进行响应式布局。这会对团队的活力以及设计师与开发者之间真正的协作带来多大的改变我不敢妄下定论。
版本历史（Version History）
在 Figma 中历史记录变得更加直观，它能够让你在不同版本之间快速地进行对比。这比又慢又臃肿的 Sketch 自带的历史记录用着要更舒心。虽然它们都有自动保存和版本历史查看的功能，但是最后呈现的效果是完全不同的。
在 Sketch 中想要在不同版本中快速定位非常困难。设计师们往往会把这个功能关掉。因为这玩意实在是太吃硬盘容量了。
评*功论**能
在 Figma 中内置了评*功论**能。团队成员可以将评论“钉”在设计中，当有新的评论或者回复时会有相应的提醒。最终完成的时候点击“解决”（Resolve）就可以把这些评论隐藏掉了。
在 Sketch 中则需要通过插件来实现这一功能，或者使用同样基于浏览器的 Zeplin 来实现各个元素的标注。
另一个值得一提的 Sketch 插件是 InVision 的 Craft，它能够用真实的信息来帮助设计。你可以快速地从预设、网页或者是 API 中生成姓名和图片插入到页面中。
Sketch 配上 InVision 的 Craft 和 Zeplin 的话就能更方便的进行评论和原型设计了。
矢量网络（vector networks）
矢量网络是一个突破性的创新。不用点击锚点，直接选择线条部分就可以移动，所有相关连的点也都会自动地随之变化。当你用上它的时候你会发现它就是那么难以置信的直观。
虽然它现在还没有剪刀工具（Scissors Tool）和复制旋转（Rotate Copies）的功能，但我相信对于大多数矢量制作来说使用会非常方便。
从 Sketch 中导入
Figma 支持完全导入 Sketch 文件，每一个画板、群组和图层的名称、群组状态和属性原封不动的导入进来。从这个角度来说，把 Figma 作为 Sketch 的一个插件是个非常现实的想法。至于为什么目前不支持 PS 文件，可能是考虑到 Figma 和 Sketch 的兼容性比 PS 更高。
但奇怪的是，我没法直接复制粘贴 Sketch 中的矢量到 Figma 中，但是可以直接拖动导入 SVG 文件。
我甚至能从 Angle（一个 Sketch 插件）中导入矢量文件。虽然阴影和渐变看上去不是很好（有时候甚至会缺失），但整体形状是完整的。也就是说你可以从任何一个 Sketch 的 UI 套件上把文件导入到 Figma 中。
桌面应用
你可以*载下**桌面版本，但体验可是会大打折扣。在浏览器版本中快捷键不会发生冲突，比如 在 Mac 的浏览器中按 CMD+1~9 可以切换标签页，但是在桌面上则是切换文件。
布局约束（Constraints）
响应式布局是现在很多新工具必不可少的一个特性。设计师需要面对越来越多的设备分辨率，如果不能够通过改变画板的尺寸来调整的话那可就太麻烦了。
在 Figma 中，你可以通过固定边界或者是设定元素中心来实现布局约束。这有点类似于 Sketch 中的缩放时子元素固定在母元素角落（Pin to corner）和调整对象（Resize object），然而 Sketch 还支持根据父级元素的缩放，来等比例缩放图层所处父级图层的边距（Float in place），不过在 Figma 中要更加直观。
Float in place 好用吗？如果你想让各个元素之间的距离和大小保持一致的话那是绝对好用。
性能表现
在 Figma 中处理几十个画板是小菜一碟（不过你的散热风扇可能要狂转了）。那些抱怨 Sketch 太卡的朋友在 Figma 中或许会感觉好一些。由于是基于浏览器，Figma 的入门门槛非常低，低到只要有电脑或者手机就能使用。那些希望能有 Windows 版的 Sketch 在 Figma 上就可以找到答案了。
应用界面
从工具的命名、快捷键到画板、群组、导出选项，Figma 的应用界面几乎和 Sketch 一模一样。别误会我的意思，只对于使用者来说是件好事，这说明 Sketch 带了个好头，连 Adobe XD 和 Figma 都毫不犹豫的跟随。
Sketch 就像是设计工具界的“iPhone”，很多新工具都会模仿它的标准，然后加上一些新特性，过个几年它们就变得成熟，变得与众不同了。最终获利的会是我们使用者，因为在高标准的前提下我们有了更多的选择。换句话说，就像智能手机还坚持用实体键盘一样，做 UI 设计的时候我们没必要坚持使用 PS 了。这并不是看不起 Figma 和 Adobe。他们以一种清晰的方式巧妙的满足了设计师的需求，让他们尽可能流畅的完成过渡。说句公道话，许多标准都是来自 Mac 以及 Adobe 家的 AI 和 Fireworks（安息吧）。
该不该用？
在我看来答案是肯定的。你不需要再去学习一个新的工具，因为 Figma 就和 Sketch 一样。对于我而言，在这两者直接切换完全没有问题。
Figma 和 Sketch 其实是互补的，这意味着当你在 Mac 和 Windows、iOS 和 Android、家里和办公室的场景切换时它们可以满足你的不同需求。Figma 的实时协作、多平台支持（Windows、Mac、Linux）以及 Sketch 的成熟性、真正的原生体验、丰富的插件和资源是我选择它们的理由。从功能的角度来看，我觉得它们最终都会赶上对方（实时协作、矢量网络、评*功论**能与符号、覆盖、插件）。
这么厉害的工具是不是很想体验下。关注微信：零设计（designil）回复Figma 获取体验地址。