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

本文写于 2020 年 5 月 9 日

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

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

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

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

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

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

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

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

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

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

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

为什么要上云？

请看：

甲：“等下，我在同步 Sketch Library。”

乙：“把源文件发我，我改下再发你。”

甲：“你的文件是最新版么？”

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

• 跨平台（Win,、Chrome、Linux、Mac）
• 无需保存
• 设计文件现在是一个链接

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

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

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

纯云端不危险吗？

• Figma 支持历史版本恢复，免费版最多保存 30 天，专业或团队版无限制（教育福利！免费使用专业版本！）
• Figma 考虑了灾难恢复，所有的基础架构都分布在 3 个 AWS 数据中心，其中任何一个数据中心意外发生故障，其它数据中心将继续工作

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

• 原型设计

  这个在 Sketch 中得通过插件完成，原生的原型功能支持并不是很好。

  但是对于 Figma 来说，我们可以在 Figma 里面无缝完成从设计到原型演示的切换，不需要反复同步设计图到第三方平台，我们同样可以利用 Figma Mirror 在手机上预览效果。

• 前端协作

  工程师可以在设计图上获取标注、并且可以导出所需任何资源（包括 CSS、iOS、Android 样式）

• 实时协作 + 内置评论

  在 Figma 里，设计和协作可以是同时进行的，任何人都可以在设计图的任何地方添加评论。

  我们甚至可以在评论中@其他人或将评论标记为已解决。

• 团队 Library

  我们可以跨项目共享和更新 Component、Style。（神器）

• 原生支持 Web Font & Font Icon

总而言之，强大，无敌。

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

约莫十年前，前端有了 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 了。

（完）