在 UXtools 最新發(fā)布的 2023 年設(shè)計(jì)工具調(diào)查報(bào)告中，全球幾千名設(shè)計(jì)師做出了一個(gè)選擇：Figma 是最受歡迎的 UI 設(shè)計(jì)工具。它的獨(dú)特之處在于其強(qiáng)大的協(xié)作功能、直觀的界面以及不斷創(chuàng)新的特性。

*報(bào)告見(jiàn)：
https://uxtools.co/survey/2023/

Figma 官網(wǎng)

總的來(lái)說(shuō)，F(xiàn)igma 受歡迎的原因表現(xiàn)在以下三個(gè)方面：

（1）高效的協(xié)作體驗(yàn)

Figma 提供無(wú)與倫比的協(xié)作性，設(shè)計(jì)團(tuán)隊(duì)可以實(shí)時(shí)協(xié)作、共同編輯，并且能夠輕松完成項(xiàng)目。這對(duì)于現(xiàn)代分布式工作環(huán)境下的設(shè)計(jì)團(tuán)隊(duì)至關(guān)重要。

（2）靈活的云端設(shè)計(jì)

作為一款基于云的設(shè)計(jì)工具，F(xiàn)igma 具有卓越的靈活性，允許設(shè)計(jì)師在各種環(huán)境中工作，無(wú)需擔(dān)心版本同步或設(shè)備兼容性問(wèn)題。

（3）高效的組件資源構(gòu)建

Figma 支持創(chuàng)建組件資源庫(kù)、共享組件庫(kù)等，支持自定義組件屬性，設(shè)置變體、添加組件描述信息等，能夠讓團(tuán)隊(duì)高效復(fù)用組件資源，提升協(xié)作效率。

對(duì)筆者來(lái)說(shuō)，我也蠻喜歡Figma的，但又必須承認(rèn)一個(gè)事實(shí)：Figma作為一款國(guó)外設(shè)計(jì)工具，在國(guó)內(nèi)使用還是存在一定的劣勢(shì)，主要體現(xiàn)在網(wǎng)絡(luò)訪(fǎng)問(wèn)限制、數(shù)據(jù)隱私和安全、本地化支持等，尤其是每次使用Figma加載太慢都讓人很焦慮。。。

所以除了Figma，筆者也給大家分享下其他10款UI設(shè)計(jì)工具，看看和 Figma 比較有哪些區(qū)別呢？

1、摹客 DT

摹客 DT 是一款深受?chē)?guó)內(nèi)設(shè)計(jì)師喜愛(ài)的國(guó)產(chǎn)設(shè)計(jì)工具，讓團(tuán)隊(duì)高效協(xié)同工作，提升團(tuán)隊(duì)協(xié)作效能。在線(xiàn)實(shí)時(shí)協(xié)同，靈活設(shè)置項(xiàng)目權(quán)限，輕松搞定團(tuán)隊(duì)資產(chǎn)管理難題。

官網(wǎng)：
https://www.mockplus.cn/dt?hmsr=wentt02yjl

摹客DT官網(wǎng)

價(jià)格：免費(fèi)計(jì)劃

學(xué)習(xí)難度：低

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：??????????

產(chǎn)品亮點(diǎn)：

（1）構(gòu)建企業(yè)級(jí)設(shè)計(jì)規(guī)范

摹客 DT 可將元素存為組件快速?gòu)?fù)用，常用的顏色、文本樣式、圖層樣式也可以保存為資源，支持將當(dāng)前項(xiàng)目資源庫(kù)共享至團(tuán)隊(duì)。

（2）自動(dòng)布局+智能布局，創(chuàng)建彈性畫(huà)板

簡(jiǎn)單可控的界面布局功能，輕松定義相關(guān)元素的間距和對(duì)齊方式，可快速搭建橫向/縱向自適應(yīng)設(shè)計(jì)，設(shè)計(jì)效率大幅提升。

（3）評(píng)論工具，快速收集設(shè)計(jì)意見(jiàn)

