為什麼需要 Magicul
2023 年初,評估了專案規模和軟體功能,決定從 Adobe XD 轉到 Figma。Figma 的優點很多:可以增開 pages、專案和團隊的結構便於管理檔案、auto layout、components 功能……。
唯一、也是最大的痛點,是搬移至 Figma 的工程。專案已經開案在 Adobe XD 上執行一年,累積了許多畫面。
嘗試過將 Adobe XD 檔案匯出成 SVG 檔案再匯入 Figma 進行搬移,確實可以保留向量圖層和文字。但一部分的圖片、矩形圓角無法保留。而原本的元件設定,則是都變成向量圖形了。
這代表所有的元件都要重新製作,再一個一個貼回頁面。對於一個已經有數百個頁面的專案來說,需要很多維護時間,不只很枯燥、也會影響專案進度。為了工作時間能更有效利用,在搜尋解法的途中,找到了 Magicul 轉檔服務。
Magicul 介紹
2020 年出現的產品,主要提供設計檔案轉換服務。也有備份、免安裝查看設計檔案等其他服務。
網站上可以看到支援的檔案種類蠻多的!
收費方式
根據檔案數量收費,有些方案會限制檔案裡面畫版(artboards)的數量。
使用流程
將檔案存成本機檔案後,到 Magicul 網站進行上傳。
接著介面會引導你去付款,完成後就會開始轉換檔案。
經歷漫長的等候後會出現下載連結。檔案中畫版越多的等待時間可能會更長。
轉換結果
接下來是期待的轉檔結果!在 Figma 內檔案匯入後開啟。各項內容的轉換結果如下:
成功的部分
- 圖片
- 矩形的圓角設定值
- 圖片遮罩
- 大多數向量圖形
- 文字
損毀/變形/無法轉出的部分
- 部分向量圖形(較複雜的 logo)
- 虛線
- components
- 部分顏色的透明度
- 圖層的 staking & padding 設定
有比 SVG 好一些,但仔細看還是有些東西壞掉了 QQ。接著來談談我最在意的 components 部分。
Components 轉換
相容於 Figma instances 內容覆寫(overrides)規則的有成功轉換。原本的 state 會被拆成分別的 components,然後用 “/ “區隔。
推測是由於 Adobe XD overrides 自由度比較高。無法相容於 Figma overrides 規則的,在轉換後,就會變成普通的群組。
……以上這段晶晶體真是太難懂了,讓我們看看範例
假設 Adobe XD 原始檔案如下圖。我在 instance 加了一張向量圖。
經過轉檔後,右邊這個 instance 會變成 group。因為 Figma 不允許 instance 新增圖層。
拿去轉檔的專案檔案有很多這類為了情境客製的 dialog,打開檔案發現轉出來都變成 group 的時候,我真是……欲哭無淚啊。
比較 XD 和 Figma 的 overrides 規則
個人覺得最大的差異是圖層。 Adobe XD 允許 instances 變更圖層順序、也可以新增和刪除圖層。這個規則讓做設計稿的時候很自由,但是對於維護元件一致性,就有些負面的影響(你懂的)。
以下分別是 Adobe XD 和 Figma 官方的說明,給大家參考。
Adobe XD 官方文件關於 components 與 overrides 的說明
Figma 官方的 overrides 說明
總結
Magicul 的轉檔服務比較適用雙方編輯規則類似的軟體(或是你的檔案很單純,沒有設定太多東西),轉出的檔案確實比 SVG 保留了更多內容,只是不太適合我的情境。
官方有出一篇文章是關於 XD to Figma 檔案轉換 ,但裡面寫得比較樂觀一點,好像檔案可以完美轉移一樣~
另外,他的客服蠻有誠意的,如果付款轉檔後結果不理想,還是跟客服溝通其他補償方案。所以有需要的人還是可以勇敢嘗試喔!
-Lynn Kuo