國(guó)外設(shè)計(jì)工具Figma/Adobe XD和Sketch的對(duì)比分析
互聯(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è)能涵蓋我們所需功能的工具。
對(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)懸停功能,需要用到代碼編輯器,所以從長(zhǎng)遠(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è)長(zhǎng)長(zhǎng)的演示文稿,主題是是對(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 的支持率也是五五開,陣營(yíng)已經(jīng)分成了兩部分。經(jīng)過討論,我們決定回到研究階段,互相研究對(duì)方陣營(yíng)的工具。我們都知道兩個(gè)產(chǎn)品的痛點(diǎn):XD 沒有分頁(yè)功能,而 Figma 的框架有時(shí)出現(xiàn)混亂,無法輕易解決。第二天,我們照例在咖啡時(shí)間,討論與工作無關(guān)的話題,但 XD 和 Figma 之間的火藥味又在談話間出現(xiàn)了,這是個(gè)信號(hào),促使我們更快地得出結(jié)果。
回到原點(diǎn)
第二天晚上,我嘗試用 XD 做一些簡(jiǎn)單的設(shè)計(jì)??梢杂盟O(shè)計(jì)著陸頁(yè)或者簡(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
全站高品質(zhì)素材免費(fèi)下載!