設計神器 Figma 深度評測

讀完這篇文章需要 9 分鐘

一開始以為只是個玩具，結果卻發現，厲害了……

Figma 是最近才出的一款設計軟體，我原以為它不過是又一個拿著「團隊協作」當噱頭，實際無法當作為生產力工具使用的玩具。然而在有限的幾天時間試用後，我的想法改變了，比起玩票的前輩們，Figma 經歷了相當的打磨，完成度很高。除了「實時協作」，還有「版本控制」、「矢量網路（Vector Network）」、全平台適配（基於 web ）等很棒的特性。

更妙的一點是，如果你曾經使用過 Sketch，那麼上手 Figma 幾乎沒有難度，學習曲線十分平緩。這篇文章幫助你快速你認識 Figma ，掌握基本的使用技巧，並給出一些心得和建議。

Figma是一個基於瀏覽器的 UI 設計工具

絕大部分的設計工具都是本地應用，相比 HTML 少的可憐的 API，基於原生 OS 開發的軟體自然能更好的使用硬體資源。尤其是涉及到複雜的圖形運算，大量的錨點路徑，龐大的素材體積，這些都是吃內存的大傢伙。

種種原因，瀏覽器上始終沒有出現過真正能用的設計工具，類似 wireframe 和 UXPin 基於瀏覽器的原型工具倒是不少，但真要出圖、出標註、切圖時，大家還是紛紛回到 Adobe 家族 或者 Sketch 的懷抱（用 Affinity 的人也越來越多），不管是豐富的插件還是響應速度，本地應用都有先天的優勢。所以，在設計工具領域，我們對瀏覽器始終抱有「懷疑」態度。

然而，Figma 在試圖修正這個觀點。它很快，同時打開十幾個畫板也沒有卡頓（在 Chrome 下 ），背景高斯模糊，遮罩，這樣的「特技」動作也沒有問題，拖曳、縮放、成組（Group）、繪製矢量圖形、就更不用說。在此之前，我很難想像一個基於瀏覽器的設計軟體可以做到如此高效流暢，如果不是網路環境上有細微的延遲，我甚至都感覺不到這是在瀏覽器里完成的。

真正的實時協作

相信我，如果其他的設計協作軟體是「單點觸控」，那 Figma 絕對可以稱得上是「Multi-Touch」。對於大部分設計師來說，工作基本上都是獨立完成的，除了主觀上，設計確需要獨立思考外；客觀原因是，缺乏一個有效的工具幫助大家溝通。跟工程師們藉助 Phabricator 進行 Code Review 和批註不一樣，設計上的產出，通常牽扯到視覺和交互這類難以用隻言片語描述的內容，它們需要以非常形象、具體的方式展現。

最好能讓協作者直接操作「Manipulate」，而不是簡單的盯著設計圖，留幾句 comment，僅此而已。即便是在有完整設計團隊的互聯網公司，設計師之間的協作也常常流於形式，在玻璃黑板上畫畫 workflow 很多時候是「擺拍」，真要互審設計時，大家還是在 QQ 組裡扔圖片。

Figma 的團隊很聰明，從另一個角度解決這個問題。不要再將設計和協作分成前後兩個步驟，大家都在一個畫板上工作，設計、討論，甚至直接在別人的工作上繼續修改，這些都是實時的。

這種感覺很像是直播，完整還原了設計的過程。對於設計leader，可以很方便看到其他人的設計進展，全程把握設計的風格和主題，避免了大量因為溝通不明確造成的無用功。對於新人來說，也是絕佳的學習機會，應該沒有什麼比跟著老司機開車來的更快的學習方式了！

矢量網路

Figma 團隊發明了一個新詞，叫「Vector Network」 矢量網路，這出乎意料， 又在情理之中。用過矢量繪圖工具的同學，對鋼筆工具和貝塞爾曲線不會陌生。實際上，它在1987年就被發明出來了，然而到現在都沒有什麼大的變化，一切依然都基於路徑。 Figma 官方博客有篇文章專門講解了什麼叫 Vector Network，為了方便大家理解，我用更簡單的方式解釋下：

傳統的路徑可以理解成一個包含兩個或以上端點的線條，操控它就得拖動錨點，通過調整錨點兩邊手柄的方向和長短，來得到想要的形狀。

但是有很多痛點沒有解決：

首先，學習鋼筆工具需要花一定的時間，它對新手來說並不友好；

其次，傳統路徑由於是「線性連續」的，每一個端點最多只能連接前後兩個節點，如果中途要插入一個非連續的路徑，路徑只能搭在上面，沒有辦法連接。這就直接造成後面填充顏色時的迷之尷尬——軟體只會根據路徑的方向來選擇性填充，如果不熟悉鋼筆工具，就非常不直觀。

最後，調整形狀時只能拖動錨點，而不能直接移動兩個錨點間的線條。

以上種種，都增加了設計師的學習成本。

在使用 Figma 時，這些問題都被優雅的解決了，你不需要改變原先的使用習慣，鋼筆工具該怎麼還怎麼用。但是（同學們劃重點），Figma 允許你直接拖動錨點間的線條，自動填充閉合區間，同一個錨點連接多個錨點（大於兩個）……

總之，實際用起來順手的要上天。

不得不說 Figma 的團隊為此煞費苦心，重新改進像「路徑」這樣的底層概念，是一件非常需要決心和創造力的事情，Evan Wallace 也在文章里提到團隊甚至多次考慮放棄「Vector Network」，即便大家已經為之付出了艱辛的努力。

