守望者

@彩云譯設計:最近因為疫情的影響,很多公司使用了遠程辦公的模式,同時也把很多遠程協作的問題擺在了臺面上。對于設計團隊來說,一款好用的協同工具非常重要,最好設計工具本身就是可以方便協同的。

據我了解到,在國外目前已經有非常多的公司正在從sketch切換到Figma,國內的話也有一些公司開始使用Figma,比如像網易就有設計團隊也開始利用這款工具開展遠程協作設計。
?
那Figma這款軟件到底能不能替代sketch呢?有哪些優勢,又有哪些坑,能不能平滑過渡呢?很多人是存在疑惑的,所以彩云給大家找到這一篇干貨文章,對比分析兩款軟件的優劣特點,一起來看看吧。
?
?
譯文:
?
兩款非常好用的UI設計工具,sketch和figma之間的競爭還在持續,設計師最經常問到的是:哪一個軟件更好用?我應該從sketch遷移到Figma嗎?或者反過來。
?
我已經用sketch4年多了,我非常喜歡這款軟件。因為有sketch這樣的神器將我們從PS做UI的歷史中解救出來,如果你是從PS時代開始做UI的話,你就應該記得有多痛苦。
?
我的公司最近開始遷移到用Figma。所以我有機會使用Figma來工作,然后我就發現它居然是和sketch不相上下的神器。
?
所以在這篇文章中,我將會帶大家一起看看這兩款工具的差異點,以及最后會告訴大家到底哪個才是最好用的。
?
我將會在以下幾個方面來比較這2款軟件:
  • 功能特性
  • 組件系統
  • 協作能力
  • 文件交接
  • 原型功能
  • 文件導出
  • 離線辦公
  • 插件

 

1.功能特性

這兩種工具幾乎具有相同的功能,相同的快捷方式和相同的結構。如果會使用其中一個,另一個往往也能直接上手。
?
?
  • Figma支持在Figma中打開sketch文件
  • Figma 可以在任何系統中 (Windows, macOS..) 使用,因為它是基于瀏覽器的
  • Sketch 是 macOS ?里的原生應用, 所以它只能在Mac中工作
  • Sketch 和 Figma 目前的性能表現非常相似(彩云注:Figma實測還要略勝一籌)
  • Figma 需要花費比較長的時間來打開一個項目文件(彩云注:一定程度上取決于網速),而sketch打開往往只需要1秒

 

2.組件系統— Symbols Vs Components

我原來用sketch的symbols來制作組件庫感覺還不錯,但是當我開始使用Figma后,我發現在組件化這塊做的更加優秀。讓我來告訴你為什么!
?
Sketch中的組件樣式并不是原子級的,當我想要構建文本樣式時,我必須把所有想要的樣式全部列出來,需要做一個長長的列表。
?

 

我來解釋下Sketch是如何工作的:當你定義任何文本或圖層成組件樣式時,Sketch會將所有屬性保存在這個樣式中,如果想要修改symbols中的任何樣式,都是以覆蓋的形式來完成修改。例如,如果你希望有不同的對齊方式或不同的顏色的組件,在用Sketch時,就必須提前做好所有可能的文本/圖層樣式。
?
讓我們再來看看同樣的情況Figma是怎么處理的:
?
Figma 屬性面板
?
Figma的驚人之處在于它的組件更具原子級,在component屬性面板中的每一個屬性都可以直接定義樣式,它的工作模式更符合設計師的需要,你可以單獨保存顏色,字體,投影,并且可以任意組合成你想要的主要樣式。這種工作流程是非常有幫助的,因為如果當我想要改變顏色時,我不在需要像Sketch那樣深入到元件中去調整文本風格或者是圖層顏色。在Figma中,你可以真正做到修改一處就能改變所有。
?
(彩云注:從我自己的使用經驗來看,Figma中的component復制后產生新的Instances,比symbol強大的地方在于,存在子父級的關系。相當于你可以調整一個實例樣式,但又不會干擾到父級的樣式,而修改父級的樣式又能修改全局。有點繞,看一張圖吧。)
?
?
我也注意到Figma把組件做的更靈活了,相比于Sketch的symbols,限制更少。
?
在Sketch中,如果你想要修改symbols屬性,可以通過symbol中的覆蓋樣式來調整。但是你不可以刪掉組件中的元素。例如,如果你有一個帶有圖標的按鈕,此時就必須創建2個symbol,一個帶有圖標,另一個不帶圖標。
Figma 的組件有些不一樣,可以跟sketch一樣修改覆蓋樣式,但也可以直接修改組件層,以及層的屬性。
??
?
Figma 組件的一個示例,我可以刪除圖標和改變按鈕的圓角半徑。
?
?

3.協作方式

