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

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

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

了解 Sketch 簡(jiǎn)史，變革不可避免

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

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

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

Sketch 為何掉隊(duì)

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

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

團(tuán)隊(duì)版 Sketch 燃起希望之火

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

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

>sketch相關(guān)素材

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

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

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

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

Figma 橫空出世

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

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

Figma 的插件與社群

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

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

最終的決定

圖片來源：Tomas Urlikas

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

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

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

>figma相關(guān)素材

回到原點(diǎn)

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

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

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

結(jié)論

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

設(shè)計(jì)工具的未來

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

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

作者：Tomas Urlikas

譯者：Claire Chen