谈谈最近玩的设计软件：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。”
乙：“把源文件发我，我改下再发你。”
甲：“你的文件是最新版么？”
基于浏览器有什么好处呢？
- 跨平台（Win,、Chrome、Linux、Mac）
- 无需保存
- 设计文件现在是一个链接
是一个连接意味着，设计师可以更轻松地并行工作，可以同时修改一个文件！
工程师可以更早的查看设计稿并进行技术评审。
也就是说，不管是谁，只要是利益相关者或任何有链接的人，都可以看到设计从想法到实现的整个过程。
纯云端不危险吗？
- Figma 支持历史版本恢复，免费版最多保存 30 天，专业或团队版无限制（教育福利！免费使用专业版本！）
- Figma 考虑了灾难恢复，所有的基础架构都分布在 3 个 AWS 数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作
相信看到这里，很多和我一样贫穷伴身的小伙伴一定会果断抛弃 Sketch，投奔 Figma 的阵营。
02 Figma 的功能
- 原型设计
这个在 Sketch 中得通过插件完成，原生的原型功能支持并不是很好。
但是对于 Figma 来说，我们可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。 - 前端协作
工程师可以在设计图上获取标注、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式） - 实时协作 + 内置评论
在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论。
我们甚至可以在评论中@其他人或将评论标记为已解决。 - 团队 Library
我们可以跨项目共享和更新 Component、Style。（神器） - 原生支持 Web Font & Font Icon
总而言之，强大，无敌。
03 设计师的工程化与可复用
很多年前，后端一直嘲笑前端没有可复用与工程化。
约莫十年前，前端有了 webpack，开始了工程化；有了 React，开始了可复用。
今天，没想到设计软件也开始投入这两个领域。
不错，有了这两样思想，的确能够极大的提升我们的工作效率。
基础概念：
- Group
是一种对图层进行分组的方法，组本身不是对象，意味着 Group 不影响约束，也不具有可以自定义的边界。 - Frame
其实就是 div，是一个容器，它是 Constraints 所参照的父级，拥有自己的大小和边界，Figma 有但是 Sketch 没有。 - Artboard
可以理解为一种命名习惯，我们可以制作一个 Frame 并将其称为“画板”，Sketch 直接的有这个概念，但是 Figma 并没有。 - Constraints
类似于 Sketch 里面的 Resizing ，用来给图层设置布局改变时图层的响应策略，类似于 absolute 布局。 - Component
类似于 Sketch 里面的 Symbol，但使用起来会更加灵活，前端工程师最熟悉的组件！ - Instance
Component 的一个实例，会随 Maser Component 改变，实例化的组件。 - Styles
我们可以定义字体、颜色、阴影等属性的 Style 用来共享。
这些我就不详细说了，相信每一个学过 Vue 或者 React 或者 Angular 的前端工程师，都能在接触后，轻易的掌握。
总的来说呢，都好好玩，用好了这些软件，对我们的设计效率有极大提升。
甚至让我们写 CSS 更省力了！
不过我掐指一算，虽然 Figma 免费，可是不用梯子体验会非常差劲，一般的梯子价格在 200 元-300 元一年，而 Sketch 只需要$49 一年。
如果是平时不需要翻墙的同学，Figma 的费用反而高于 Sketch 了。
（完）