icon自动化交付

背景:

目前项目icon库的管理较为混乱,视觉设计人员缺少对icon 的集中管理能力(列表查询、新增、修改、删除),项目新增一个icon时, 需要开发人员从figma 视觉稿中一个一个导出新增的svg icon, 手动将其增加到我们处理svg icon的项目中,把它变成内联svg 代码的 Vue 组件,然后发布一个新的icons npm 包版本才可以在项目中使用,过程繁琐,大大降低了开发效率。

解决思路:

加强设计人员对icon 库的管理能力,降低icon库增删查改时,开发人员的手工重复操作,提升开发效率

方案一:

新增一个svg icon 在线管理平台,视觉设计人员可增加/修改/删除 icon,开发人员直接从列表中复制组件代码即可使用

优点:

  1. 项目更新icon无需发版,设计人员更新即上线

缺点:

  1. 需要搭建一个svg icon 在线管理平台,前期投入开发成本较大
  2. 视觉设计人员更新步骤较为繁琐,需要先在figma 上进行设计,然后导出svg文件,提交到icon 在线管理平台上
  3. 即更即上线带来了一些线上风险,比如视觉设计人员删除了个别icon,导致线上环境获取不到icon 报错
  4. 可复用性低,当有另外一个平台也需要管理icon 时,需要新增一套前端和后台代码,和上线一个新的平台,可以通过建文件夹区分项目的方式

方案二:

使用figma + gitlab CI 完成SVG图标的完全自动化交付

实现:

  1. 开发一个figma 插件,完成与icon库 gitlab仓库的绑定,用于从 Master 拉取更新分⽀,和后面提交merge request,(为了可复用到其他项目,提高插件的可复用性,将云桌面项目icons 库的gitlab 仓库地址和 gitlab token 不写死在插件中,而是采用前端表单方式进行提交,并存储在localStorage中)

  2. 开发一个icons 转换成 vue 组件的仓库,在这里会使用到figma api,获取页面中的svg组件,然后使用svgo 插件精简 SVG 代码,并根据是否被配置为多色图标对 SVG 代码的"fill"等属性进行修改,在这之后采用 Inline SVG 方式生成 Vue 组件)

  3. 联合视觉,将所有的icon放到figma一个公共模块上,并在完成icon上传时点击发布触发流程提交 merge request,开发合并分支后自动发版,最终开发在项目中更新包版本即可使用。

优点:

  1. 视觉设计人员更新步骤简单,不用离开自己进行设计工作的平台,直接在figma上进行设计svg icon,然后全部设计完毕,打开插件,填写新的版本号和修改内容,就能一键提交merge request了;

  2. 更新风险较小,当设计人员更新icon 库,提交merge request后,需要由开发人员合并,并且开发人员需要在项目中进行icon库的更新,按照自测、送测流程才会更新到线上环境

  3. 可复用性高,当有另外一个平台也需要管理icon 时,只需新增一套前端代码,然后修改figma 文件地址、figma toekn 等配置即可

综上所述,最终选择了方案二

落地成效:

原先开发人员更新icon库流程需要的4步流程,精简为1步(同意merge request),并且从始至终都不需要设计师和开发离开自己熟悉的工作环境,也不需要讲一句话 ,极大地提升了交付效率。

相关推荐
慧一居士29 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html