超全面！新晉設(shè)計神器Figma 深度評測

@魔力大熊：一開始以為只是個玩具，結(jié)果卻發(fā)現(xiàn)，厲害了……

歡迎關(guān)注大熊老師（前今日頭條資深交互設(shè)計師，現(xiàn)Haobtc 設(shè)計總監(jiān)）的微信公眾號「熊掌撥清波」

Figma

Figma 是最近才出的一款設(shè)計軟件，我原以為它不過是又一個拿著「團隊協(xié)作」當(dāng)噱頭，實際無法當(dāng)作為生產(chǎn)力工具使用的玩具。然而在有限的幾天時間試用后，我的想法改變了，比起玩票的前輩們，F(xiàn)igma 經(jīng)歷了相當(dāng)?shù)拇蚰ィ瓿啥群芨摺３?strong>「實時協(xié)作」，還有「版本控制」、「矢量網(wǎng)絡(luò)（Vector Network）」、全平臺適配（基于 web ）等很棒的特性。

更妙的一點是，如果你曾經(jīng)使用過 Sketch，那么上手 Figma 幾乎沒有難度，學(xué)習(xí)曲線十分平緩。這篇文章幫助你快速你認(rèn)識 Figma ，掌握基本的使用技巧，并給出一些心得和建議。

Figma是一個基于瀏覽器的 UI 設(shè)計工具

絕大部分的設(shè)計工具都是本地應(yīng)用，相比 HTML 少的可憐的 API，基于原生 OS 開發(fā)的軟件自然能更好的使用硬件資源。尤其是涉及到復(fù)雜的圖形運算，大量的錨點路徑，龐大的素材體積，這些都是吃內(nèi)存的大家伙。

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

然而，F(xiàn)igma 在試圖修正這個觀點。它很快，同時打開十幾個畫板也沒有卡頓（在 Chrome 下 ），背景高斯模糊，遮罩，這樣的「特技」動作也沒有問題，拖曳、縮放、成組（Group）、繪制矢量圖形、就更不用說。在此之前，我很難想象一個基于瀏覽器的設(shè)計軟件可以做到如此高效流暢，如果不是網(wǎng)絡(luò)環(huán)境上有細(xì)微的延遲，我甚至都感覺不到這是在瀏覽器里完成的。

真正的實時協(xié)作

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

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

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

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

矢量網(wǎng)絡(luò)

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

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

聽起來沒什么大問題，長此以往大家也都是這么做的。

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

首先，學(xué)習(xí)鋼筆工具需要花一定的時間，它對新手來說并不友好；

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

最后，調(diào)整形狀時只能拖動錨點，而不能直接移動兩個錨點間的線條。

以上種種，都增加了設(shè)計師的學(xué)習(xí)成本。

在使用 Figma 時，這些問題都被優(yōu)雅的解決了，你不需要改變原先的使用習(xí)慣，鋼筆工具該怎么還怎么用。但是（同學(xué)們劃重點），F(xiàn)igma 允許你直接拖動錨點間的線條，自動填充閉合區(qū)間，同一個錨點連接多個錨點（大于兩個）……

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

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

好在最后的結(jié)果令人滿意，F(xiàn)igma 的鋼筆工具「Pen Tool 快捷鍵P 」有多好用，要親自試了才知道，這里不贅述。

配合 Sketch

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

基本上，如果你現(xiàn)在的主力設(shè)計工具是 Sketch，你完全可以把 Figma 當(dāng)做一個擴展插件看待，在 Sketch 上做完設(shè)計，丟進 Figma，然后在其中進行下一步工作。

全平臺

Figma 目前支持 macOS ，Windows，和 iOS 平臺上實時預(yù)覽的 Figma Mirror 。

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

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

關(guān)于 Figma 開發(fā)時的一些技術(shù)選型，可以看這篇 Evan Wallace 寫的文章，很有意思。

字體

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

但實際的測試結(jié)果是，F(xiàn)igma 對中文的支持不太好，經(jīng)常出現(xiàn)字體無法識別（實際已安裝）的情況，這一點只能期待開發(fā)團隊早點解決。

界面

為了盡可能吸引現(xiàn)有 Sketch 用戶嘗試 Figma，研發(fā)團隊非常討巧的將界面布局，設(shè)計的和 Sketch 「幾乎一樣」。

左側(cè)是圖層管理（藍(lán)色框內(nèi)），可以樹狀結(jié)構(gòu)可以很方便的看到分組和圖層；頂部是工具欄（橙色框內(nèi)），插入常用矢量圖形、鋼筆工具、批注評論、文字、導(dǎo)入圖片等；右側(cè)是檢查器（Inspector 綠色框內(nèi)），對圖形進行對齊、顏色、字號、遮罩、BackgroundBlur 之類的操作。

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

你應(yīng)該使用 Figma 嗎

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

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

4年的研發(fā)時間，F(xiàn)igma 才終于在2016年9月27日推出第一個公眾版1.0.0（之前有過內(nèi)測版本），一石激起千層浪，設(shè)計師們在 Designer News 上討論的熱火朝天。

某種程度上，F(xiàn)igma 很像當(dāng)年的 Sketch，如果說 Sketch 讓設(shè)計師找到設(shè)計界面的現(xiàn)代模式，那么 Figma 則進一步釋放了設(shè)計師（特別是團隊）的生產(chǎn)力。

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

因此，當(dāng)我們考慮要不要投入時間去學(xué)習(xí)一個新軟件時，不妨從這幾個角度考慮：

• 它提供了獨特的功能嗎；
• 它代表了未來行業(yè)內(nèi)的方向嗎；
• 它是否有專業(yè)的團隊持續(xù)提供支持；
• 它對你的工作沒有實質(zhì)性的幫助；

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

Figma 的實時協(xié)作和 Vector Network 目前獨此一家；

• UI 設(shè)計的最終目的是幫助用戶更加愉悅高效的達(dá)成某個目標(biāo)，F(xiàn)igma 自身就在幫助設(shè)計師之間及設(shè)計師和工程師之間更高效率的協(xié)作，這一點無疑是正確的；
• 4年時間的開發(fā)以及最終呈獻的成果，足以證明研發(fā)團隊的態(tài)度和能力；
• 實時協(xié)作對我來說意義非凡，它能幫助團隊在最短的時間內(nèi)同時出多個風(fēng)格稿，來快速敲定思路，減小后期返稿的可能性。

因此，沒有理由拒絕學(xué)習(xí)的機會，你完全可以把它當(dāng)做一個備選的設(shè)計工具。

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

其他學(xué)習(xí)資源

如果你是第一次接觸 Figma，除了這篇文章，下面這些優(yōu)質(zhì)資源也應(yīng)當(dāng)對你有幫助：

• 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

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

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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