設計資訊：Figma vs Sketch！為什麼10 家設計機構從 Sketch 轉向 Figma？

語言: CN / TW / HK

時間 2022-05-26 18:19:41 美國交互設計資訊

主題: Figma Sketch

UI & UX

Article：2022/05/26

互聯網上圍繞 Figma 和 Sketch 一直存在爭論。設計師們和設計機構現在想知道哪一個更適合 UX/UI 設計、原型設計、團隊協作 等工作。

為了讓大家更容易選擇兩個工具，本文中將詳細介紹 Figma 和 Sketch，並附有相關行業人員對他們使用軟件（Sketch 或 Figma）的感受以及選擇原因。

“Figma 是代理商的終極選擇 - 內置設計、原型製作和開發人員移交功能，所有這些都在一個完整的基於瀏覽器的解決方案中，並帶有與 Windows和iOS兼容的可選桌面應用程序！”

“

Figma vs Sketch：

這兩個平台是什麼？

將鼠標懸停在這兩個平台的登錄頁面上時，首先看到的是這兩個 UI 設計工具是如何 推銷自己 的。 Figma 通過 “Figma：協作界面設計工具” 保持簡單，而 Sketch 通過 “設計、協作、原型和移交” 進行了詳盡的闡述。

除此之外，我們可能被 Figma 的簡單性和隱含的易用性所吸引，同時對 Sketch 的多維功能感到好奇。

什麼是Figma?

Figma 是一個基於瀏覽器的設計工具，它為來自世界各地的人們提供了一些非常強大的設計工具。設計師們可以從全球所有不同的地理位置一起在同一個設計文件中工作——即使他們都在遠程工作。

這款基於矢量的強大設計工具可在瀏覽器上無縫運行。 Figma 能夠在三年內通過大量的實驗、測試和使用 WebGL 的圖像處理來構建它。 Figma 允許其社區成員構建和發佈數千個模板、插件和小部件，以增強工作流程併為 Figma 添加增強功能。我們可以使用這些Figma 社區插件更快、更高效地創建高級設計。

代理商更喜歡使用 Figma，因為它為他們的所有創作過程和努力提供了一個家——在瀏覽器上也是如此。 IDEO 等機構選擇 Figma 來運行從啟動到交接的設計項目。他們可以輕鬆地就想法進行頭腦風暴，就設計進行協作，然後他們還能夠使用這種協作式界面設計工具更快地完成工作和可交付成果的交付。

“今天，多虧了 Figma ，我們能夠在不同的內部和外部設計團隊中並行處理超過 15 個項目，從而保持我們設計的一致性和質量。”

——Repsol Design System的產品負責人Elena

“ Figma 已經釋放了我們與合作伙伴共同創造的能力——讓我們的團隊能夠按照對話的步伐前進。”

——Basic 的首席執行官 Matt Falk

Figma於2015年上市，是 第一個在 Web 上提供原生應用程序功能的設計工具。

（Airbnb、GitHub 和 Conde Nast 對 Figma 的看法）

什麼是Sketch?

Sketch 專為UI設計而打造，是一款真正的原生 Mac應用程序。 目前，這款獲得Apple設計獎的應用程序擁有超過一百萬用户，其中包括 Google、XBOX、保時捷、Facebook 等大牌。Sketch 還有一個網絡應用程序，但是不能在那裏創建設計，只能分享工作和收集反饋。

Sketch的人員遠程工作。其中有 100 個，都屬於 25 個不同的國家，沒有辦公室，只是遠程工作。這就是他們重視合作的原因。

Figma 和 Sketch 都允許網頁設計機構和網頁設計師私下工作以及分享他們的設計和協作。他們的文件格式使得開發人員可以輕鬆地構建插件和集成，並且任何人都可以將他們的工作移動到任何地方，而無需任何類型的平台鎖定作為其開放性質的一部分。

Sketch 提供了近700個現成的擴展，因此他們可以使用這些插件、人工智能助手和集成來使他們的工作更快更好，或者在其開放文件系統上創建自己的擴展集。這為 Sketch 提供了個性化和更個性化的用户體驗。

“我們在多個產品中使用 Sketch，有多個 UI/UX 設計師和圖形設計師。從登陸頁面到成熟的網站，應有盡有。我們喜歡縮放圖形是多麼容易。”