內(nèi)置評(píng)論模式，可對(duì)設(shè)計(jì)稿進(jìn)行打點(diǎn)評(píng)論，無(wú)需借助其它工具即可完成設(shè)計(jì)評(píng)審。

（4）開(kāi)發(fā)模式，無(wú)縫銜接設(shè)計(jì)開(kāi)發(fā)

開(kāi)啟“開(kāi)發(fā)模式”，即可直接在設(shè)計(jì)項(xiàng)目中查看和復(fù)制設(shè)計(jì)稿樣式、尺寸、顏色等屬性。

2、Sketch

Sketch 是一個(gè)強(qiáng)大而靈活的 UX 和 UI 設(shè)計(jì)平臺(tái)，專(zhuān)為協(xié)作設(shè)計(jì)而構(gòu)建。長(zhǎng)期以來(lái)，它一直被認(rèn)為是行業(yè)標(biāo)準(zhǔn)工具，非常適合初學(xué)者和高級(jí)設(shè)計(jì)師。

官網(wǎng)：https://www.sketch.com/

Sketch 官網(wǎng)

價(jià)格：標(biāo)準(zhǔn)訂閱 $10/月/人（按年付費(fèi)），$12/月/人（按月付費(fèi)）

學(xué)習(xí)難度：中

使用環(huán)境：僅限 macOS

推薦星級(jí)：??????????

產(chǎn)品亮點(diǎn)：

（1）矢量編輯

直觀的矢量編輯工具和可編輯的布爾運(yùn)算，支持形狀繪制、路徑編輯、填充和描邊等常見(jiàn)的矢量操作，使用戶(hù)能夠輕松創(chuàng)建和編輯各種設(shè)計(jì)元素。

（2）組件規(guī)范

一旦創(chuàng)建了組件規(guī)范，設(shè)計(jì)師可以在整個(gè)設(shè)計(jì)中重復(fù)使用它們，并且對(duì)一個(gè)組件的修改會(huì)自動(dòng)應(yīng)用到所有使用該組件的地方，從而提高了設(shè)計(jì)的一致性和效率。

（3）插件生態(tài)系統(tǒng)

Sketch 擁有豐富的插件生態(tài)系統(tǒng)，設(shè)計(jì)師可以通過(guò)安裝插件來(lái)擴(kuò)展軟件的功能。這些插件可以幫助設(shè)計(jì)師完成各種任務(wù)，例如自動(dòng)生成樣式表、導(dǎo)出設(shè)計(jì)資源或者與其他工具進(jìn)行集成，從而提升工作效率和靈活性。

3、Adobe XD

Adobe XD 是Adobe公司推出的全面的UX/UI設(shè)計(jì)和原型制作工具。提供直觀的用戶(hù)界面和強(qiáng)大的設(shè)計(jì)工具，支持多頁(yè)面設(shè)計(jì)和交互原型制作。與其他Adobe創(chuàng)意云應(yīng)用程序（如Photoshop和Illustrator）無(wú)縫集成，方便設(shè)計(jì)師在工作流程中的轉(zhuǎn)換和協(xié)作。

官網(wǎng)：
https://helpx.adobe.com/support/xd.html

Adobe XD 界面

價(jià)格：提供免費(fèi)試用，提供付費(fèi)訂閱 $9.99/月

學(xué)習(xí)難度：中

使用環(huán)境：Windows、macOS

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）全面的設(shè)計(jì)工具

Adobe XD 提供了豐富的設(shè)計(jì)工具，涵蓋了從原型設(shè)計(jì)到用戶(hù)測(cè)試的整個(gè)設(shè)計(jì)流程。設(shè)計(jì)師可以使用這些工具創(chuàng)建高保真的交互式原型，并實(shí)時(shí)預(yù)覽設(shè)計(jì)效果。

（2）共享和協(xié)作

