Figma vs. Sketch vs. Axure——基於任務的評論

已發表: 2022-03-11

在最近的 Toptal 信息圖：“最佳 UX 工具”中，我們檢查了市場上廣泛的數字設計工具，其中大多數能夠協助個人 UX 設計師的日常任務。

其中三個特色工具 Sketch、Figma 和 Axure 已經產生了忠實的追隨者，因為它們擅長 UX 設計工作流程中的特定工作。

但是，這些工具的性能因手頭的設計任務而異。 我們不會在比較表中列出它們的所有功能，而是通過基於任務的審查來確定它們的有效性。

以下是競爭對手的快速概覽：

  • 位於荷蘭海牙的 Bohemian Coding 草圖。 Sketch 是一個僅限 Mac 的應用程序。
  • Figma 的 Figma 位於加利福尼亞州舊金山。 Figma 通過瀏覽器在任何操作系統上運行。
  • Axure by Axure Software Solutions 位於加利福尼亞州聖地亞哥。 Axure 有 Windows 和 Mac 版本。

我們將根據每個工具在開箱即用的情況下執行日常設計任務的能力進行評分——無需插件、附加組件或第三方應用程序。 任務包括：

  1. 做概念構思
  2. 創建低保真交付物
  3. 創建高保真可交付成果
  4. 創建交互式原型
  5. 創建設計系統
  6. 交付給發展

注意：當工具具有完成任務所需的幾乎相同的功能時，獲勝者將屬於更易於使用且交付速度更快的工具。 如果該決定似乎太接近了，那麼第三方支持就是決勝局。

任務：做概念構思

構思是產生新想法的創造性過程，通常由設計師、開發人員、產品所有者和項目經理組成的跨學科小組完成。

目標是在考慮基本要求和任何已經在建設中的工作之後，創造新的想法以在產品中使用。 例如，團隊可能會進行概念構思會議，為新應用創建一組 MVP 功能，或在現有應用中創建下一代功能。

展示概念構思設計合作的照片：草圖與 figma
使用紙、便籤和投影儀進行的大型集體構思會議。

許多設計師在白板或紙上進行概念構思。 但是，構思也是以數字方式完成的，尤其是在分佈式辦公室中。 概念生成是一項團隊運動，包括產品所有者/經理和前端開發人員等非設計師。 促進協作且易於使用的工具最適合此任務。

獲勝者：Figma

Sketch 和 Axure 都提供雲共享服務，但無法與合作者實時共享屏幕。

在 Figma 中共享的文件可以實時加入，並顯示每個參與者的標記光標。 單擊工具欄中的代表性頭像可將視圖切換到該人的視角，從而可以輕鬆快速地分享想法。 此外，Figma 不要求非設計師擁有副本； 他們打開文件鏈接並開始工作。

其他白板協作工具可能比 Figma 更適合概念構思，例如 Mural 和 Realtimeboard，但對於設計工具，Figma 比 Sketch 和 Axure 好一英里。

任務：創建低保真交付物

低保真交付物通常以線框或數字草圖的形式製作，可以由其他設計師和產品所有者分發和審查。 根據 UX 流程，開發人員和其他利益相關者也可以查看它們。

線框旨在顯示應用程序的基本結構，以便在花時間創建高保真模型之前定義交互模型。

Axure vs Sketch 線框界面設計生成
線框是從概念構思會議生成的 - 使用低保真線框驗證產品設計理念。

可以通過專門用於該任務的工具來創建低保真線框，包括 Balsamiq Mockups、Moqups 和 FluidUI。 但是，Sketch、Axure 和 Figma 都可以完成相同的任務，尤其是在用戶創建線框組件庫時。

由於線框通常用作應用程序或頁面的初始 UI 佈局，因此它們是經常變化的單色粗剪。 這有助於控制利益相關者的期望。

對於線框，易用性、交付速度和修改是必不可少的，因為它們允許設計人員有效地製作變體設計。

獲勝者：阿克蘇爾

Axure vs. Sketch：Axure 線框拖放組件
在 Axure 中，您可以在不創建組件的情況下拖放線框創意。