——Catena Media 的設計主管 Roberta Galea

“Sketch 具有這種驚人的能力，既歡迎初學者，又不受高級用户的限制。作為培訓許多設計團隊的人，這使得 Sketch 成為數字設計行業標準工具的明確選擇。”

——Sketch Master 的創作者 Peter Nowell

網頁設計機構和網頁設計師通常偏愛Sketch的靈活性， 允許靈活的矢量編輯和像素級精度的設計。 Sketch 還為設計師提供了許多導出選項，以便能夠在設計過程的每個階段創建和交流設計資產以及模型。

“

為什麼設計師們

從 Sketch 轉向 Figma？

現在越來越多的設計師從 Sketch 轉向 Figma。人們通常會在某些事情明顯更好並且切換非常簡單和容易時主動切換。

事實上，現在我們知道 Sketch 可以輕鬆導出文件 。另外還應該知道 Figma 允許你一開始就導入 Figma、Sketch 和其他圖像文件。這為從 Sketch 切換到 Figma 的設計師提供了一個簡單的開始，他們可以隨時開始在網絡上進行設計。

當然還有其他原因可以解釋為什麼設計師轉向 Figma：

01.Figma是一個多合一的設計工具

Figma是一個多合一的完整設計工具，擁有設計和協作所需的一切，它甚至為您提供了自己的 FigJam白板 ；而Sketch使用Zeplin、InVision 和 Abstract 等插件為您提供原型設計和開發人員移交等功能。Zeplin 允許協作式 UI/UX 設計，InVision 提供協作式白板，Abstract 是一個設計智能平台，也允許團隊協作。

02.Figma是基於瀏覽器的應用程序

Figma是一款基於瀏覽器的應用程序，可讓您在網絡上高效地進行創作和設計。在 Sketch 上，必須在需要頻繁版本更新的 Mac 應用程序上進行創建和設計，這很煩人並且會造成糟糕的可用性。據ClickZ稱，“79% 的用户最重視網站或應用程序的整體可用性。” .

此外，使用 Sketch，您需要在 Mac 應用程序上創建所有設計，並且只有在導出文件以供查看、共享、反饋和評論時才能在 Web 上進行協作。

在Figma上，一切都發生在一個地方，也就是網絡上。所以 Figma 使用起來更簡單，因此用户體驗更好。

03.Figma 允許更好的協作和團隊合作

Sketc 無法做到的事情是在一個地方完成所有事情的靈活性。使用 Figma，您可以通過共享設計文件輕鬆地在 Web 上進行實時協作。

一些網頁設計機構可能會質疑 Figma 是否真的可以匹配 Sketch、Zaplin 和 InVision 的綜合性能。為了回答他們，我們會説可以，為什麼呢？

因為 Figma 擁有所有功能，使設計工作流程更加順暢。例如，由於它自己的原型設計功能，它使您的線框/設計的顯示更加流暢。此外，與使用 InVision 或 Sketch 中的其他原型製作軟件相比，使用 Figma 自己的 FigJam 白板可以獲得更流暢的用户體驗。

Figma是一個完整的解決方案，從創建和協作設計文件，到原型交互，共享原型和文件的鏈接，通過評論收集反饋，以及訪問作為網頁設計機構所需的所有代碼片段和規範Web開發。

“

Figma vs Sketch：一目瞭然

Unfold的創意總監説：“比較Sketch和Figma 就像比較 Notepad 和 Google Docs。”但真的是這樣嗎？好吧，讓我們快速看看這些設計機構都在思考什麼：Sketch 還是 Figma？ Figma 顯然是贏家。

“

Figma vs Sketch：

詳細的功能比較

我們將在這裏詳細討論Sketch和Figma 工具，特別關注它們的 功能、定價、平台和性能 。

01.平台、兼容性和性能

讓我們看看 Figma 和 Sketch 如何在平台和性能方面相互競爭:

Figma

如果談論Figma的平台和性能，那麼Figma基礎架構的速度和穩定性必須提及。這個想法是為設計師提供頭腦風暴設計的速度，這樣他們就可以輕鬆地從 Figma 更廣泛的設計系統中繪製形狀、確定樣式和拖動 UI 元素。

Figma 的整個基礎架構團隊完全負責協作設計工具的最終性能、規模和可用性。儘管它是一個基於 Web 的應用程序，但它與桌面應用程序一樣快。