Adobe XD 支持團(tuán)隊(duì)協(xié)作，設(shè)計(jì)師可以輕松地共享設(shè)計(jì)文件，協(xié)同編輯，以及通過(guò)實(shí)時(shí)協(xié)作功能進(jìn)行設(shè)計(jì)評(píng)審。這使得多人團(tuán)隊(duì)能夠更加流暢地協(xié)同工作，提高生產(chǎn)力。

（3）組件和樣式管理

Adobe XD 支持組件和樣式的創(chuàng)建和管理，使得設(shè)計(jì)師可以更有效地保持設(shè)計(jì)的一致性。通過(guò)組件，設(shè)計(jì)師可以輕松地更新和同步設(shè)計(jì)中的重復(fù)元素。

4、UXPin

UXPin 是一款專(zhuān)業(yè)的用戶(hù)體驗(yàn)（UX）和用戶(hù)界面（UI）設(shè)計(jì)工具，旨在幫助設(shè)計(jì)師創(chuàng)建高質(zhì)量的交互原型和設(shè)計(jì)。它提供了全面的設(shè)計(jì)和協(xié)作功能，適用于團(tuán)隊(duì)合作和產(chǎn)品設(shè)計(jì)過(guò)程中的快速迭代。

官網(wǎng)：https://zeplin.io/

UXPin 官網(wǎng)

價(jià)格：提供免費(fèi)試用，提供付費(fèi)訂閱基本計(jì)劃 $19/月/人

學(xué)習(xí)難度：中

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）高保真原型設(shè)計(jì)

UXPin 允許設(shè)計(jì)師創(chuàng)建高保真的交互原型，展示用戶(hù)體驗(yàn)的各個(gè)方面，包括頁(yè)面過(guò)渡、交互動(dòng)畫(huà)等。借助狀態(tài)、變量、條件交互和自動(dòng)布局，您的原型將在可用性測(cè)試期間完美模仿最終產(chǎn)品的體驗(yàn)。

（2）為設(shè)計(jì)師設(shè)計(jì)的代碼組件

UXPin 使用與開(kāi)發(fā)人員構(gòu)建產(chǎn)品完全相同的 UI 代碼組件進(jìn)行設(shè)計(jì)。設(shè)計(jì)師無(wú)需編碼技能，只需拖放元素即可。

（3）讓設(shè)計(jì)易于理解

設(shè)計(jì)符合WCAG標(biāo)準(zhǔn)的包容性產(chǎn)品。使用對(duì)比度檢查器和色盲模擬器等內(nèi)置功能測(cè)試您的原型。

5、Marvel

Marvel 提供設(shè)計(jì)和構(gòu)建數(shù)字產(chǎn)品所需的所有核心功能，包括線(xiàn)框圖、原型設(shè)計(jì)和切換設(shè)計(jì)規(guī)范。而且，憑借其用戶(hù)友好且直觀的平臺(tái)，它是初學(xué)者理想的 UX/UI 設(shè)計(jì)工具。

官網(wǎng)：

Marvel 官網(wǎng)

價(jià)格：提供免費(fèi)試用，個(gè)人專(zhuān)業(yè)版 $12/月（按年計(jì)費(fèi)）

學(xué)習(xí)難度：中

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）原型制作

Marvel 支持創(chuàng)建真實(shí)的原型，無(wú)需代碼，在不到 5 分鐘的時(shí)間內(nèi)，可以將設(shè)計(jì)模型轉(zhuǎn)換為交互式在線(xiàn)原型，而無(wú)需編寫(xiě)任何代碼。

（2）快速交付開(kāi)發(fā)

設(shè)計(jì)師開(kāi)發(fā)人員交接只需要一個(gè) URL，可以立即為設(shè)計(jì)稿生成 CSS、Swift 和 Android XML，從而縮短設(shè)計(jì)到開(kāi)發(fā)過(guò)程的時(shí)間。開(kāi)發(fā)人員也可以下載資源并復(fù)制原型的 CSS、Swift 和 Android XML 代碼，簡(jiǎn)化整個(gè)設(shè)計(jì)開(kāi)發(fā)人員的交接流程。

