設計資訊：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 就是你應該使用的！

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