推動設計軟體:從 Adobe XD 到 Figma

Siko Yang
新加坡商鈦坦科技
6 min readJun 25, 2024

--

我 2020 年加入鈦坦科技時,已經使用 Adobe XD 一段時間,年底時,曾經有新人推薦大家使用 Figma ,最後因為檔案維護的關係,無疾而終。

對我來說 2022 年底,是最適合推動的時機點,Adobe 與 Figma 併購消息轟動了全球,看準這個機會,順利地與主管提案 Figma。
但!!!這一整個流程並不簡單,因為公司的設計團隊所在辦公室在不同城市,光是要大家體驗不熟悉的軟體就花了不少心力啊~

Adobe 與 Figma 併購

先從小範圍開始影響,再擴散至大範圍

過去曾討論是否改使用 Figma 時,當時的我是選擇「維持使用 Adobe XD 」,原因很簡單,因為我不熟悉 Figma,我不知道他有多方便。
而在隔年,我被 Figma 大幅度更新的影片所吸引,就開啟了這一趟旅程。

改變習慣或新的事物,是需要有個契機,先體驗後,才更容易接受。

從團隊內部開始改變,在部門中發酵

一開始我傻傻地對部門主管說:我希望部門先使用 Figma!
被主管問了幾句,原地啪啪打臉:那你怎麼跟跨部門的設計團隊合作?檔案要怎麼維護?

既然 UI design 會有檔案協作的考量,那先從不影響設計檔案的 UI flow 開始實驗吧!
我與團隊將需求要做的 UI flow 從 Adobe XD 改使用 Figjam 來製作,讓部門先從小步開始體驗起,真切地讓大家體驗到能為工作效率有所提升。

擴大影響力,走出部門外:不如你也一起來辦場 Designer workshop for Figma 吧!

在鈦坦,我們樂於分享新工具與改變,於是我將團隊的改變分享給其他部門的設計師們,但只有分享 Figma 多好,其實他人感受不大,那就辦一場 workshop 讓大家都操作體驗他的好處吧!

邀請 3 位對 Figma 有興趣的設計師們,參與這場 workshop 的講師,我們分四大類做介紹:

  1. UI design: Frame, auto-layout, community
  2. UI KIT: Style, variants, component properties
  3. Prototype: User flow, component prototype, custom prototype
  4. Design Handoff: Version history, Branch, handoff to develop

為確保大家了解兩者工具的不同,我們依據 Adobe XD 與 Figma 的操作差異做更深入的分享,並討論哪些功能是可以解決目前使用 Adobe XD 已知的問題哪些功能是可以解決 Figma 沒有,而 Adobe XD 有的,藉此來降低大家對轉換工具的抗拒。

最後在 workshop 結束後,邀請參與者填選問卷,可以更了解大家在「接受轉換工具的程度」以及針對轉換工具「最擔心的是哪個部分」。

我們參考的線上課程以及 Figma 官方教學文件做 workshop 文件

儘可能準備全面性的考量,與副總經理提案 Figma

老闆最在乎以及設計師們最擔心的不外乎是

  1. 📐 Pros & cons:使用 Figma 的好處與壞處。
  2. ✅ 可行性:轉換工具意願度、設計師的學習成本、確保設計師可以正常使用在工作上、Adobe XD 與 Figma 的檔案轉換問題、是否有其他角色需要帳號
  3. ⏰ 時機點:什麼時候訂購 Figma、規範清楚不可使用 Adobe XD 的時機點
  4. 💰 錢:最重要的一點。購買的方案、與現有工具的金額差異,全公司的設計師們加起來一年要花多少錢。

如何「確保多位設計師可以正常使用在工作上」呢? 開課!

於是我又邀請 5 位志同道合的同事們,從 0 建立教學文件,1 位主講師,4 位課程助教 (協助主講師其他章節 & 教課時在學生旁邊協助),更深入地講解原理以及 Figma 架構、快捷鍵等等。上完課程後,需要繳交作業,來確保學習的設計師都有理解跟上手。

課程及作業繳交都順利結束後,即開始著手添購全公司設計師們的帳號,並宣佈開始使用 Figma 的時間。

Adobe XD 與 Figma 的檔案轉換問題

我們找尋了不少 Plugins,沒有一個是特別適合的,不錯的要付費,但又無法確保好用,最終我選擇 「Copy SVG Code」in Adobe XD

Copy SVG Code in Adobe XD

舊的檔案這麼多怎麼辦? 團隊訂好檔案轉換的約定🤝
當新的需求需要使用到 Adobe XD 的舊設計稿時,團隊就要建立到 Figma 內,並把搬遷的時間考量進去。至少要確保跨職能的角色能在 Figma 看到文件以及編輯文件。
如果未來不會開發的設計稿,因為價值不高,就不花人力搬遷。

我們團隊轉換到 Figma 至今已經一年多了,依舊還沒全部搬完,但對團隊來說,都是預期的,因為我們有更多有價值的事情需要做。

很感謝這一路來有很多願意幫助我的設計朋友們,這些準備都是花熱情跟時間建立出來的,我才得以讓事情順利推動下去。

雖然 2024 年中, Adobe 與 Figma 因監管機關的反對宣布併購失敗,比較可惜的是,看不到雙方資源共用的機會(例如 Adobe Illustrator/Adobe Photoshop 素材庫共用到 Figma),但在這事件中我算是受惠者之一吧!因為宣布併購時, Adobe 就公佈不再投入資源在 Adobe XD ,轉而更專注在 AI 技術上,讓我可以更有力的推動這一整件事情,同時也讓公司的設計師們增加自己在市場的競爭力。

--

--