前端开发切图利器!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。

结语

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

相关推荐
小菜全几秒前
《WebAssembly:前端开发的新可能》
前端·javascript
余防5 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与9 分钟前
前端2.0
前端
南风木兮丶16 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少29 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务31 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia38 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia40 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie41 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei42 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript