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

據我了解到，在國外目前已經有非常多的公司正在從 sketch 切換到 Figma，國內的話也有一些公司開始使用 Figma，比如像網易就有設計團隊也開始利用這款工具開展遠程協作設計。

那 Figma 這款軟件到底能不能替代 sketch 呢？有哪些優勢，又有哪些坑，能不能平滑過渡呢？很多人是存在疑惑的，所以彩雲給大家找到這一篇乾貨文章，對比分析兩款軟件的優劣特點，一起來看看吧。

閱讀文章 >>

譯文：

兩款非常好用的 UI 設計工具，sketch 和 figma 之間的競爭還在持續，設計師最經常問到的是：哪一個軟件更好用？我應該從 sketch 遷移到 Figma 嗎？或者反過來。

我已經用 sketch 4 年多了，我非常喜歡這款軟件。因為有 sketch 這樣的神器將我們從 PS 做 UI 的歷史中解救出來，如果你是從 PS 時代開始做 UI 的話，你就應該記得有多痛苦。

閱讀文章 >>

我的公司最近開始遷移到用 Figma。所以我有機會使用 Figma 來工作，然後我就發現它居然是和 sketch 不相上下的神器。

所以在這篇文章中，我將會帶大家一起看看這兩款工具的差異點，以及最後會告訴大家到底哪個才是最好用的。

我將會在以下幾個方面來比較這 2 款軟件：

• 功能特性
• 組件系統
• 協作能力
• 文件交接
• 原型功能
• 文件導出
• 離線辦公
• 插件

功能特性

這兩種工具幾乎具有相同的功能，相同的快捷方式和相同的結構。如果會使用其中一個，另一個往往也能直接上手。

• Figma支持在 Figma 中打開 sketch 文件
• Figma 可以在任何系統中 (Windows, macOS) 使用，因為它是基於瀏覽器的
• Sketch 是 macOS 里的原生應用，所以它只能在 Mac 中工作
• Sketch 和 Figma 目前的性能表現非常相似（彩雲注：Figma 實測還要略勝一籌）
• Figma 需要花費比較長的時間來打開一個項目文件（彩雲注：一定程度上取決於網速），而 sketch 打開往往只需要 1 秒

組件系統— 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 組件的一個示例，我可以刪除圖標和改變按鈕的圓角半徑。

協作方式

選擇一個合適的工具對於設計師之間的協作是非常重要的。

Figma 在協作的過程中採用了谷歌文檔的模式，允許所有設計師在同一時間，同一個文件上同時開工。你能見到許多鼠標在頁面上，可以看到其他設計師正在做什麼。

老實說，我個人不大喜歡有人一直盯着我看，或者和別人在一個文件上工作。因為當文件放大時，兩個人想要在同一個屏幕上工作時，簡直崩潰。但有一些設計師更喜歡這樣的工作方式。

△ 來自Figma 的網頁截圖

讓我們看看 Shetch 如何處理協作的事情，我發現 Sketch 在這部分其實做的更好因為它裏面有一個插件叫做 abstract（彩雲注：可以用來做版本管理）。它允許設計師擁有像 Github 那樣的項目分支系統，每個設計師都在分支中進行設計，然後合併分支，解決衝突。我個人更喜歡這種工作方式，但有些設計師覺得它太複雜了。

文件交接

設計師如何把設計稿發給開發？

Figma 有自己的內置標註工具，但我在實際中跟開發人員遇到的最大問題是，當我發一個界面給開發時，我必須發送整個項目文件鏈接。當他們點擊那個鏈接時，就必須得等，直到項目完全加載才能看到項目中有一個界面的標註文件。或者在彙報會議上，我們想打開設計稿時，可能會等到會議結束，鏈接都還沒打開。

Sketch 有一個 Cloud 來分享界面，但我覺得目前還未開發完善，但其實目前已經有非常多的插件來使得分享更加流暢，比如像 abstract, Zelpin, invision 等等。使用這些插件，你只需要共享需要的界面文件，這樣加載的速度會快上很多。

原型功能

在 Figma 裏面做原型是非常方便的，你可以把原型非常容易地發給用戶作為測試，因為它的分享和更新都異常簡單，打開一個鏈接就好了。

Sketch 是本地化工具，做原型分享就不大方便了，你必須通過 Sketch cloud 來分享它，而且這個雲目前還非常基礎，基本上做不了太多事情。

對於想做出有意思的動畫和漂亮的原型，Sketch 和 Figma 都可以結合需要工具來做，比如 Flinto, Protopie, Principle……

文件導出

這兩個工具在導出時是比較類似的，並且有許多插件可以同時被使用的，例如 Zeplin 和 Simpli，它們的存在使得切圖導出更加容易。

但我在 Figma 中真正懷念的功能是可以複製任何畫板或任何元素，並將其粘貼到 Figma 之外的軟件中，但現在是不行的。Sketch 是可以的，我以前經常這麼做，所以我的桌面並不會有太多文件垃圾，我希望 Figma 能儘快實現這一點。

離線辦公

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

插件

Sketch 比 Figma 出來的早很多，所以插件也要更豐富一些。但我真正喜歡 Figma 的是他們在每個插件進入到 Figma 商店之前都會對它們進行審核。這很好地保證了插件是可信的，不會破壞項目文件本身。

最後，我想強調的是，我對使用哪種工具更好沒有特彆強烈的意見，因為到目前為止，這兩個工具都還做的不錯。學習其中一種，你也就會使用另一個，轉換其實非常容易的。

因此，我建議要根據項目的具體條件來選擇合適的工具。

彩雲再補充一些內容

我個人是比較看好這種雲端協作模式的，雲才是未來。在 sketch 的使用過程中，一直都有版本管理困難，多人協作不便，組件庫邏輯層級複雜等痛點，在使用 Figma 時，這些問題都已經被解決，期待大家嘗試使用。目前在國外的一些大廠，像 Twitter, Microsoft，Github,Dribbble ,Dropbox，Airbnb ，Uber 都開始使用 Figma 作為團隊設計工具，可能在未來成為主流設計工具也說不準哦，提前準備好吧。

另附上 Figma 中文用戶手冊：https://figmachina.com/guide

歡迎關註譯者的微信公眾號：「彩雲譯設計」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五娛樂怎麼樣?_Figma會取代Sketch的地位嗎？來看這篇超全面的對比分析！