如何評價多人合作界面設計工具Figma?

Figma 1.0 已於近期發布,和現有的主流設計工具PS,Sketch等對比如何?

官方網站:http://www.figma.com


用老外喜歡的一個詞來評價:Game Changer

從Sketch 3.0發布到現在已經過去了兩年,經過了無數 PS vs. Sketch 相比哪個更適合設計UI的論戰外,Sketch已經發布了三十多個版本,新秀Affinity Designer也已經趨於成熟,而眾星捧月的Adobe XD卻至今仍在beta。

當大家還在探索Sketch還有什麼牛逼閃閃的插件,Invision Craft能不能改善Sketch多人協作時模板混亂問題的時候,Figma突然出現,清新脫俗的讓人眼前一亮。

沒錯,這就是個基於瀏覽器的、支持多人協作的Sketch。

無縫的轉換體驗

很多設計師從PS切換到Sketch都花費了很長一段時間,但從Sketch切換到Figma則不需要那麼麻煩,就像從PS到AI,快捷鍵幾乎是一樣的沒有太多學習成本。直接導入一個Sketch文件,所有的信息和內容都得到了最大限度的保留,可以直接開始繼續你的設計。

真正的多人協作

如果你用過Google Doc,一堆人在一個Spreadsheets里七嘴八舌,那應該不難想像一堆人在同一個Sketch里編輯的畫面,甚至可以多人編輯同一個形狀。

Sketch目前的多人協作的體驗很差,除了直接把文檔發給對方沒有其他輔助功能,想要發給用windows工程師只能藉助Zeplin這樣的工具,Figma則給出了web-based解決方案,流暢的操作體驗甚至讓你忘記了這是一個網站。

更加智能的設計工具

為不同大小屏幕做設計一直是各大設計群經久不衰的話題,Sketch在39版里為symbol引入了縮放這個概念,但整個畫布所有對象的拉伸縮放沒有解決很好,無法直觀的看出同一份設計稿在iPhone5和iPhone6P的表現到底有何不同,Figma則把這個選項放在了很重要的位置。

Figma到底適不適合我?

在Figma之前,我一直認為基於瀏覽器的設計工具是鬧著玩的,體驗了半小時之後,還是覺得在鬧著玩。

Figma的確提供了很多有趣的思路,更協作、更跨平台,但這些並不新鮮,也不像Sketch在UI領域超越PS表現的那麼明顯,如果不在乎網速、不在乎設計稿保密性,喜歡嘗鮮的可以試試,日常工作什麼的還是乖乖回來Sketch吧。

補充:目前遇到的最大Bug,是根本不知道你現在是英文輸入還是中文輸入,打開輸入法所有的快捷鍵都失效了,並且如果給中文設置一個英文字體,中文就撲街了。

部分圖片來自Mengto的blog https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd#.u7ezdzm5q


很喜歡 Figma,不過最近沒做過 UI 相關的事情所以沒有認真使用過。題外話,Figma 的自身 UI 用的是 React,但具體的矢量編輯器部分是用 C++ 寫的然後通過 Emscripten 轉譯到 asm.js……有沒有一種終於見到活的 Emscripten + asm.js app 的感覺?


我終於見到跨平台的 UI 工具了啊啊


久仰 Figma 大名,今天抽空體驗了一下。優點大家都已經都有共識,在我使用的過程中有幾個問題,不知道大家有沒有遇到過。

1. 網路環境不穩定。DeskTop 版本基本打不開(取決於代理的質量),使用 Chrome 切換線路之後終於能開始正常使用

2. 文本工具響應報錯。首先調用系統自己要安裝一個類似與插件的安裝包(最好提示用戶重啟瀏覽器後可用),否則會無法更換字體;緊接著選定字體後切換字重和字體時會無效,雙擊圖層才提示說字體包未安裝(系統字體啊 Dude)。

不知道大家有沒有遇到過類似問題(或是怎麼解決的?),如果這兩個很基礎的問題解決不了,可能這款軟體就大打折扣了,就只能導入 Sketch 文檔(那就淪為協同標註和討論的工具了)。


創業公司絕對不會告訴你他們在用的工具們專輯中,筆者曾提到 Figma 的部分:

「UI 設計工具多了一匹黑馬 —— Figma,它有三個顯著的特性,實時協作矢量網格版本歷史。已習慣使用 Sketch 的同學切換到 Figma 上難度不大,操作基本類似。雖還未像 Sketch 一樣風靡,但可以嘗試下。」

現在很多地方都有關於 Figma 使用評測的文章,但很多人看完迷糊知道它是好的,但還是不知道那樣又是如何得好,又是否到了能取代 Sketch 位置的地步。

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

也就是說,你無需下載這款軟體,只需打開 http://figma.com 的網站註冊之後,即可立即開始使用。

對於設計軟體來說,解決吃內存、優化載入速度一直是個問題。而 Figma 在 Sketch 面前,這一方面卻也毫不遜色。

當然,前提是你得先打得開 Figma 的控制台(瓜田君在測試中,使用了翻-牆和不-翻-牆模式,發現還是翻-牆後打開速度更快)。但進入控制台後,同時打開十幾個畫板,也不見卡頓,還是很流暢的。


Figma 對 Sketch 的支持非常好。設計師可以基於 Sketch 進行設計,再把文件丟到 Figma 里,用它進行實時協作等。

對於大項目的團隊協作,Figma 的出現無疑為團隊協作、設計管理提供了極大的便利。設計師們不再需要文件傳來傳去,一切都是實時而高效的。

並且當你需要一台 Mac 電腦打開你的 Sketch 文件時,你面前只有一台 Windows。那你就可以用 Windows 登錄你的 Figma 賬戶進行設計了。

而一直用著 Windows 的設計師,也終於可以體驗到使用 Sketch 飛一般的快感了。


其它的功能,瓜田君就不再贅述了,主要問題是:

我們需要像當初 PS 轉 Sketch 一樣,來用 Figma 進行設計嗎?

答案是:可以試一試,先了解關注著,但基本 UI 設計軟體還是用 Sketch。(Figma 與 Sketch 操作相似,沒有太大的學習成本,只是需要適應一下它的操作界面。)

如同熱門的開發框架,人們從哪裡獲得的資源越多,便會越依賴。現在 UI 設計中,Sketch 的資源、插件已經非常豐富,用過 Skecth 一段時間後,保證你不會再想回到 PS 做 UI 的時代,所以對 Figma 來說也是一樣。

現在 Figma 在國外似乎得到了越來越多 UI 設計師的擁躉。而在國內還沒有形成氣候。

但例如 Zeplin 作為 Sketch 的擴展插件,定位很明確,讓設計師喜愛並廣泛使用。而 Figma 目前還讓很多人抱有疑惑,是 Sketch 的插件?還是 Sketch 的替代品?或兩者兼而有之?

這裡 Figma 的背景值得一提。 Figma 總部位於舊金山,創辦於2012年,經過近4 年的研發,2016年才開放了測試使用。現在已正式上線。

我們不難想像,在瀏覽器里開發一個 UI 設計工具是多麼巨大的一個工程,但他們做到了,哪怕花費多年。所以我們有初步的理由可以信賴這個產品和這個團隊。

根據國外論壇設計師的使用反饋來看,Figma 非常重視用戶體驗,有任何使用問題都能很快得到解決,並且能快速完善產品。

—— 畢竟是 Web 線上的產品,跟 AppStore 要等發布審核,或者桌面端軟體下載才能更新比起來,還是快得多的。

36氪在2015年12月曾報道了一篇關於 Figma 的文章:UI協作設計應用Figma獲1400萬美元A輪融資

文章中提到,「Figma 的願景是成為類似 GitHub 那樣的設計共享與協作的社區,或者成為設計界的 Google Docs。」

所以我們不妨拭目以待,看看 Figma 將會帶給設計師們怎樣的驚喜呢。

推薦閱讀:

特斯拉Model 3用戶界面詳解(含UI交互源文件分享)


西瓜設計研究所

UI素材 | 網站設計 | 開發資源 | 教程

未經允許請勿轉載,煩請留言獲取授權

? 西瓜設計研究所


這。。。


推薦閱讀:

如何評價 PP 租車的新 logo?
如何評價時裝品牌黛安·馮芙絲汀寶(Diane Von Furstenberg)的設計風格?
莫斯利安的包裝盒真的不科學嗎?
你見過哪些你覺得特別難看的界面?
蘋果為什麼要給 iPhone 設計鎖屏拍照的功能?

TAG:AdobePhotoshop | 設計 | 用戶界面設計 | Sketch | 設計軟體 |