Figma 的工程團隊不斷致力於改進後端以使 Figma 更快。他們致力於通過在後端使用不同的策略、擴展數據庫和提高國際用户的性能來加快交互延遲。他們正在積極地在 Figma 設計工具中構建新的響應功能，以使其能夠提供卓越的平台體驗和定價。

Sketch

Sketch 平台是 MacOS 的原生平台，它還允許您在本地工作。至於兼容性， 使用 Sketch，您只能在 Mac 應用程序上創建您的設計。 但是，它允許用户在瀏覽器上查看、共享和評論。

很多設計機構提到他們首先必須在 Sketch 中創建設計，然後去 InVision 創建原型，收集反饋並在此基礎上進行構建。他們還告訴我們，然後他們必須去 Zeplin 才能上傳最終的、完全批准的項目。因此，儘管 Sketch 在其網站上説它是一個多合一平台，但我們從使用它的人那裏發現它不是。

Sketch 在 Apple Silicon 上的性能也非常快。如果您已經熟悉在 Mac 上使用應用程序，該平台將為您提供良好的用户體驗。Sketch 的人員還致力於為 Sketch 帶來新的更新和功能。他們還在主頁上展示了它們，因此您可以閲讀設計工具的最新動態。

02.定價

現在讓我們一一看看 Figma 和 Sketch 的定價和計劃。

Figma

當談到 Figma 設計工具平台時，您應該知道入門是多麼容易，並且您也可以免費使用它，並且可以在免費計劃中工作多久就可以工作多久。

Figma 有四個主要的定價計劃。有免費計劃，Figma專業計劃，Figma組織計劃，然後是 Figma Enterprise計劃。 Figma 專業計劃從每位編輯每月 12 美元起。

Sketch

Sketch 不提供免費計劃，但為您提供 30 天的試用期。只有在您共享文件並且您的團隊或客户必須查看它的情況下，查看者才免費。

有兩種定價計劃，標準和商業。標準計劃從每位編輯每月 9 美元起。它沒有像 Figma 這樣的企業級計劃。

03.界面、儀表板和繪圖工具

Figma

當您在 Figma 上創建帳户時，您會進入 Figma 儀表板，其中包含不同的選項卡和詳細信息。在這裏，您將能夠創建新文件、導入所需的任何文件、搜索現有文件以及查看所有最近的文件。

一旦你選擇創建一個新文件，你就會進入一個看起來非常簡單的編輯器，所以如果你從任何 UI 設計工具切換到 Figma，你不會不知所措。 工具欄為您提供了許多選項： 例如菜單、移動和縮放選項、框架工具、形狀工具、鋼筆工具、文字工具、手工具、評論工具、個人資料頭像、分享按鈕和播放和縮放按鈕。

通過菜單 ，您可以訪問插件、庫、不同的自定義選項、設置首選項、查看和更改帳户設置等。

使用框架工具 ，您可以創建新的畫板（就像在 Sketch 中所做的那樣）。您可以自由創建自定義的。但是，如果您想從右側面板上的默認選項之一中進行選擇，您也可以這樣做。請參考下圖瞭解：

框架工具還允許您訪問切片工具 。您可以使用此工具在框架上指定要導出的區域。

使用形狀工具，您可以創建基本的預定義形狀。如果要使用矢量錨點創建自定義形狀，可以使用鋼筆工具。鉛筆工具也可在鋼筆工具下拉菜單中使用。

使用文字工具，您還可以在設計中添加文本元素，而手形工具可讓您將鼠標懸停在設計文件周圍，而不會意外移動任何其他元素。您可以使用評論工具添加、查看和回覆評論。

您可以通過右側的用户個人資料頭像輕鬆查看在給定時間查看文件的人員（請參閲上圖）。接下來，您還可以使用共享按鈕，它會為您提供嵌入代碼或可以共享的鏈接。它還使您可以訪問共享設置。分享按鈕旁邊是播放按鈕，可讓您查看您擁有的任何原型。然後，您還有縮放選項。縮放設置還為您提供其他選項，如網格、輪廓、標尺等。

工具欄的中間包含項目名稱和文件名。您只需單擊它們即可編輯它們。您的設計文件在一個項目中（就像一個文件夾）。您可以更改項目名稱以將設計文件移動到另一個項目（文件夾）。

