@魔力大熊：一開始以為只是個玩具，結果卻發現，厲害了……

歡迎關注大熊老師（前今日頭條資深交互設計師，現Haobtc 設計總監）的微信公眾號「熊掌撥清波」

Figma

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，除了這篇文章，下面這些優質資源也應當對你有幫助：

• 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

歡迎關注大熊老師的微信公眾號「熊掌撥清波」bearbearpaw

?「大熊老師的好文合集」

1. 職場丨設計師職業生涯最寶貴的前十年，應該如何度過？
2. 流程丨暢快高效！超實用的設計工作流程+神器推薦
3. 提升設計稿丨5個幫你快速提高設計稿質感的實用方法

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com