這是彩云譯設計的第112篇文章

原文：https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a

作者：Ahmed Abdelmageed

譯者：彩云sky

本文翻譯已獲得作者的正式授權(授權截圖如下)

寫在前面：最近因為疫情的影響，很多公司使用了遠程辦公的模式，同時也把很多遠程協作的問題擺在了臺面上。對于設計團隊來說，一款好用的協同工具非常重要，最好設計工具本身就是可以方便協同的。據我了解到，在國外目前已經有非常多的公司正在從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 有自己的內置標注工具，但我在實際中跟開發人員遇到的最大問題是，當我發一個界面給開發時，我必須發送整個項目文件鏈接。當他們點擊那個鏈接時，就必須得等，直到項目完全加載才能看到項目中有一個界面的標注文件。或者在匯報會議上，我們想打開設計稿時，可能會等到會議結束，鏈接都還沒打開。Sketch有一個Cloud來分享界面，但我覺得目前還未開發完善，但其實目前已經有非常多的插件來使得分享更加流暢，比如像abstract, Zelpin, invision …。使用這些插件，你只需要共享需要的界面文件，這樣加載的速度會快上很多。

5.原型功能

在Figma里面做原型是非常方便的，你可以把原型非常容易的發給用戶作為測試，因為它的分享和更新都異常簡單，打開一個連接就好了。Sketch是本地化工具，做原型分享就不大方便了，你必須通過Sketch cloud來分享它，而且這個云目前還非常基礎，基本上做不了太多事情。對于想做出有意思的動畫和漂亮的原型，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中文用戶手冊：https://figmachina.com/guide下一期，說不定我會分享一些我個人使用Figma的經驗(等我研究研究)，感興趣的話，點個在看讓我多點動力吧，謝。

往期熱門文章回顧

超全面！動效設計標準與規范UI設計師們應該保持關注的視覺設計趨勢

Figma 3.0 版本重磅發布！為你揭秘這款2018年最值得體驗的設計軟件！

9個小知識教你更好的理解動畫原則，提升動效品質2020年最值得設計們保持關注的8個UI設計趨勢

點個在看，比啥都強?

總結

以上是生活随笔為你收集整理的sketch软件_因远程协作大火的Figma，到底有多好用，会取代Sketch的地位吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。