互聯(lián)網(wǎng)行業(yè)一直在高速前進，擁抱變化已成為日常工作的一部分。設(shè)計工具和插件的更新周期越來越短，我們從 Photoshop 過渡到 Sketch，隨后迎接了 XD 和 Figma 的誕生。恰逢后疫情時代的到來，遠程辦公模式被推上了舞臺，同時，協(xié)作問題被擺到的重要的位置，許多設(shè)計團隊面臨著工具迭代的問題，本文敘述了作者帶領(lǐng)團隊選擇工具的真實歷程，拆分了主流設(shè)計工具的背景和優(yōu)劣勢，說明了分析思路、調(diào)研過程和實踐經(jīng)驗，給出了對未來方向的推測。希望對你有所啟發(fā)～

更新?lián)Q代的時間到了，我們的團隊又將是否淘汰 sketch 的議題提上日程。這個想法不是第一次出現(xiàn)，但這一次似乎勢在必行。去年夏天我們也曾考慮要不要替換sketch，但最終還是覺得這件事不值得團隊大費周章，我們決定等待這款軟件不斷迭代，成為我們期望中的完美設(shè)計工具。

對于 Telesoftas 的設(shè)計師來說，這是第二次革命 —— 第一次是很久以前從 Photoshop 轉(zhuǎn)向 Sketch，這在當(dāng)時是一個重大的事件，是革命性的進步?，F(xiàn)在的轉(zhuǎn)變我們可以稱之為第二次設(shè)計革命，也是第二次“巨變”。

了解 Sketch 簡史，變革不可避免

團隊中的大部分人都習(xí)慣了 Sketch，在轉(zhuǎn)型之初，Sketch 是一個非常值得稱贊的工具。我們都為它的便利感到興奮，互相分享著各種小技巧和快捷操作。最讓我感興趣的功能是組件（symbols），以及如何在其中進行嵌套，它幫助我們節(jié)省了很多時間，提高了一致性，加快了整個工作流程。然而，當(dāng)我在做更大的項目時，我看到了嚴(yán)重的性能問題，Sketch 開始經(jīng)常崩潰，一些作品因此丟失。這是一個繁瑣的過程，考驗著你的神經(jīng)。

使用 Sketch 時，團隊協(xié)作一直是個痛點，為此你必須使用插件或其他功能與團隊同步，而當(dāng)我們試圖將設(shè)計從插件推送到云端時，Sketch 也頻繁出現(xiàn)故障。一個設(shè)計工具，競?cè)恍枰@么多插件才能發(fā)揮最基本的功能時，這太離譜了。在設(shè)計協(xié)作上，我們嘗試過 Plant、用于與客戶或 PM 共享設(shè)計的 Invision、用于創(chuàng)建動畫的 Principle 和用于與開發(fā)人員共享的 Sympli，有時也用 Anima 來創(chuàng)建智能自適應(yīng)布局。由于 Sketch 是行業(yè)標(biāo)準(zhǔn)工具，它所缺少的產(chǎn)品功能為新業(yè)務(wù)的產(chǎn)生創(chuàng)造了很多機會。

但這些好用的服務(wù)，帶來的額外費用也很可觀。每年更新 Sketch 需要 99 美元， Invision 團隊許可費用每年約 300 美元，Plant 每年約 144 美元，Sympli 每個賬戶 108 美元，由于設(shè)計團隊需要很多個賬戶協(xié)同，Sympli 的成本就更高了。不僅僅是價格的問題，整個工作流程在多種工具中切換，工作效率適得其反。

Sketch 為何掉隊

我認(rèn)為 Sketch 的主要問題是它太依賴各種各樣的插件。有些插件非常棒，我很感謝社群在創(chuàng)造有趣的解決方案時提供的幫助。然而有時我覺得這些插件應(yīng)該成為 Sketch 原生的功能。你必須使用所有插件來實現(xiàn)設(shè)計輸出，這對于一款設(shè)計工具來說十分可笑，也許正因為插件填補了漏洞，使 Sketch 丟掉了本應(yīng)具備的創(chuàng)造力。

現(xiàn)在又很多產(chǎn)品正在試圖追趕，用原生功能取代了插件?？吹皆驮O(shè)計功能正在不斷更新迭代：自動布局、控件和樣式管理，云空間，我感到十分慰藉。

團隊版 Sketch 燃起希望之火