選擇一個合適的工具對于設計師之間的協作是非常重要的。
?
Figma在協作的過程中采用了谷歌文檔的模式,允許所有設計師在同一時間,同一個文件上同時開工。你能見到許多鼠標在頁面上,可以看到其他設計師正在做什么。
?
老實說,我個人不大喜歡有人一直盯著我看,或者和別人在一個文件上工作。因為當文件放大時,兩個人想要在同一個屏幕上工作時,簡直崩潰。但有一些設計師更喜歡這樣的工作方式。
?
來自Figma 的網頁截圖
??
讓我們看看Shetch如何處理協作的事情,我發現Sketch在這部分其實做的更好因為它里面有一個插件叫做abstract(彩云注:可以用來做版本管理)。它允許設計師擁有像Github那樣的項目分支系統,每個設計師都在分支中進行設計,然后合并分支,解決沖突。我個人更喜歡這種工作方式,但有些設計師覺得它太復雜了。
?
?

4.文件交接

設計師如何把設計稿發給開發?
?
Figma 有自己的內置標注工具,但我在實際中跟開發人員遇到的最大問題是,當我發一個界面給開發時,我必須發送整個項目文件鏈接。當他們點擊那個鏈接時,就必須得等,直到項目完全加載才能看到項目中有一個界面的標注文件?;蛘咴趨R報會議上,我們想打開設計稿時,可能會等到會議結束,鏈接都還沒打開。
?
Sketch有一個Cloud來分享界面,但我覺得目前還未開發完善,但其實目前已經有非常多的插件來使得分享更加流暢,比如像abstract, Zelpin, invision …。使用這些插件,你只需要共享需要的界面文件,這樣加載的速度會快上很多。
?
?

5.原型功能

在Figma里面做原型是非常方便的,你可以把原型非常容易的發給用戶作為測試,因為它的分享和更新都異常簡單,打開一個連接就好了。
?
Sketch是本地化工具,做原型分享就不大方便了,你必須通過Sketch cloud來分享它,而且這個云目前還非?;A,基本上做不了太多事情。
?
對于想做出有意思的動畫和漂亮的原型,Sketch和Figma都可以結合需要工具來做,比如Flinto, Protopie, Principle…
?
?

6.文件導出

這兩個工具在導出時是比較類似的,并且有許多插件可以同時被使用的,例如Zeplin和Simpli,它們的存下使得切圖導出更加容易。
?
但我在Figma中真正懷念的功能是可以復制任何畫板或任何元素,并將其粘貼到Figma之外的軟件中,但現在是不行的。Sketch是可以的,我以前經常這么做,所以我的桌面并不會有太多文件垃圾,我希望Figma能盡快實現這一點。
?
?

7.離線辦公

兩種工具都可以離線工作,但Figma不能加載組件,而且離線工作時非常慢。但Sketch在離線的情況下幾乎是沒啥變化。
?
?

8.插件

Sketch比Figma出來的早很多,所以插件也要更豐富一些。但我真正喜歡Figma的是他們在每個插件進入到Figma商店之前都會對它們進行審核。這很好的保證了插件是可信的,不會破壞項目文件本身。
?
最后,我想強調的是,我對使用哪種工具更好沒有特別強烈的意見,因為到目前為止,這兩個工具都還做的不錯。學習其中一種,你也就會使用另一個,轉換其實非常容易的。
?
因此,我建議要根據項目的具體條件來選擇合適的工具。
?
?

9.彩云再補充一些內容

我個人是比較看好這種云端協作模式的,云才是未來。在sketch的使用過程中,一直都有版本管理困難,多人協作不便,組件庫邏輯層級復雜等痛點,在使用Figma時,這些問題都已經被解決,期待大家嘗試使用。目前在國外的一些大廠,像Twitter, Microsoft,Github,Dribbble ,Dropbox,Airbnb ,Uber都開始使用Figma作為團隊設計工具,可能在未來成為主流設計工具也說不準哦,提前準備好吧。
?
另附上:《Figma中文用戶手冊
?
?
原文地址:uxdesign
譯文地址:彩云譯設計(公眾號)
作者:Ahmed Abdelmageed
譯者:彩云sky

轉載請注明:學UI網 » 因遠程協作大火的Figma,到底有多好用,會取代Sketch的地位嗎?

登錄收藏
 
你可能喜歡的:
【藍湖指北】一張圖教你如何選擇標注尺寸【藍湖指北】一張圖教你如何選擇標注尺寸
Sketch 63 Beta版本探秘,看看都有什么新功能Sketch 63 Beta版本探秘,看看都有什么新功能
2020年最值得推薦的10款UI動效設計工具2020年最值得推薦的10款UI動效設計工具
2020年,6款工具為你助力!2020年,6款工具為你助力!
讓你的 Figma 更好用的秘密讓你的 Figma 更好用的秘密
Figma 實踐:以為是個青銅結果是個王者Figma 實踐:以為是個青銅結果是個王者
Sketch 60 Beta版本探秘,看看都有什么新功能Sketch 60 Beta版本探秘,看看都有什么新功能
9款原型設計工具與Sketch的強強組合,輕松構建交互原型!9款原型設計工具與Sketch的強強組合,輕松構建交互原型!
【小工具大用處】10個超實用的設計師專屬Chrome小插件【小工具大用處】10個超實用的設計師專屬Chrome小插件
標注新方式,「自動+手動」標注標注新方式,「自動+手動」標注
?
京东方a股票