捨棄Zeplin使用Figma與工程師協作陣痛期之路

Josie
Sep 29, 2021

--

新進公司大概一個月左右,發現要整理前人留下的 zeplin 資料有點痛苦,原因大致為以下幾點:

  1. zeplin上的screen有新有舊,常出現設計師忘了傳最終版設計稿,無法百分百同步導致後人整理起來很困難,因為不知道上面哪些是舊的哪些是新的screen
  2. 以前的設計師不只一個,分類方法也不統一,一個是用專案來分類,一個是用類型來分類,兩者各有優缺,但都不是最好統整screen的方法
  3. zeplin的component 或screen每改名一次就要重傳一次,不然只要名字不同系統就自動認為是不同元件或畫面
  4. 在figma裡設定好的colorstyle在zeplin上抓不到,明明同樣是#fff, 但一個存成style, 一個是dislink的#fff,在zeplin上就認定兩個顏色不同,超級問號
  5. zeplin在windows系統不能多選screen, mac就可以!(太氣了)

因為上述種種原因,我下定決心改用figma取代zeplin與工程師協作,但隨之而來的是種種問題…

1 . Figma 沒有提供 Android 切圖的 5 bitmap images(mdpi, hdpi…)檔名, 也沒有webp格式

解決方式:

請Android工程師下載plugins: Android Resources Export & Android WebP Generator,缺點是但須先開啟工程師的edit權限才能使用(如果怕工程師會動到設計稿的可能得考慮)

Android Resources Export 能夠切出 5 bitmap images外,也提供9 patch圖片的生成,但使用前須記得將元件設定為export才能抓取到,否則他會一次跑整個檔案所有可導出的元件,讓整個檔案當掉還無法中止…

Android WebP Generator 可以生成webp的格式,但缺點是在存檔之前還得自己設定Filename, 多了一個複製貼上元件名的工程

2. Export assets 的檔名不符合 Zeplin Android & iOS 個別命名規範

(Android是使用snake case:英文小寫+下底線, iOS是使用Pascal Case)

解決方式:

這個問題就比較難辦了,雖然有plugin能做到批次改名的功能,但如果元件不是用 “ / ” 分類,對UI設計師來說就難以統整元件。查遍網路上其他人是怎麼做的,最後使用了一種較為土法煉鋼的方式:把要導出的component另外複製instance,並另開一個export sheet,把instance改名後設定導出。

以上,大概是目前從zeplin轉移到figma發現的種種痛點,希望進步日新月異的Figma能夠早日改善這些問題啊!不然整理 design system 時又要兼顧 handoff 的需求真的快陣亡…

--

--