當(dāng)我們關(guān)注 Sketch 博客、郵件資訊的時候，我們又為 2020 年即將到來的團隊版  Sketch、云服務(wù)和承諾的協(xié)作功能感到興奮。當(dāng)去年看到這次更新的資訊時，我相信這將為 Sketch 插上趕超 XD 和 Figma 的翅膀，它們在功能和提供的體驗上與 Sketch 相差甚遠。但當(dāng)我們更新了團隊版 Sketch，體驗了云服務(wù)，卻對這些功能的實現(xiàn)感到失望。Sketch 云傳輸速度很慢，唯一可以被替代的只有 Plant，但原型設(shè)計、協(xié)作的功能上 Sketch 依然后勁不足。

不幸的是，團隊版 Sketch 并沒有符合我們的高期望，所以我們開始尋找其他替代方案。我是 Sketch 的忠實粉絲，享受它帶來的極佳用戶體驗，但正如我之前提到的，其他工具與 Sketch 相差甚遠。所以我們列出所有需求，去尋找一個能涵蓋我們所需功能的工具。

>sketch相關(guān)素材

對工具和作業(yè)的研究

我從調(diào)研 "Framer X" 開始，嘗試用它做一些小項目。當(dāng)然在此之前，我花了一些時間在 YouTube 和文章上了解它的信息。這個工具的主要價值在于，你可以用真實的組件來做設(shè)計，功能齊全，比如地圖、視頻播放器、表單都像一個真實的產(chǎn)品一樣在工作。它的交互性和原型設(shè)計的真實性帶給我不小的驚喜，此外還有它 "商城"，有豐富的組件可以下載，這些組件能為你的設(shè)計增色不少。

但還是熟悉的問題，當(dāng)一個產(chǎn)品過于依賴插件，我不能說這個工具易用。例如，如果你想實現(xiàn)懸停功能，需要用到代碼編輯器，所以從長遠來看，你需要對 React 了如指掌才行。

試用完這個工具，我認(rèn)為它無法取代 Sketch，它是一個合格的原型設(shè)計工具，但離舒適的體驗還有一定距離。在我們的評分表中，它得了低分，第一個退出備選名單，他們能提供的內(nèi)容很有趣，我相信在未來，它有無限可能性，但不是現(xiàn)在。

Figma 橫空出世

在 Framer 的調(diào)研結(jié)束后，我下載了 Figma，出乎我意料的是 Figma 是免費的！幾乎每天我都在大量使用一款名為 "Miro" 的工具來組織研討會，與客戶、團隊進行協(xié)作，一邊進行研究。在我?guī)缀鯖]有查閱有關(guān) Figma 的資料的情況下，多用戶協(xié)作對我來說卻沒有太大的門檻。我甚至開始覺得，它可以取代我的得力助手 "Miro "，一個全能型的工具橫空出世。

Figma 雖小，五臟俱全 —— 它有智能組件、智能布局，甚至比 Sketch 的效果更好。原型、動效甚至矢量設(shè)計也非常出色，以至于我產(chǎn)生了 Figma 可以替代 Adobe Illustrator 的大膽想法。我就像一個開著法拉利的孩子，對使用 Figma 感到興奮，沉浸在他們的 YouTube 頻道，研究他們的所有可能性。

Figma 的插件與社群

Figma 的第一個亮點是插件，這些插件感覺就像對現(xiàn)有工作流程的輔助，而不是像在 Sketch 中那樣為產(chǎn)品查缺補漏。作為一個產(chǎn)品，F(xiàn)igma 是完整的。在研究 Figma 的時候，我盡量做到不偏不倚，但我很快就愛上了它。

另一方面，F(xiàn)igma 的協(xié)作也令人驚艷，與使用 Miro 的體驗一樣好。我知道這個工具有一段時間了，也聽過大家對它的評價，但現(xiàn)在我才感受到它有多好。它是最接近我們需求列表的 "全能型" 工具，有了它，我們不再需要在 Invision，Sympli，Plant，Anima，甚至 Miro 之間來回切換。不僅如此，他的演示功能也毫不遜色。

最終的決定

圖片來源：Tomas Urlikas

隨著研究接近尾聲，意想不到的事情發(fā)生了。Adobe XD 在評分系統(tǒng)中的得分和 Figma 不相上下，當(dāng)我開始對它進行深入研究的時候，發(fā)現(xiàn)它無所不能，并且它還有一個優(yōu)點 —— 它在我們已有的 Adobe 訂閱計劃中發(fā)揮了很好的作用，并且與其他 Adobe 產(chǎn)品兼容得很好。幾年前他剛上線的時候我就嘗試使用過，而如今他已經(jīng)煥然一新，XD 一定進行了無數(shù)次試錯和迭代。它甚至有在線協(xié)作功能，雖然是在 Beta 版中，但我們試用的時候，它的體驗也很很棒。

