【Shopee IconBot】Figma + Gitlab CI 一鍵交付 SVG 多色圖示庫

語言: CN / TW / HK

作者:趙恆銳,畢業於新加坡南洋理工大學,現 Shopee 金融商家團隊前端開發工程師

鳴謝:吳辰沐,畢業於新加坡國立⼤學,現 Shopee 設計師;李成熙, 現 Shopee 金融商家團隊前端 Leader

Shopee Iconbot 是一個 Figma 外掛,可以直接將現有檔案的所有 SVG 圖示匯出併發布到 NPM 圖示庫,從而幫助設計師一鍵完成圖示的交付。

痛點

製作這套解決⽅案的原因,是最近團隊在開發項⽬ icon 元件庫時,與設計師的協同遇到諸多不便。

Figma 設計稿中時常有多達上百個 Icon,按照之前的流程,我們需要將圖示⼀個個從 Figma 匯出,拷⻉⾄項⽬⾥,並對圖示程式碼依次做⼀些改造,以⽀持⼀些定製的功能(如更換顏⾊等),流程冗⻓⽽複雜。

在後續的更新維護時,我們每次都需要與設計師核對 icon 的增減修改,並對所有更新的 icon 重複上述流程。這顯然不是一個高效可持續的合作方式。

已有的解決方案

為了優化這個流程,我和設計師一起考量了市面上現有的圖表庫解決方案。考量的標準主要有載入速度,專案對圖示庫的功能要求,和協同的效率。

IconFont

IconFont 將⼀套⽮量圖示集以字型⽂件的形式封裝,並通過 CSS 的 @font-face 作為 Web Font 調⽤。它的優點是輕量靈活,但一些劣勢也很明顯。例如 IconFont 一個專案裡只⽀持全部單⾊圖示或全部多色,不能兩者共有。⽽且瀏覽器會把 IconFont 當做⽂字來對待,⽽⽂字是抗鋸⻮的,這就導致有時候⽣成的圖形跟預期存在差異。同時 IconFont 對 Figma 直接匯出的 svg 的相容性不好,不支援 svg 裡的 fill-rule=“evenodd”,幾乎所有的鏤空圖示都需要設計師特殊處理,增加了很多工作量。

SVG

這時 svg 格式圖示⾛⼊我們的視線,它既能滿⾜現有圖⽚的功能,⼜是⽮量圖,訪問性也不錯,有利於 SEO 和⽆障礙,在效能和維護性⽅⾯也⽐ IconFont 要出⾊。在不考慮 IE8 及以下瀏覽器相容的前提下,SVG ⽆疑是當前圖示交付格式的最佳選擇。在參考了 Juuun ⼤⼤ (Ref:使⽤ Figma + GitHub Actions 完成 SVG 圖示的完全⾃動化交付)的實現⽅式後,我認為基於這個思路,增加多⾊圖示和 Gitlab 的⽀持,並優化⼯作邏輯,即可實現高效圖示交付。 ⽬前項⽬引⼊ SVG 圖示有兩種方式,⼀種是 Inline SVG(又稱“內聯 SVG”,指將 SVG 元素直接嵌入 HTML),另⼀種是SVG Sprite (類似於 CSS 中的 Sprite 技術。圖示圖形整合在一起,實際呈現的時候準確顯示特定圖示。一般使用 symbol 元素搭配 use 來準確定位)。⼤量圖示在單⻚同時渲染時,SVG Sprite ⽐ Inline SVG 渲染速度更快,但是項⽬中大多數⻚⾯的圖示數處於 5 - 15 個之間,此時兩者的速度差異微乎其微。但重要的是,SVG Sprite 不⽀持漸變⾊,這個特性在某些項⽬中是必要的,故為了良好的相容性,我決定採⽤ Inline SVG 作為圖示庫的構建⽅式。

全新的交付方式: Shopee IconBot