Axure 在這裡獲得了勝利，因為它在安裝軟件後立即預先打包了用於線框圖的組件。 Sketch 和 Figma 擁有讓您創建線框的工具，但您需要繪製線框組件或下載包含它們的文件。 無論哪種情況，它們都必須集成到符號 (Sketch) 或組件 (Figma) 庫中，才能像 Axure 組件一樣拖放。

Axure 有許多用於創建低保真交付物的第三方庫，Sketch 有大量可以下載的免費和付費文件，而 Figma 的公共資源仍處於起步階段。

一旦設計人員創建了線框組件庫，這三個工具便勢均力敵。 請注意，Axure 的組件具有參數化和可調整的屬性，但是對於靜態線框，當庫可用時，所有三個工具都表現良好。

任務：創建高保真可交付成果

高保真可交付成果源於從低保真線框圖中收集的反饋和學習。 它們是顯示顏色、視覺細節和應用程序最終設計的模型。

Figma vs Sketch：Figma 設計高保真模型
高保真模型通常用於利益相關者的演示。 （Pramiti R Khan）

高保真還意味著屏幕模型已經準備好演示並展示給客戶、內部高管和其他非設計師利益相關者。 擅長此任務的設計工具具有添加所需的所有功能，以創建最終面向客戶的可交付成果的表示。

這包括對對象填充和描邊的控制、添加陰影和漸變填充等效果以及將藝術導出為易於消化的格式（png、pdf、jpg）。

獲勝者：Figma

Figma 審查高保真交付物

Sketch 和 Figma 具有幾乎相同的工具集，可以創建高保真模型，但 Figma 的交互模型更精細，工具從一開始就更易於使用。 這兩種工具都可以輕鬆訪問高級編輯和布爾命令，例如 Join、Intersect、Union 和 Subtract。 雖然 Sketch 的插件支持允許第三方創建附加功能，但這些工具在安裝後無法立即使用。

這三個工具都具有允許創建自定義對象的功能，但 Axure 使得訪問命令有些困難。 上面提到的編輯在工具欄上不可用。 僅當選擇多個對象時，才能通過上下文菜單獲得訪問權限。

此外，Figma 的矢量網絡使使用線條工具變得輕而易舉。

誠聘美國全職自由 UI 設計師

任務：創建交互式原型

交互式原型可以像紙質原型一樣粗糙，也可以像已更改以探索新功能的現有應用程序的分支版本一樣詳細。 通常，交互式原型允許用戶在屏幕之間導航並使用菜單和列表等功能。

Figma vs Sketch vs. Axure 交互式原型功能
Sketch、Axure 和 Figma 都提供在移動設備上運行交互式原型的應用程序。

對於許多設計師來說，在展示他們的作品時，一個基本的交互式幻燈片就足夠了。 對於移動應用程序尤其如此，因為簡單的轉換提供了足夠的設備交互來解釋設計。

Figma 的原型模型集成良好且易於使用，並且由於它是基於雲的實時應用程序，因此在文件更新時無需刷新 HTML 頁面。

有時，利益相關者希望實時數據連接來加載帶有真實數據的原型，以測試設計的可擴展性，但絕大多數設計師現在幾乎不需要復雜的原型。

獲勝者：Figma

Figma 設計草圖替代品
Figma 中的原型製作類似於其他在屏幕之間使用連接箭頭的工具。

Sketch 和 Figma 都支持簡單的原型設計，帶有“對像到畫板”鏈接和一組有限的過渡。 插件有助於增強 Sketch 的簡單原型設計能力，但在為原型提供強大的交互模型方面，Axure 是最強大的。

任務：創建設計系統

設計系統雖然在 UX 設計領域相對較新，但已經存在了幾十年。 它們包括一種共享的設計語言、組件、資源和指導方針，使團隊能夠協作並做出更好的決策。 設計系統庫通常以網站的形式實現，並充當整個公司產品的單一事實來源。

獲勝者：Figma

