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

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

Figma

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

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

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

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

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

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

真正的實(shí)時(shí)協(xié)作

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

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

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

這種感覺(jué)很像是直播，完整還原了設(shè)計(jì)的過(guò)程。對(duì)于設(shè)計(jì)leader，可以很方便看到其他人的設(shè)計(jì)進(jìn)展，全程把握設(shè)計(jì)的風(fēng)格和主題，避免了大量因?yàn)闇贤ú幻鞔_造成的無(wú)用功。對(duì)于新人來(lái)說(shuō)，也是絕佳的學(xué)習(xí)機(jī)會(huì)，應(yīng)該沒(méi)有什么比跟著老司機(jī)開(kāi)車(chē)來(lái)的更快的學(xué)習(xí)方式了！

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

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

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

聽(tīng)起來(lái)沒(méi)什么大問(wèn)題，長(zhǎng)此以往大家也都是這么做的。

但是有很多痛點(diǎn)沒(méi)有解決：

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

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

最后，調(diào)整形狀時(shí)只能拖動(dòng)錨點(diǎn)，而不能直接移動(dòng)兩個(gè)錨點(diǎn)間的線條。

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

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

總之，實(shí)際用起來(lái)順手的要上天。

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

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

配合 Sketch

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

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

全平臺(tái)

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

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

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

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

字體

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

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

界面

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

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

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

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

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

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

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

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

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

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

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

針對(duì)以上問(wèn)題，我個(gè)人思考的結(jié)論是：

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

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

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

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

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

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

• 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)注大熊老師的微信公眾號(hào)「熊掌撥清波」bearbearpaw

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

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

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

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