阅读 2031

【Shopee IconBot】Figma + Gitlab CI 一键交付 SVG 多色图标库

作者:赵恒锐,毕业于新加坡南洋理工大学,现 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”等命令更新图标库。更新后直接引入对应图标即可使用。

如今,我们团队越来越多的项目开始使用这套自动化流程来交付图标,它不仅节约了项目初期搭建图标库的时间,而且为后期的更新维护减少了沟通成本。图标库的更新发布每一个环节都有通知机器人给各方同步,让设计师与开发之间的合作更加顺畅高效。

文章分类
前端
文章标签