雖然可以在任何程序中構建組件庫，但它們都不允許設計人員在開始時撥動開關並生成可行的組件庫。 Axure 可以生成一個帶有自定義組件的 HTML 頁面，但是沒有辦法查詢單個組件來找出顏色值、大小和其他屬性。

使用任何這些工具構建設計系統仍然是一個手動過程。 但是，有一些 Sketch 插件（例如 Google 最近發布的 Material Design 插件）和至少一個用於 Figma 的第三方工具。

Figma 獲得了勝利，因為協作是良好設計系統的核心。 來自多個學科（設計、開發、質量、內容）的公司員工需要訪問設計系統庫，許多人將添加到同步到共享庫的設計組件文件中。 任何人都可以使用 Figma，而不僅僅是許可證持有者，從而可以輕鬆訪問和添加到共享文件。

Figma 設計系統支持符號和庫 - figma vs sketch
這個例子展示了在 Figma 中組織的設計系統的基本元素。 （設計代碼.io）

任務：交付給開發

當 UI 設計人員完成創建界面時，他們有責任將設計文件移交給開發人員，以便完成項目。 但移交不僅僅是簡單的數據交換，它是設計師交流其工作原理的機會，從而幫助開發人員將形式與功能結合起來。

有幾十種切換方法和更多的第三方工具可以方便地從 Sketch 和 Figma 文件中查詢紅線和對象信息（參見 Avocode 和 Zeplin）。 但是，在此比較中，我們正在查看原始設計工具，然後再添加插件或其他應用程序。

有趣的是，UX 設計系統的興起減少了對這種形式的移交的需求，因為已發布的組件庫是開發人員的唯一真實來源。 他們可以提取組件的確切佈局和設計信息，而無需等待交付物或 UX 諮詢。

此外，在設計系統的構建過程中，從設計文件中的對象獲取信息可能會有​​所幫助，因此了解 CSS 是一件好事。

Sketch 允許您選擇對象並使用上下文菜單來“複製 CSS 屬性”，但這並不理想。 Figma 通過在屬性面板中提供一個“代碼”選項卡來為選定的對像生成 CSS、iOS 或 Android 值（開發人員可以在僅查看或原型模式下使用此功能），從而完成了一項公平的工作。

獲勝者：阿克蘇爾

草圖原型工具開發者交接——axure 與草圖
Axure 的 HTML 和文檔生成對話框有很多有用的選項。

目前，只有 Axure 擁有強大的“生成器”，可以生成完全可發布的 HTML 文件、Word 規範，甚至 CSV 格式的報告以導入電子表格。 雖然結果不是設計庫，但該應用程序確實提供了有用的開發人員移交材料。

整體設計工具獲獎者：Figma

從數字上看，Figma 是這次比較的贏家，主要是因為它的協作性和跨平台可用性。 隨著越來越多的團隊使用需要在前端開發和設計之間更緊密集成的設計系統，Figma 的實時協作和實時嵌入功能為其提供了很大的優勢。 不利的一面是，Figma 是一個在線應用程序，出於安全原因可能會被禁止在企業中使用。

Axure 位居第二，因為它具有開箱即用的預構建組件、強大的交互式原型設計功能和文檔生成功能。 在極少數情況下，當公司需要訪問真實世界的數據存儲以查看特定功能的行為時，Axure 是最好的或唯一的選擇。

Sketch 可能排在最後，但一旦用戶利用了該工具可用的許多插件和資源，它就非常強大，可以根據設計團隊的需求進行定制。 這裡需要注意的是，每次 Sketch 更新後都必須更新插件，並且作為僅限 Mac 的應用程序，使用 Windows PC 的公司無法使用它。

本文中回顧的所有三個工具本身就很強大。 但是，每個都有局限性。 由各個設計師和團隊來確定他們的工作流程需求，權衡每個程序的優缺點，並做出適當的選擇。

• • •

進一步閱讀 Toptal 設計博客：

  • 拋棄 MVP，採用最小可行原型 (MVPr)
  • Figma 作為設計工具的力量
  • 如何創建草圖樣式指南、庫和 UI 工具包
  • 了解設計系統和模式
  • 線框之死。 直接到高保真！