Figma 編輯器上有兩個面板。左側面板是圖層面板，其中包含已添加到設計文件的資源、圖層和頁面。而編輯器右側的屬性面板可讓您自定義框架大小、位置以及筆觸、顏色和效果等元素。它還向您顯示元素的代碼。這使您可以輕鬆地將不同的元素複製並粘貼到您網站的實際頁面上。

在上圖中，您可以看到您可能必須將不同的設計元素放在不同的頁面中。這通常發生在您從事大型設計項目時。您可以在 Figma 中創建許多頁面，並將所有相似的元素放在一個頁面上。

在 Figma 中，你有組件而不是符號。 Figma 編輯器左側的資產面板允許您將資產（或元素）保存為組件。這些可能包括表單、按鈕、導航、覆蓋、單元格和卡片。這非常有用且方便，因為您可以在設計文件中重複使用這些已保存的組件時訪問它們。

Sketch

在 Sketch 中，你的編輯器就是 Sketch 畫布。當您選擇在 Sketch 上創建新設計時，您將前進到 Sketch 畫布，您可以在其中創建設計。

Sketch 畫布是無限的，因此您不會用完空間。 但是，如果您喜歡在固定框架內工作，您可以選擇將畫板添加到畫布中。您可以放大和縮小畫布，並且您將以矢量模式查看它，這將允許您無限放大以進行儘可能多的細節。如果要處理每個像素，可以更改設置以在縮放時顯示像素。像素網格的情況也是如此。

標尺是隱藏的，因此您必須稍微更改設置才能顯示標尺。您可以通過單擊標尺上的任意位置來創建參考線。當您想要放置設計元素時，指南很有幫助。但是，它們只會在標尺可見時顯示。

Sketch 工具欄有畫布和組件視圖開關，它有一個 + 插入選項，有助於向畫布添加圖層。然後是創建符號的選項，它可以幫助您從不同的組和層創建可重複使用的資產。

您還可以在工具欄上找到用於組織圖層的選項，例如向後、向前、分組和取消分組。 您還可以使用工具欄上的編輯和工具選項來編輯圖層。

使用 Mac 應用程序的布爾運算，您可以創建複雜的形狀。union 選項可幫助您創建一個形狀，該形狀是多個形狀區域的總和。減法選項從它下面的區域中消除形狀的區域。相交選項從所選形狀相交的區域創建一個形狀。差異選項從原始形狀不相交的區域創建形狀。

然後是顯示您的原型的預覽選項。協作選項可讓您將文檔上傳到工作區。當您的文檔中有新的庫更新或缺少元素時，通知選項會通知您。

在 Sketch 界面中，您有一個檢查器，可讓您查找任何圖層的設置以及您正在使用的任何工具的控件。有一個圖層列表，您可以在其中找到圖層、頁面和畫板。您可以安排它們，甚至從這裏重命名它們。您可以在組件視圖中創建、管理和搜索符號、文本、圖層和顏色變量。還有一個插入窗口，您可以從中插入不同的元素。

至於繪圖工具，您可以使用矢量工具創建和使用預製形狀。您還可以使用鉛筆工具。您可以正常添加文本和圖像，也可以使用數據工具從不同的數據源將不同的圖像和文本添加到您的設計中。

04.團隊與協作

在實時協作方面，Figma 無疑是贏家。讓我們看看每個 UI 設計工具如何促進協作。

Figma

上圖展示了 Figma 可以實現的多人協作。事實上，Figma 工程總監Samir Goel説：

“ 傳統上，設計師在孤立的桌面應用程序中工作，這些應用程序只能在某些類型的平台上運行。如果其他人沒有下載並安裝該工具，他們將無法訪問該作品。設計人員必須導出文件並切換到其他第三方工具來進行原型設計和開發人員移交。當他們在這些系統中迭代和打亂文件時，很容易忘記最新版本，即使不是不可能，也讓協作團隊工作變得痛苦。”

他進一步補充道： “相比之下，Figma 中的每個設計文件都是一個活生生的實體，並且不斷髮展。該設計位於雲中並具有唯一的 URL，因此它是整個團隊的真實來源。整個組織的不同人員可以在設計上進行協作、提供反饋、簽到以瞭解工作的進展情況，或者標記實施過程中可能出現的問題。”

