全面解讀2020最值得上手的界面設計工具：Figma

前言

工欲善其事必先利其器，器即工具。選擇一種工具的本質是選擇一種方式。個人的選擇或許是基于喜好習慣，行業的選擇則伴隨行業工作模式的變化。作為互聯網行業的設計師，我們應當時時跟進技術的發展，解鎖新模式和新工具。

設計工具的戰場

1. 概述

隨著日新月異的技術發展，互聯網時代進入深水區。行業環境越復雜，設計師將面臨越多機遇和挑戰。

設計不同于藝術，本質是為了解決問題，而設計工具直接影響著設計師思考問題和解決問題的能力。設計工具的背后，體現著設計行業的整體水平和效率。

如果把設計工具的競爭類比戰場，筆者今天探討的是互聯網時代最受關注的界面設計戰場。

界面設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。

2. 歷史追溯

在界面設計領域，設計工具一直以驚人的速度演化，競爭愈演愈烈。從曾經的PS一家獨大，到近年Sketch新晉王者，再到當下的各類新工具百家齊放。

2010年前，界面設計師普遍使用的是Adobe Photoshop（簡稱PS），那時界面設計還在起步階段。PS的定位是圖像處理軟件，是一個全面的設計工具，界面設計只是使用這個工具的一個行業分支。2010年后，界面設計飛速發展，PS的性能和效率都無法匹配這個新興行業的需求。

因此，Sketch順應而生，聚焦界面設計，并迅速占領界面設計的市場。

放眼當下，各類新型界面工具相繼出現，挖掘和突破Sketch的短板。Sketch只面向Mac用戶，其它系統無法使用，XD成為Windows上最接近Sketch的工具替代，但過于相似、缺少獨特也意味著XD目前難以超越Sketch。

另外，Sketch在原型和交互設計上發揮不足，inVision很好的從這個環節獨立出來。再如Framer，基于開源原型框架，在代碼上的優勢，為設計和技術的融合搭建橋梁。

總體來看，界面設計工具在往兩個方向分化。

一種是模仿者，進行功能效仿或內部整合。另一種是跨界者，橫向擴展，做不同領域的功能集成。工具戰場是力量的決勝，亦是速度的角逐。

3. 黑馬逆襲

近來，有一匹黑馬，頻繁出現在設計師的信息視野，成為設計行業的熱門話題，團隊使用逐漸覆蓋國內外龍頭企業。

國外如微軟、谷歌、Facebook等，國內如阿里，騰訊，字節跳動，網易。

這匹黑馬，就是 Figma。

如今，從 Sketch 遷移至 Figma 已然成為趨勢。Figma逆襲的奧義何在，如此受到設計師和團隊的青睞。探討之前，我們不妨先來了解這款軟件。

Figma是什么

Figma是基于瀏覽器的界面設計協作工具。它的最大特點就是基于瀏覽器和設計協作。

1. 基于瀏覽器

Figma以瀏覽器為載體，依靠網絡，全程在線操作，所有文件保存在云端。

簡單理解，Figma是打開一個網頁使用，Sketch等是打開本地軟件使用。

云端的最大優勢就是不受物理設備限制，多平臺共享，使用靈活。

Figma全平臺可用，操作系統支持 Win，Mac，Linux等，設備支持電腦，平板，手機。在線意味著不需要下載安裝包到本地，軟件插件都會自動更新，不再漫長地等待下載和頻繁安裝更新。

2. 設計協作

Figma是第一個真正意義上的設計協作工具。協作，是Figma對界面設計師這個角色的重新定位。

如Sketch專注于設計師個人完成設計工作，就像一個單一的點，如需和外界產生關聯，需要借助第三方工具。

而Figma是從團體的角度去定位設計，界面設計不僅僅是設計師個人的事情。

團隊內，設計師需要更高效地銜接設計流程的上下環節，設計師和設計師之間可以更輕松地協作溝通，共同完成設計工作。

團隊外，設計行業應有分享精神，站在行業巨人的肩膀上再創新，推動設計行業更加高效。

流程銜接——跨界工具集成

傳統流程中，設計師在不同環節，需要使用不同工具進行設計工作。

流轉在不同工具的過程，會造成時間成本的消耗，產生流轉中的錯誤。

使用Figma就能免去切換工具的煩惱，因為它本身就全面覆蓋了產品設計中所有重要的步驟，讓工作流程更高效完整統一。

令人贊嘆的地方是，這樣的工具集成體，界面卻比Sketch更簡潔易上手。

內部溝通——多人在線同時編輯

支持多人在線同時編輯，意味著團隊可并行工作，同時修改一個文件。

項目是一個整體，而不再是被分割的多個文件。

文件是一個鏈接，而不再是需要傳送的源文件。如此，極大地降低團隊的溝通、修改、維護成本。

資源共享——開源社區

