谈谈最近玩的设计软件：Figma 与 Sketch

本文写于 2020 年 5 月 9 日

作为一个优秀的开发者，不懂设计是绝对不行的！

毕竟不懂设计的程序员不是好老板。

而做设计，早已不是尺规作图的时代了。

早些年，大家用 PS。但是 PS 太重了，他有太多界面设计、UI 设计不需要的东西。

此时，2010 年，Sketch 横空出世，他精炼了 UI/UX 设计师所需要的各种功能，让设计效率蹭蹭蹭的上涨。

而现在已经是 2020 年了，进入了万物云时代，figma 的火热也成了理所当然（中国用的比较恶心，大家都懂）。

虽然说，市场上存在着三个主流软件：Sketch、Figma、XD。

但是论操作，这三个软件极其相似，所以看哪个顺眼就学哪个就好啦！接下来我就以 Figma 为例，来谈谈这些好玩的设计软件。

01 Figma 与浏览器

Figma 是一个基于浏览器的协作式 UI 设计工具。

基于浏览器——那他卡不卡呢？

肯定不卡啊！Web 技术已经很赞了，作为一个前端工程师，我信仰 Web。

为什么要上云？

请看：
甲：“等下，我在同步 Sketch Library。”
乙：“把源文件发我，我改下再发你。”
甲：“你的文件是最新版么？”

基于浏览器有什么好处呢？

是一个连接意味着，设计师可以更轻松地并行工作，可以同时修改一个文件！

工程师可以更早的查看设计稿并进行技术评审。

也就是说，不管是谁，只要是利益相关者或任何有链接的人，都可以看到设计从想法到实现的整个过程。

纯云端不危险吗？

相信看到这里，很多和我一样贫穷伴身的小伙伴一定会果断抛弃 Sketch，投奔 Figma 的阵营。

原型设计
这个在 Sketch 中得通过插件完成，原生的原型功能支持并不是很好。
但是对于 Figma 来说，我们可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。
前端协作
工程师可以在设计图上获取标注、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式）
实时协作 + 内置评论
在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论。
我们甚至可以在评论中@其他人或将评论标记为已解决。
团队 Library
我们可以跨项目共享和更新 Component、Style。（神器）
原生支持 Web Font & Font Icon

总而言之，强大，无敌。

很多年前，后端一直嘲笑前端没有可复用与工程化。

约莫十年前，前端有了 webpack，开始了工程化；有了 React，开始了可复用。

今天，没想到设计软件也开始投入这两个领域。

不错，有了这两样思想，的确能够极大的提升我们的工作效率。

基础概念：

这些我就不详细说了，相信每一个学过 Vue 或者 React 或者 Angular 的前端工程师，都能在接触后，轻易的掌握。

总的来说呢，都好好玩，用好了这些软件，对我们的设计效率有极大提升。

甚至让我们写 CSS 更省力了！

不过我掐指一算，虽然 Figma 免费，可是不用梯子体验会非常差劲，一般的梯子价格在 200 元-300 元一年，而 Sketch 只需要$49 一年。

如果是平时不需要翻墙的同学，Figma 的费用反而高于 Sketch 了。

（完）