（3）特色集成

Marvel 集成了常用的協(xié)作工具，包含 Jira、Maze、Confluence、Lookback 等，讓團(tuán)隊(duì)協(xié)作更加高效。

6、Origami Studio

Origami Studio 是 Facebook 創(chuàng)建的一款免費(fèi)設(shè)計(jì)工具。它主要是一個(gè)原型設(shè)計(jì)工具，使設(shè)計(jì)人員能夠快速構(gòu)建和共享交互式界面。

Origami Studio 官網(wǎng)

價(jià)格：免費(fèi)

學(xué)習(xí)難度：高

使用環(huán)境：僅限 macOS

推薦星級(jí)：????

產(chǎn)品亮點(diǎn)：

（1）輕松編輯動(dòng)態(tài)布局

提供自適應(yīng)布局，可以輕松創(chuàng)建響應(yīng)其內(nèi)容的復(fù)雜界面。

（2）構(gòu)建交互式組件

組件是 Origami 中的一項(xiàng)強(qiáng)大功能，允許在文檔的畫(huà)板、屏幕甚至多個(gè)文檔中重復(fù)使用組件，類(lèi)似 Sketch 內(nèi)的symbol 。

（3）支持導(dǎo)出原型錄屏

可以直接在 Origami 中捕獲、修剪和導(dǎo)出原型的視頻，制作原型 demo 方便快捷。

7、UiZard

UiZard 是一個(gè) UI 設(shè)計(jì)平臺(tái)，適合那些想要?jiǎng)?chuàng)建數(shù)字產(chǎn)品但不一定擁有高級(jí)設(shè)計(jì)專(zhuān)業(yè)知識(shí)的人。它是一款全面的 UX 和 UI 工具，涵蓋構(gòu)思、低保真線(xiàn)框圖、快速原型設(shè)計(jì)、UI 樣式和實(shí)時(shí)協(xié)作。

UiZard 官網(wǎng)

價(jià)格：提供免費(fèi)試用，專(zhuān)業(yè)版 $12/月/人（按年計(jì)費(fèi)）

學(xué)習(xí)難度：低

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????

產(chǎn)品亮點(diǎn)：

（1）無(wú)限輕松設(shè)計(jì)

根據(jù)文本提示創(chuàng)建 UI 設(shè)計(jì)，輸入設(shè)計(jì)理念，嘗試選擇一個(gè)主題，Autodesigner 將在幾秒鐘內(nèi)生成一個(gè)多屏幕、可編輯的模型。

（2）協(xié)作式用戶(hù)體驗(yàn)

與團(tuán)隊(duì)實(shí)時(shí)設(shè)計(jì)，支持添加評(píng)論，高效協(xié)同辦公。

（3）人工智能設(shè)計(jì)

現(xiàn)在，可以直接通過(guò)從 Uizard 編輯器生成新屏幕、圖像和主題來(lái)推進(jìn)任何 Uizard 項(xiàng)目。Autodesigner 1.5 可以使用簡(jiǎn)單的想象力和文字描述進(jìn)行設(shè)計(jì)。

8、Framer

Framer 是另一款全能設(shè)計(jì)工具，具有強(qiáng)大的原型設(shè)計(jì)功能。Framer 將自己定位為“唯一基于網(wǎng)絡(luò)技術(shù)構(gòu)建的原型設(shè)計(jì)軟件”，并且可以在畫(huà)布上添加預(yù)制組件和交互式元素來(lái)構(gòu)建原型，尤其適用于設(shè)計(jì)與開(kāi)發(fā)之間有協(xié)作需求的項(xiàng)目。

Framer 官網(wǎng)

價(jià)格：提供免費(fèi)試用，基礎(chǔ)版 $15/月

學(xué)習(xí)難度：高

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）綜合設(shè)計(jì)和開(kāi)發(fā)

Framer 為設(shè)計(jì)師和開(kāi)發(fā)者提供了一個(gè)共同的平臺(tái)，促進(jìn)了設(shè)計(jì)和開(kāi)發(fā)之間的協(xié)作。

