前端开发切图利器!Exportx,欢迎大家使用体验

前言

在前端开发的过程中,我们需要根据 figma 还原设计稿,这个环节避免不了的是需要导出很多图片素材,例如官网类项目,就存在大量的图片素材。

当前的工作流是使用 figma 导出图片后,使用图片压缩工具压缩一下,再上传到公司或者自己的 COS(对象存储)。

COS(Cloud Object Storage)对象存储是一种云端数据存储服务,常由云服务商(如腾讯云、阿里云、AWS 等)提供,主要用于海量非结构化数据的存储和访问,如图片、视频、备份、日志等。''

在我写公司官网的两周时间里,我发现我重复这个繁琐的劳动步骤很多次了,于是我尝试寻找有没有解决这个问题的插件,最好是能压缩导出图片,并自定义上传自己的 COS。

机缘巧合下我发现了这个好用的 Figma 插件。图像压缩和上传的一体化工具,基于WebAssembly的本地压缩导出工具,支持PNG、JPG、WEBP、SVG、AVIF格式。

插件安装地址: www.figma.com/community/p...

官网: exportx.dev/

只不过那时候插件的自定义上传功能还是使用不了,反馈给了作者,收到了作者的内测体验邀请。

内测使用下来体验很棒,完美的满足了我的需求,进而想推荐给大家,希望能帮助到更多的前端开发者提高开发效率。

图片压缩导出为任意格式

支持自定义导出 PNG、JPG、SVG、WEBP、AVIF 格式的图片,可以自定义前缀,点击重命名图片后下载,自选图片压缩方式。

使用自定义上传功能

这里是 Exportx 官方的说明文档 www.exportx.dev/zh/blog/ten... (还在完善中)

Figma 插件上传到 COS 一定是需要密钥的,就像我们写前端上传功能一样需要 secretIDsecretKey 才能上传。

但是如果秘钥直接填入 Figma 插件外泄了怎么办,因此作者的做法是让用户使用 Serverless 来自定义中转上传图片素材到 COS,密钥都存储在自己部署的 Serverless 环境变量中,这样做到安全可控。

操作步骤

一、先下载要上传云函数的代码 zip 文件 cnb-1251054923.cos.ap-singapore.myqcloud.com/scf-package...

二、创建云函数并开启公网访问

三、配置环境变量

使用 ExportX 提供的环境变量生成器 www.exportx.dev/env-generat...

依次按照顺序填写必填的信息

详解一下每个字段获取来源在哪里

  • 用户 ID 白名单为 Figma 插件显示的 UserID,点击插件的 Upload Setting 即可获取

四、将完成的环境变量填入 Serverless 中

最后都配置完成后点击输出 YAML 格式一键复制,粘贴到腾讯云 Serverless 中。

保存后,等待部署完成,获取公网链接

五、填写公网链接与认证密钥到插件中

大功告成,即可实现一键压缩图片并上传到公司的对象存储了,并且不会泄露 AK SK。

结语

希望这款插件能帮助大家提升开发效率,作者也在持续迭代优化中。ღ( ´・ᴗ・` )比心

相关推荐
漂流瓶jz1 天前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码1 天前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v1 天前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin1 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 天前
结合Worker通知应用更新
前端·javascript
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html