基於我們與設計師合作中的痛點,和對現有的解決方案的調研,我總結優化出了⼀套適用於我們團隊專案的 Figma 圖示的⾃動化釋出流程:Shopee IconBot。 從此交付圖示不再是件頭疼的事,只需設計師輕輕⼀點,Figma ⽂件⾥的 Icon 都將轉換為輕巧易⽤的 React 元件並⾃動釋出⾄ NPM,釋出成功後開發者即可更新依賴並按需引⼊這些元件。除此以外,Shopee Iconbot ⽀持靈活的調整圖示的顏⾊和⼤⼩,⽀持多⾊圖示,設計師只需根據需求對多⾊圖示的⽂件名進⾏配置,即可⽣成多⾊圖示元件。

它是如何工作的

Gitlab 的 8.0 版本開始就全⾯集成了 Gitlab-CI, 可以通過編寫指令碼實現 CI/CD 流程,我們可以輕鬆地設計⾃⼰的 Pipeline 來實現⾃⼰的⾃動化⼯作流。另外,Figma 提供了⼤量基於 HTTP 的 API 和外掛平臺,可供⽤戶輕鬆獲取 Figma ⽂件中的資料。這使得這套⾼效的交付⽅式成為可能。Shopee IconBot 的工作流程如下圖:

當設計師完成圖示元件的設計後,開啟 Figma 外掛,更新版本號並點擊發布。外掛將⾃動從 Master 拉取更新分⽀,這將觸發 Gitlab Pipeline 去獲取當前 Figma ⽂件中所有圖示並⾃動執⾏指令碼處理 SVG ⽂件並轉換為 React 元件(在這裡會使用到 svgo 外掛精簡 SVG 程式碼,並根據是否被配置為多色圖示對 SVG 程式碼的“fill”等屬性進行修改。再這之後採用 Inline SVG 方式生成 React 元件)。Pipeline 執行成功後會向 master ⾃動發起 Merge Request,待開發者 Approve MR 之後,master 分⽀將會⾃動執⾏ Gitlab CI 部署 Gitlab Page 並將圖示庫釋出到 NPM。

對比 Juuun 大大的方案,我的這套流程將 Merge Request 放在了獲取 SVG 圖示之後,這樣在審批 MR 的時候開發者能夠清楚地知道這次更新對哪些圖示做出了改動,以確保圖示庫的準確性。另外,這套流程中把對 SVG 處理的方式進行了優化,支援多色圖示、漸變色圖示等。除此以外,Shopee IconBot 外掛儲存與 Figma 檔案關聯,支援為不同的檔案配置不同的 Gitlab 倉庫。

如何使用 Shopee IconBot

  1. 在 Figma Community 中下載 Shopee IconBot 外掛 (目前外掛尚未開源,待功能完善後會對外發布)

  2. 設計師在 Figma 檔案中精心打磨圖示並按要求配置

圖示元素需要被設定為Main Component,大小為40 x 40:
複製程式碼

名字以“colored”結尾的圖示,將被視作多色圖示,顏色資訊不會被刪除,開發不可以更換圖示元件的顏色。
複製程式碼

名字不以“colored”結尾的圖示,將被視作單色圖示,生成元件時會將預設顏色去除,開發根據使用場景自定義顏色。
複製程式碼
  1. 開發在 Gitlab 中建立圖示倉庫,將地址和 token 提供給設計師。設計師在 Figma ⽂件中開啟 Iconbot 外掛,輸入圖示倉庫地址和 Token 後,點選“Next”。

4.設計師設定版本號並點選“Push to Gitlab”,如果配置了 webhooks 連結會⾃動傳送更新提醒

  1. 外掛將圖示自動轉換為 React 元件並向圖示庫 master 分支發起 Merge Request

  1. 開發收到 MR 提醒後,對更新的圖示進行 Review,Approve 後圖標庫將自動釋出到 NPM 並生成 Gitlab Page。

  1. 開發者收到釋出成功提醒後,即可使用“npm update”等命令更新圖示庫。更新後直接引入對應圖示即可使用。

如今,我們團隊越來越多的專案開始使用這套自動化流程來交付圖示,它不僅節約了專案初期搭建圖示庫的時間,而且為後期的更新維護減少了溝通成本。圖示庫的更新發布每一個環節都有通知機器人給各方同步,讓設計師與開發之間的合作更加順暢高效。