談談最近玩的設計軟件：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 了。
（完）