好在最後的結果令人滿意，Figma 的鋼筆工具「Pen Tool 快捷鍵P 」有多好用，要親自試了才知道，這裡不贅述。

配合 Sketch

Figma 對 Sketch 的支持非常好，sketch 里的組、命名、圖形屬性、邊框、陰影、顏色混合模式、以及背景模糊等等，都被完整的保留下來。

基本上，如果你現在的主力設計工具是 Sketch，你完全可以把 Figma 當做一個擴展插件看待，在 Sketch 上做完設計，丟進 Figma，然後在其中進行下一步工作。

全平台

Figma 目前支持 macOS ，Windows，和 iOS 平台上實時預覽的 Figma Mirror 。

基於瀏覽器最大的好處是不受操作系統限制，你甚至可以在 ChromeBook 上使用 Figma，只要上面跑著主流的瀏覽器就行。據我所知，還有大量的設計師因為各種原因仍在使用 Windows 平台，在可預見的將來，Sketch 也沒有在 Windows 上推出的計劃，因此，Figma 不失為一個替代選擇。

不過，你最好不要對桌面版抱有太多期待，它只不過是將網頁端的內容包裝在本地的一個容器里，讓它看起來像一個桌面應用罷了。

關於 Figma 開發時的一些技術選型，可以看這篇 Evan Wallace 寫的文章，很有意思。

字體

Figma 原生支持 Google fonts 和 FontAwesome，也可以在個人設置中安裝插件來支持本地的字體。

但實際的測試結果是，Figma 對中文的支持不太好，經常出現字體無法識別（實際已安裝）的情況，這一點只能期待開發團隊早點解決。

界面

為了儘可能吸引現有 Sketch 用戶嘗試 Figma，研發團隊非常討巧的將界面布局，設計的和 Sketch 「幾乎一樣」。

左側是圖層管理（藍色框內），可以樹狀結構可以很方便的看到分組和圖層；頂部是工具欄（橙色框內），插入常用矢量圖形、鋼筆工具、批註評論、文字、導入圖片等；右側是檢查器（Inspector 綠色框內），對圖形進行對齊、顏色、字型大小、遮罩、BackgroundBlur 之類的操作。

如果你有過 Sketch 的使用經驗，上手 Figma 真的非常容易，如果你沒有試用過 Sketch，一直習慣用 PS 做設計，那麼不妨嘗試一下 Figma。它甚至比 Sketch 更容易上手，而且一旦習慣這種設定後，將來再切換到 Sketch 工作，也會有似曾相識的感覺。

你應該使用 Figma 嗎

其實 Figma 在2012年就已經開始研發了，Dylan Field 在離開 Flipboard 後，過了一年就以這個項目拿到$4M 的種子投資，2015底拿到$14M的 A 輪投資。

在有限的資源下，開發這個項目基本等同於「在瀏覽器中再造一個瀏覽器」，工作量很龐大。

4年的研發時間，Figma 才終於在2016年9月27日推出第一個公眾版1.0.0（之前有過內測版本），一石激起千層浪，設計師們在 Designer News 上討論的熱火朝天。

某種程度上，Figma 很像當年的 Sketch，如果說 Sketch 讓設計師找到設計界面的現代模式，那麼 Figma 則進一步釋放了設計師（特別是團隊）的生產力。

每個產品的流行一定有它的時代背景，Sketch 會流行，是因為它從被創造之初就完完全全為Web 和 Mobile 設計服務，在做界面設計時，Sketch 所節省的時間已經不是用 PS 的熟練度和插件所能追趕的，這是設計模式的進化。

因此，當我們考慮要不要投入時間去學習一個新軟體時，不妨從這幾個角度考慮：

• 它提供了獨特的功能嗎；

• 它代表了未來行業內的方向嗎；

• 它是否有專業的團隊持續提供支持；

• 它對你的工作沒有實質性的幫助；

針對以上問題，我個人思考的結論是：

• Figma 的實時協作和 Vector Network 目前獨此一家；

• UI 設計的最終目的是幫助用戶更加愉悅高效的達成某個目標，Figma 自身就在幫助設計師之間及設計師和工程師之間更高效率的協作，這一點無疑是正確的；

• 4年時間的開發以及最終呈獻的成果，足以證明研發團隊的態度和能力；

• 實時協作對我來說意義非凡，它能幫助團隊在最短的時間內同時出多個風格稿，來快速敲定思路，減小後期返稿的可能性。

因此，沒有理由拒絕學習的機會，你完全可以把它當做一個備選的設計工具。

而且，Sketch 也在不斷推出新的特性，比如新的Symbol、 Sketch Cloud，雖然目前配合一票插件以及 Zeplin 這樣的協作工具，做設計已經酣暢淋漓到飛起，但是後生猛將 Figma 也來勢洶洶，不進步就會被超越。這些設計軟體競爭，最後受益的一定是設計師。

Figma 在2016年底之前一直免費。

其他學習資源

如果你是第一次接觸 Figma，除了這篇文章，下面這些優質資源也應當對你有幫助：

Figma VS Sketch by mengto

a professional design tool on the web by Evan Wallace

Thoughts On Collaborative Design (Figma 1.0 Review) by Flux （Youtube）

Robinhood Logo Recreated Using Figma by Arun Venkatesan（Youtube）

Hands on Figma by UX Hacker（Youtube）

FIGMA OR SKETCH by Maex & Sketchapp TV（Youtube）

Multiplayer Editing in Figma by Evan Wallace

PS: 我在招人，產品設計師、視覺設計師、動效設計師、前端工程師，詳情戳：https://haobtc.com/common/jobs

推薦閱讀：