谈谈最近玩的设计软件：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 一年。

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

（完）