互聯網行業追求高效，俗話說“眾人拾柴火焰高”，集合眾人的力量方能讓價值最大化，資源必不可少。

如Github是全球最大的社交編程及代碼托管網站，其社交化編碼、開源共享的理念改變著整個開發社區的生態，讓全球開發者共同創造了無數優質項目。

在設計行業，Dribbble和Behance作為最知名的國際設計社區，是設計師們展示作品、合作招聘的最大平臺，但一般只展示設計作品而不共享源文件。

Figma的社區功能，和Github有異曲同工之妙。

一方面設計師們可以一鍵取用世界頂尖公司及設計師精心制作的設計系統和模板，快速構建高質量的設計作品，節省重復基礎性工作的時間精力，提高工作效率。

另一方面，設計師可以輕松瀏覽行業一線設計作品，開拓設計視野，并進行互動溝通。

工具的技術趨勢

選擇新工具是一件慎重的事情，特別對團隊來說，需要從整體的角度去評估成本、風險和回報。

個人的選擇或許是基于喜好習慣，而行業的選擇則是伴隨行業工作模式的變化。如前文所說，從 Sketch 遷移至 Figma 已然成為行業趨勢。

互聯網行業正在發生怎樣的變化，面對未來的技術趨勢，我們正在關注什么。

1. 技術趨勢

數字化

信息，泛指人類社會傳播的一切內容。數字化是將信息轉變為數字、數據，建立數字化模型，而后轉變為一系列二進制代碼，引入計算機內部進行處理的過程。當下信息爆炸的時代，更多信息以數字化形式存在，人與世界的互動將更多以網絡為媒介。

云計算

“云”實質上是一個網絡，一種計算資源共享池。

云計算，把計算資源通過網絡讓資源被快速取用。未來的時代是云計算的時代，用戶通過網絡就可以獲取無限資源，同時獲取的資源不受時間和空間的限制。

信息處理擁有更多時間自由性和空間靈活性，意味著我們獲取和使用信息可以隨時隨地，想即所得。

大數據

數據是信息的基礎，是智慧的前提，是所有新技術的依托。大數據是數據的集合，對海量數據進行專業化處理，形成價值，是行業競爭、產業實現盈利的關鍵。

大數據和云計算是深度結合的，并和物聯網、移動互聯網等新興計算形態密切相關。

人工智能

即AI，是以人類智能相似的方式做出反應的智能機器。

人工智能使機器能像人一樣思考，并能夠勝任一些通常需要人類智能才能完成的復雜工作。

未來機器人是否能超越人類，甚至接管世界，是個尚待討論的話題。至少，我們的世界正在借助AI的力量更自動化，更高效化。

5G

第五代移動通信技術，是最新一代蜂窩移動通信技術。

我們的網絡信號，主要就來自于通信基站。隨著網絡基礎設施日漸完善，世界的運作和發展將會更快。

在未來，當5G全面覆蓋，且所有的設施都實現了智能化后，我們將真正的進入到一個“萬物互聯”的時代。

2. 工具趨勢

新技術的浪潮下，工具行業的發展和趨勢，整體來看，呈現云端化和一體化。

云端化

云端化是工作載體的變革，從本地到云端，信息以最快的方式觸達和共享。用戶無需在本地安裝軟件和插件，直接在瀏覽器上使用工具，擺脫了電腦硬件的束縛。

云端擁有強大的計算能力，使用性能遠超一般的本地軟件。拷貝傳送式的本地模式在文件的共享上，效率遠不如鏈接式的云端模式。比較典型的例子就是各類在線文檔編輯工具。

一體化

一體化是工作模式的顛覆，流程、工具、資源都應當打破壁壘，讓協作更通暢。

一體化可以理解為將不同的個體有機融合為一個整體，形成協同效力，實現團體的整體效率和利益最大化，這里的團體可以是項目團隊，可以是公司，也可以是整個行業。用技術的方式掃除溝通協作的障礙，能大大提升團體的專業和效率。

Figma的模式

Figma的愿景是成為設計界的 Google Docs，打造類似 GitHub 的設計共享與協作的社區。

這也是我認為Figma現階段逆襲的原因所在,它敏銳的捕捉到了云端和協同的價值。

在過去，設計師和產品、開發者都有明確的角色分配，但隨著全棧設計和全鏈路設計的升溫，設計師的角色定位有了更多可能性，可以更進一步融入產品的設計開發流程中。

全棧全鏈路設計，二者本質上都需要設計師擁有更強的綜合思維能力。Figma的跨界功能集成優勢，很好的匹配了這種職業發展方向。

Figma的利器

大家最關注的，應該還是在具體功能使用上，Figma到底有何亮點。下面，詳細聊聊那些本人目前覺得Figma比Sketch更優的功能。

1. 全局組件

