Figma 比 Sketch 好在哪？开始嫌弃 Sketch
从 PS 过度到 Sketch 做 UI，那种生产力简直降维打击 PS；可现在，夸张些来说，Sketch 要被 Figma 降维打击了。
2019年07月22日 重制更新：优化排版，新增一些 Figma 资源&视频&干货，都在文章末尾。🤤
先感受一下《一群设计师一起在线打副本》是什么感觉（Figma 多人在线协作）：
起初
从 PS 过度到 Sketch 做 UI，让我有一种从原始社会过度到现代社会，那种生产力提升的体验简直就是降维打击；
可现在，Sketch 要被 Figma 降维打击了，这里具体指的是 Figma 的组件逻辑和 Sketch 的 Symbols 逻辑不一样，而 Sketch 也不可能在以后改成 Figma 这种，因为成本巨大。
最早群里有的小伙伴吹嘘 Figma 如何如何好用，我是嗤之以鼻的，我第一个问题就是，Sketch 的数据智能填充，边距自适应功能有吗？并没有；
可数据智能填充是我非常依赖的功能，在公司中做效果图，特别是给领导看时，是特别需要“真实的假数据”（就是数据可以是假的，但至少行业信息是一致的，比如医疗行业的项目就不能用搏击的图），这种东西领导们是不懂的，你让他们看的是布局、是视觉，可他们上来就会问这个图片什么意思、这个标题名字写的不对啊（o(╯□╰)o）。
逐一盘之
Figma VS Sketch
___
网上能搜到好多 Figma 特性的介绍，比如什么多人无延迟协作、什么矢量图层，这些我在这里就不讲了，我将从我真实的项目使用中的角度去讲，是什么原因让我不想再用 Sketch 了。
____
▍Frame 概念
Frame 可以理解为画板，字面意思是框架；这在 Sketch 里从来没有的概念，而且和 Sketch 的画板也不是一个东西，在现在新兴的设计软件：Framer X、Figma 中是都有 Frame 概念的；
• 这个 Frame 是可以被嵌套的：
• Frame 套 Frame
• Frame 变成组件（Component）
• 元素拖入 Frame 里时，图层关系会被自动归属于 Frame 下，你可以理解为 自动编组，但比这个强大的多
那么这个东西在实际工作中带来的体验是非常好的，不然为什么新软件 Frame X、Figma 都不约而同的使用这个概念呢？
自动编组的特性：
在正确理解 Frame 概念之后，他的自动编组也会迫使你对自己的图层逻辑保持清晰，本来做 UI 就需要对开发的逻辑、对自己图层的逻辑有清晰结构，所以在设计过程中应该保持自己的图层结构清晰，这时搭配 Frame 真的是美滋滋（话说图层结构清晰也是 UI 设计师的自我修养不是么？）
约束对齐布局：
Sketch 中都有一个左对齐右对齐的布局设置，Figma 当然也有，但这个功能只能在 Frame 框架内使用，也就是说如果 2 个形状编组之后是不能设置布局；这一点其实挺好的，又一次督促你使用 Frame 来理清你的图层逻辑，仔细想想，图层和框架本来就是 2 个概念。
基于以上 2 点，善于用 Frame 的概念去做 UI，有一种让我神清气爽的感觉你说怪不怪？认真想一些，其实在 Sketch 里的图层是随便怼的，乱糟糟，图层、编组之间的感觉一种非常混沌的感觉，而 Figma 就是清晰准确的感觉。（注意：这不是玄幻小说）
____
▍Figma Component VS Sketch Symbols
Figma 的组件简直是吊打 Sketch，以至于因为这一个特性就足以让我从 Sketch 跳到 Figma 的怀抱；这并不夸张，因为我是个设计规范、组件库的重度依赖着，每个项目开始之前我都会建立一套基础组件库、或者把之前的拿来用，以保证我的设计可以复用；开始慢后面快，这是我一惯的套路。
克制带来灵活自由的组件变化：
简单点说就是 Figma 的组件定义的属性很少，不像 Sketch 囊括那么多。比如形状的字体，Fgima 只会包含赢文字大小、文字粗细，没了。而 Sketch 则包括文字颜色、大小、粗细、左中右对齐；
我们来仔细想想，Sketch 限制那么多并不是好事，反而让我们为了不必要的一些改动去建立一堆组件；Figma 则把更多的调试空间留给用户去自定义，比如文字样式我只需要建立大小不同的即可，而 Sketch 却要建立左对齐、右对齐、居中 3 列文字样式，太扯了。总之 Figma 的样式、组件很灵活，颜色是颜色，文字是文字、阴影是阴影
组件自定义更自由：
允许对组件内的元素修改除了位置以为的任何属性，这个逻辑确是吊炸天的操作。这里要知道，Sketch 是不允许你对组件里的东西随意修改的，想改可以，去 Symbols 里面对想修改的元素再单独建立一套 Symbols，不好理解没关系，看图说话：
看到差距了吗？Sketch 如果想对组件内的文字调样式，必须先把文字也变成 Symbols，而 Figma 除了位置想怎么改就怎么改。千万别小看这个逻辑，对于我这种组件狂魔来说，恰恰是这个小细节让我宁愿不用数据填充不用自适应布局插件也要用 Figma，干得漂亮！
____
▍布局
Figma 的布局是比 Sketch 更高级、更好用的：
• 除了基本的上下左右
• Figma 还有 Center 居中对齐
• Figma 还有 Scale 比例缩放
总体上比 Sketch 好用多了，这里必须多说一下细节：
说到这里的布局功能，结合上面的组件和 Frame，基本上整套 UI 项目就可以全都用组件去做了，如果够细心，每个组件都设置好布局对齐，那简直不要太爽；其实说到这里可能还不够详细，我们来想想 Sketch 按理说也可以做到这样，但可以做到和好用是两回事，就因为 Sketch 的组件自由度太低，随便改一个地方就要重新去建立一套小的 Symbols，才能去外面自由切换，所以 Sketch 做项目的时候，Symbols 不敢用太多；而 Figma 就可以大胆去建立组件，反正可以很自由的修改，这样一来，用户就更愿意去使用组件去复用，复用了效率就会更快，建复用组件的时候也更愿意把布局对齐都设置好，如此良性循环是非常棒的设计体验！
____
▍组件库和设计稿分离（卫生间的干湿分离你说 6 不 6？）
Figma 有团队功能，可以推送共用的组件库，可以理解为 Sketch 的 Library，但 Figma 的更稳定快速，说实话 Sketch 的 Library 我确实没研究过，但是 Figma 的这个让我觉得非常好用，真正做到组件库单独更新，然后推送给小伙伴；不 BB 直接看图：
这样直接的好处就是多个设计师协作同一个项目的时候，强制性的保持项目、组件统一，为什么说强制性的呢？因为推送出去的组件只能用，不能改，除非有组件库设计稿的权限，这样就能特别的统一去做设计，由一个人统筹整个组件库；以上都是我的个人想法，毕竟我没有 3 人以上的协作经验，但这个点还是很棒。
____
▍交互跳转轻松加愉快（光速做交互且功能齐全）
交互跳转这个好好说说，他不止可以做跳转，还能快速的制作一些微交互（不是那种酷炫的小动效），比如鼠标悬停、按下效果、浮层、模态框，可以这样说，只要 APP、WEB 常见的交互效果，Figma 都有，而且可以非常方便的做出来；其中居然有鼠标的 Hover 触发真的让我很惊喜，据我所知这种交互大多数软件是没有的，就算有那制作也特别麻烦（没错，说的就是 Axure，我这辈子也不想用 Axure 了）；而 Figma 不但可以做 Hover，还能把 Hover 效果的按钮做成 Symbols 去复用，这是要上天了，这里就不展示做的过程了，直接看看效果：
那么在我实际工作中，Figma 的交互功能确实帮助我不少，这里又要踩 Sketch 了，Sketch 官方带的交互原型功能是有，但是功能简陋，好吧我暂且理解为想要克制，那即使克制如你，但 Sketch 还是卡的要死啊，卡+功能简陋导致我直接不想用 Sketch 做交互。还是那句话，能用和好用是两回事。而 Figma 在交互上真的给我很多的惊喜，总结来说就是应有尽有、好用、快速、流畅，对了忘说了，做好的原型马上可以生成链接给任何人看效果！
____
▍流畅
按理说流畅我应该放第一个说，Sketch那个卡就不提了；反正 Figma 是丝滑的，用就完了；而我放最后一个说是因为工具最终是拿来用的、是给用户提升效率的，所以流畅跟上面的几个特性相比就只能放最后说了。
____
▍资源 & 视频 & 干货
《知乎：如何评价多人合作界面设计工具 Figma？》 - 其实这篇左子祯的回答比我写的详细很多，有兴趣的可以把这个问答的所有答案都看了。
🎬Figma vs Sketch 组件系统谁是爸爸？实况对决！
🎬Figma 不付费如何使用？Sketch 转到 Figma 前的所有疑问都在这！
最后想进我们 Figma WX 群的加我（lijxse）拉你。