Figma 允許利益相關者查看原型，並允許開發人員從同一個文件中提取數據。這種原型設計和開發人員交接功能可以實現有效的團隊協作。多人可以同時處理同一個文件。 Figma 後端基礎架構使得複雜的形狀和大圖像不是問題。數據很容易通過網絡發送。 交互性能比任何桌面應用程序都要流暢得多。

Sketch

儘管 Sketch 可以進行實時協作，但它可能有點複雜。如果您的團隊想要在 mac Sketch 應用程序上實時協作，他們必須訂閲。沒有其他方法可以解決它。

來自您的網頁設計機構的人員只有在應該協作處理上傳到這些工作區的文件時才能查看將添加他們的工作區。您可以在帳户選項卡（草圖>首選項>帳户）中可見的個人資料圖片下查看您所屬的所有工作區。

您必須將設計文件上傳到共享工作區才能開始協作。請記住，只有擁有 Mac 應用程序兼容版本的人才能打開和編輯它。因此，總的來説，實時協作有兩個要求。首先，您的整個團隊 需要訂閲 mac 應用程序 ，其次， mac 應用程序的版本應該與您的兼容 。這使得協作變得棘手，因為經常會出現新版本，並且經常更新它們並不總是可能的，因為這需要很多時間。

05.網格和佈局

Figma 和 Sketch 都允許您在畫板上方和上方覆蓋網格。Figma 的框架更靈活，因為它們可以嵌套。讓我們看看 Figma 和 Sketch 在網格和佈局方面的比較。

Figma

Figma 允許您添加任意數量的網格、列和行。 使用 Figma，您可以非常關注細節。如何？只需將裝訂線設置為 0，您就可以從看到填充的列切換到只看到行。Figma 允許在框架以及單個組件上使用網格。這在 Sketch 中是不可能的。

現在，因為 Figma 允許在單個組件上使用網格，所以當您碰巧使用可調整大小的組件時，您可以使用這些網格作為填充指南。Figma 還允許您設置約束以指定設計元素在調整其容器大小時將如何移動甚至縮放。

但是，在 Figma 中，約束僅適用於框架內的元素，而不適用於組。這不是理想的事情，因為當您調整組大小時，約束不起作用。但是 Figma 允許您使用比組更強大的嵌套框架。

Figma 佈局網格的另一個好處是佈局約束適用於包含元素的單元格或列。這與嵌套框架一起為您提供了更多控制權，因為現在您可以控制屏幕各部分的單獨網格。

Sketch

Sketch 在網格和佈局方面也非常出色。它允許您同時使用方形網格和柱形網格。它還允許佈局網格中的行和列。

Sketch 還允許您設置約束。事實上，它具有與 Figma 幾乎相似的用户界面，用於設置和管理這些約束。在 Sketch 中，約束可以對組起作用，而 Figma 則無法做到這一點。這意味着即使您想調整組的大小，它們也會起作用。

Figma 是一個完整的基於瀏覽器的設計工具，而 Sketch 是 macOS 原生的。 Figma 還有一個桌面應用程序（與 windows 和 mac 兼容），讓設計師可以自由地在瀏覽器和應用程序上進行設計。

使用 Figma，實時協作更容易。使用 Sketch，只有具有應用程序兼容版本的應用程序訂閲者才有可能。此外，您必須將文件上傳到共享工作區才能啟動協作。

Figma 有課程和設計應用程序來幫助設計師入門，而 Sketch 有文檔形式的資源。

Figma 有更好的繪圖工具，帶有矢量網絡和響應式網格和佈局。Sketch 有矢量路徑，合理的網格和佈局，選項比 Figma 少。

最後，Figma 起價為每月 12 美元 ，而 Sketch 起價為每月 9 美元 。

因此，如果您有一個網頁設計機構，並且需要有效的團隊協作，我們相信使用 Figma 會更好。相比之下，如果您是個人設計師，或者有一個非常小的團隊，幾乎不需要實時協作，您可以選擇使用 Sketch。您可以在 macOS 上同時使用 Figma 和 Sketch。如果你想在瀏覽器上做所有事情，那麼 Figma 就是你應該使用的！

（部分圖文來自網絡，若有侵權，請聯繫刪除。）