設計組件化的概念是從程序的開發模式中演變而來，是將界面拆分成更小部件使之易于管理的方式。形象化去理解，界面設計就像搭積木，組件是積木，頁面是模型，設計師使用組件（積木）搭建成頁面（模型）。

組件的內部邏輯，可以用父子關系來形容。原始被復制的組件是父件，復制出來的組件是子件。以父子關系比喻是因為，在組件邏輯中，父件有變化，子件們會繼承，同步變化。這點上，Figma和Sketch是一致的。

Figma組件邏輯比Sketch高明在，子件可以靈活處理繼承和嵌套關系。

子件可以各自調整如形狀、顏色、尺寸等樣式屬性，當我們發現某個元素樣式復用頻率高，也能輕松轉變成新的父件。如此，一個相同的組件可以應對不同場景變化成不同的樣式，建構組件體系變得更靈活。

Sketch的子件只能復刻父件，任何對組件的修改，都會以完全覆蓋掉原始組件的模式完成。

因此，當我們使用Sketch構建組件體系時，需要提前把所有可能的樣式全部羅列出來。隨著項目日漸復雜，組件復雜臃腫，后續的維護極其繁瑣。

使用Figma時，父件可以放置任何頁面任何位置。

比如把父件放在子件旁邊，調整父件的細節時就可以同步看到子件在整個頁面中的效果，很方便。

而使用Sketch時，組件被固定放置在另外一個名為Symbols的頁面，設計組件和瀏覽頁面效果需要在不同頁面切換查看。

△ Figma演示

△ Sketch演示

2. 跨流程工具

高保真可交互原型設計

Figma可制作高保真的交互原型，無縫完成從設計到原型演示的切換。

它比Sketch生硬的頁面跳轉友好，適合demo展示。

如需制作更復雜的交互，Figma也提供導入Principle的功能。在手機上預覽效果可用 Figma Mirror 。支持導入gif文件，演示更加靈活。

設計評審反饋

內置評論功能，在設計和原型制作模式下都支持注釋。

設計和協作是可以同時進行的，任何人都可以在設計圖的任何地方添加評論。可以在評論中 @其他人或將評論標記為已解決。

不但可用于設計評審，也是設計走查反饋的利器。

前端協作

每個 Figma 文件都有代碼模式，工程師可以在其中查看設計文件。工程師能在設計圖上獲取標注，并自行導出所需資源（包括 CSS、iOS、Android 樣式）。

共享靈活

Figma支持任何文件，頁面或畫板的共享。提供權限管理功能，自定義共享人員編輯和查看的權限范圍。

當創建共享鏈接時，單擊該鏈接的人將打開Figma的瀏覽器版本。這種共享形式，使共享方式準確高效便捷。

你可能有這些疑問

1. Figma是英文，我看不懂怎么辦？

打開網站：https://figma.cool/ 支持客戶端漢化補丁和Chrome插件。

2. Figma基于瀏覽器，會慢嗎？

Figma是在線使用，極少占用本地內存，處理文件速度極快。

使用體驗是，飛一般的絲滑。

Sketch 太容易卡頓，設計文件一大一多卡頓得就更嚴重。

3. Figma學習成本高嗎？

對于有Sketch使用經驗的設計師，1天足夠。

Figma的界面和快捷鍵，都和Sketch基本相似，而且Figma支持Sketch導入，所有的信息和內容都得到了最大限度的保留，這對項目遷移非常友好。

對于未使用Sketch的設計師，筆者認為Figma是目前最易上手好用的設計軟件了。

4. Figma收費嗎？

Figma分成初級免費版，專業付費版，企業付費版和教育免費版。

個人使用，選擇初級免費版就完全足夠，無限的文件存儲空間，30 天版本歷史記錄，但只能2人同時編輯。

專業版適合團隊，比免費版優在有無限的版本歷史記錄，無限編輯者，無限項目。費用是按月15美元/月/人或按年12美元/月/人。

企業版比專業版優在有更多定制化服務。滿足條件的教育者或者學生，可以免費使用。

5. Figma的教程、插件、資源在哪里？

最優秀的教程就是Figma官網——https://www.figma.com/ Figma本身就自帶社區功能，提供了豐富的資源、插件，而且一直在更新，Figma的生態環境將會越來越好。

優秀的國內Figma學習網站推薦：

• https://figmachina.com/
• https://figmacn.com/

結語

在接下來的10年、20年、50年，設計工具還會給我們帶來怎樣的驚喜？

誰都無法完美預測，但能肯定的是，能脫穎而出的是那些，在流程和模式上做出創舉，代表未來方向的產品。

至少現階段，Figma打破了原有工具的局限建立了自己獨特的核心競爭力，并且未來可期。

歡迎大家提出問題和闡述更多思考。

更多關于Figma的思考：

歡迎關注作者微信公眾號：「美柚UED」