（2）強(qiáng)大的交互功能

Framer 提供了豐富的交互和動(dòng)畫(huà)功能，適用于注重用戶(hù)體驗(yàn)的項(xiàng)目。

（3）React 組件

Framer 支持 React 組件，可以使用 React 的語(yǔ)法和組件庫(kù)，使設(shè)計(jì)與開(kāi)發(fā)更加無(wú)縫連接。

9、Proto.io

Proto.io 是一款功能豐富的原型設(shè)計(jì)工具，旨在幫助用戶(hù)創(chuàng)建高保真的交互式原型，用于移動(dòng)應(yīng)用和Web應(yīng)用的設(shè)計(jì)和演示。

Proto.io 官網(wǎng)

價(jià)格：提供免費(fèi)試用，自由職業(yè)者 $24/月（1位用戶(hù)，按年計(jì)費(fèi)）

學(xué)習(xí)難度：高

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）高保真原型設(shè)計(jì)

Proto.io 支持用戶(hù)創(chuàng)建高保真的交互式原型，包括頁(yè)面過(guò)渡、動(dòng)畫(huà)效果、用戶(hù)交互等，以模擬最終產(chǎn)品的使用體驗(yàn)。

（2）實(shí)時(shí)協(xié)作和共享

Proto.io 支持實(shí)時(shí)協(xié)作，設(shè)計(jì)師和團(tuán)隊(duì)成員可以同時(shí)在同一項(xiàng)目上協(xié)同工作，并方便地共享原型鏈接進(jìn)行演示和反饋。

（3）特色集成

支持將 Sketch、Figma、Adobe XD等三方文件導(dǎo)入到 Proto.io ，會(huì)保留所有圖層和原型鏈接，輕松為圖層添加交互和動(dòng)畫(huà)，能進(jìn)一步增強(qiáng)設(shè)計(jì)效果。

10、Webflow

Webflow 是一款云端的網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)工具，允許用戶(hù)創(chuàng)建響應(yīng)式的網(wǎng)站，而無(wú)需編寫(xiě)代碼。Webflow 結(jié)合了設(shè)計(jì)和開(kāi)發(fā)，使用戶(hù)能夠設(shè)計(jì)、建立和發(fā)布具有交互性的網(wǎng)站。

Webflow 官網(wǎng)

價(jià)格：提供免費(fèi)試用，基礎(chǔ)版 $14/月（按年計(jì)費(fèi)）

學(xué)習(xí)難度：高

使用環(huán)境：Web 應(yīng)用，基于瀏覽器使用

推薦星級(jí)：????????

產(chǎn)品亮點(diǎn)：

（1）可視化設(shè)計(jì)

Webflow 提供強(qiáng)大的可視化設(shè)計(jì)工具，用戶(hù)可以通過(guò)拖放方式創(chuàng)建頁(yè)面，調(diào)整布局、顏色和字體，實(shí)時(shí)預(yù)覽設(shè)計(jì)效果。

（2）交互式動(dòng)畫(huà)

設(shè)計(jì)師可以通過(guò) Webflow 創(chuàng)建豐富的交互式動(dòng)畫(huà)，為網(wǎng)站增加生動(dòng)感，而無(wú)需編寫(xiě)代碼。

（3）響應(yīng)式設(shè)計(jì)

Webflow 支持響應(yīng)式設(shè)計(jì)，設(shè)計(jì)師可以在不同設(shè)備上優(yōu)化頁(yè)面布局，確保網(wǎng)站在各種屏幕尺寸上都能良好顯示。

以上是除 Figma 以外，給大家推薦的其他UI設(shè)計(jì)工具，每款工具都具有獨(dú)特的特點(diǎn)和優(yōu)勢(shì)，看了這些設(shè)計(jì)工具，那你認(rèn)同 Figma 是最受歡迎的 UI 設(shè)計(jì)工具嗎？可以談?wù)勀愕南敕▇