是時候做一個演示了，因為我們目前生活在的 "后疫情" 時代，所有的演示都是遠程完成的。我準(zhǔn)備了一個長長的演示文稿，主題是是對，我使用了現(xiàn)在的模式和 Figma，我提出了 Figma。我演示了所有最令人關(guān)注的功能，在一些細節(jié)上，F(xiàn)igma 確實輸給了 Adobe XD。不得不承認(rèn) XD 是一個相當(dāng)有競爭力的對手，它的動畫和原型制作更勝一籌。例如浮層的創(chuàng)建，在 Figma 中，你需要使用疊加層來創(chuàng)建浮層，而在 XD 中，只需點擊幾下就能實現(xiàn)，高效便捷。

現(xiàn)在進入了白熱化的狀態(tài)，這兩個產(chǎn)品的得分旗鼓相當(dāng)不相上下，團隊里 XD、Figma 的支持率也是五五開，陣營已經(jīng)分成了兩部分。經(jīng)過討論，我們決定回到研究階段，互相研究對方陣營的工具。我們都知道兩個產(chǎn)品的痛點：XD 沒有分頁功能，而 Figma 的框架有時出現(xiàn)混亂，無法輕易解決。第二天，我們照例在咖啡時間，討論與工作無關(guān)的話題，但 XD 和 Figma 之間的火藥味又在談話間出現(xiàn)了，這是個信號，促使我們更快地得出結(jié)果。

>figma相關(guān)素材

回到原點

第二天晚上，我嘗試用 XD 做一些簡單的設(shè)計?？梢杂盟O(shè)計著陸頁或者簡單的移動端界面，但處理大型的 SaaS 產(chǎn)品還是有些欠缺。作為一個工具，它是個好產(chǎn)品，簡單易用，有你所需要的所有功能，而且發(fā)展很快，幾年時間就能超過 Sketch，并且背靠強大的 Adobe 公司 —— 它擁有日常工作所需的所有資源。

同時，我的同事 Liudas 也加入了 Figma 的在線研討會，他們從各個角度介紹了 Figma，并展示了亮點功能，例如你可以在原型模式下?lián)碛锌扇我馔蟿拥牡貓D。在這次研討會上，預(yù)覽了一些即將更新的功能 ，讓我們有機會一飽眼福，很顯然 Figma 一直在追逐 Adobe XD 在原型制作道路上的步伐。通過這次對 Figma 當(dāng)前功能和未來拓展性的復(fù)盤，我們確信 Figma 是最適合我們的，這為最終的結(jié)論做了鋪墊。

又一次的會議發(fā)生了，但這次一致決定 Figma 肯定會成為我們下一個設(shè)計工具。我們還達成了一個共識，那就是如果某個項目需要更高級的原型或動畫，可以用 XD 來完成。另外，我們?nèi)匀挥?Adobe 的訂閱，所以它不會從我們的工作中消失。

結(jié)論

我們做出了選擇，等待我們的將是什么？這將是一個很大的變化，我們的設(shè)計過程將更流暢地協(xié)作，更加開放，更加便利?，F(xiàn)在我們對所有正在進行的項目都有一個概覽，隨時可以進入項目查看詳情。我們在早期階段盡可能的讓客戶和開發(fā)人員參與進來，如果沒有 Figma 的協(xié)作是很難做到的。在早期階段讓大家參與進來，并且有開放的設(shè)計文化，更容易得到以用戶為中心的決策。

設(shè)計工具的未來

在 2019 年的設(shè)計工具調(diào)研中，Sketch 仍然是所有人中的第一名，F(xiàn)igma 緊隨其后。但是，“明年你最想嘗試哪款工具” 的答案是 Figma，這已足夠說明問題。當(dāng)下遠程工作的需求迫切，XD 或 Figma 正處在彎道超車的時刻。我們無法準(zhǔn)確地看到未來，但可以預(yù)測設(shè)計工具界的下一個大事件是與 AI。

原文：https://uxdesign.cc/figma-vs-adobe-xd-how-we-picked-our-next-design-tool-e8a8f5d24cca

作者：Tomas Urlikas

譯者：Claire Chen