为了缩短批量处理工作时长,我做了一款 Figma 插件
Matrix 首页推荐
Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。
文章代表作者个人观点,少数派仅对标题和排版略作修改。
编注:本文涉及的医学内容均源于作者个人观点,请务必注意,本文无法视为任何医疗建议。如有具体医疗问题,请线下就诊并听从医生建议。
我的第一个 Figma 插件「Rename Helper」上线了!它的核心功能是 「批量重命名图层,高效导出图片」。希望这个小玩意能给所有需要【国际化出图&上传后台】的平面设计和运营 uu 们带来便利。
![](https://cdnfile.sspai.com/2024/05/25/eb5a33721249dbf51e3cdf6fa7293dd0.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
灵感来源
做这个插件的想法,是看到朋友在日常工作中「重命名图层」的重复性工作,实在太违!反!人!性!了!
朋友是一家跨境电商公司的平面设计师,每当活动大促来临的时候,她需要先给站内外做一整套活动 banner 图。主站设计确认之后,她还要跟实习生小伙伴们一起完成十几门语言的国际化,然后给每一个画板标上国家、设备、活动、坑位、图片尺寸和导出倍数,再导出不同 banner 交付给各站对应的运营同事。
这样算下来,她和她的小伙伴,每次大促期间起码需要给 100 个画板重新命名,并需要确认名称准确无误。如果按一张图片一分钟来算,一年 10 场大促,每场大促有 4 个周期,他们每年至少需要花费 4000 分钟在进行重复性劳动。
目睹了这些违反人性的机械性动作,我不禁在想:是不是可以做一个小工具让他们在每个细节上都更快一点?比如图层尺寸、导出倍数这些信息都是设定好的,是不是可以自动化抓取到图层名称上?又比如国际化语言的命名是不是可以利用 figma 规则特性帮助他们快速分组导出?
有了上述粗略想法之后,我和研发小伙伴开始探索,如何利用插件来简化用户命名流程。
一键命名
找朋友仔细看了一些正在设计的 Figma 文件,发现他们在导出图片时已经拥有一套比较规范的命名规则 👍。这套规则基本可以归结为【国际化国家】-【活动名称】-【适配设备】-【坑位名称】-【图层尺寸】-【导出倍数】的结构。
![](https://cdnfile.sspai.com/2024/05/25/e34e32312f5983b22bc08957a767b6c0.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
但由于每一次命名图层的过程都需手动完成,所以他们经常会遇到了各种问题:
- 命名图层的过程重复且枯燥。为了加速,他们经常复制粘贴其他图层名称到当前画板使用,反复操作导致某个或某些细节容易出错
- 已经命名(带尺寸)的画板在拖动时误触改变了画板的尺寸,图片名称中尺寸和图片实际尺寸不一致,导致上传后台时图片变形
- 不熟悉国际化语言,某一语言画板在修改命名时手误写错国家,导致页面预览时文案不对
- 不同设计师的命名习惯不一样:有些大写,有些小写;有些用中短横线,有些有下短横线;同一模块内容有些在前,有些在后 ... 导致阅读难度增加
- ...
每次出错,他们需要花费额外时间排查错误、修改命名、重新切图、再找运营同事重新上传后台,费时又费力。
他们其中也有人试过 Figma 自带的 Rename 功能,但打开看到纯输入框 match 模式的界面就直接放弃了——好复杂,学习门槛有点高。
![](https://cdnfile.sspai.com/2024/05/25/d87fe7f771b2fd91d160a36d15fac534.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
所以在做 Rename Helper 插件的时候,我一直提醒自己产品设计应该简单:所见即所得,操作更简单。在迭代了好几版之后,最终的用户界面是👇这样的。
![](https://cdnfile.sspai.com/2024/05/25/211fd9e564eaa59e1dbb04585a630188.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
所选图层的修改前和修改后的命名对比直观地展示在插件顶部。图层现有名称出现在左侧「Original Layer Name」模块。用户自由地进行一切操作,所有改动都会实时返回到「Modified Layer Name」模块中,不需要任何额外记忆。
插件基本遵循原有的图层命名逻辑,并将命名规则中 4 个模块变为自动化填写:「i18n Rule 国际化国家」、「Device 适配设备」、「Layer Size 图片尺寸」、「Layer Resolution 导出倍数」。
1. i18n Rule 国际化国家
「i18n Rule 国际化国家」是国际化出图的时候用来标注不同国家语言的标识。
![](https://cdnfile.sspai.com/2024/05/25/e673ac3a38b1cbb0e85687b3d8aceb34.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
跨境电商平面设计一般都有多国国际化的需求。比如同一张开屏图片需要英语、德语、法语和西语多门语言。图层命名时加入国家简码,可以更好地辨识图片对应语言,以及更好地交付图片给对应的国际化运营。
插件用户只要勾选了「Show i18n Rule (Prefix)」的选择框,并在下拉框中选择具体国家,这部分信息就会自动出现在图层命名的前缀部分。
2. Device 适配设备
「Device 适配设备」是使用这张图片的具体场景所属设备。
![](https://cdnfile.sspai.com/2024/05/25/5017e68eb4f98d1d967dd4c44bd8b4cc.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
跨境电商平面设计师需要承接多平台多坑位的设计任务。同一个大促活动,可能需要为 m/pc/app/edm 等不同设备的不同坑位进行设计。图层命名时加入设备名称,方便设计师交付管理。
插件用户勾选了「Show Device (Prefix)」的选择框,并在下拉框中选择对应设备,这部分信息就会出现在图层命名中国家简码的后方。
3. Layer Size 图片尺寸
「Layer Size 图片尺寸」 是整个图层/画板的尺寸。
![](https://cdnfile.sspai.com/2024/05/25/f614266841a2e2ff9324a70d1df269cc.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
设计师在进行设计时,画板宽高都是设定好的。插件用户只要勾选了「Show Layer Size (Suffix)」的选择框,这个信息就会自动出现在图层命名的后缀部分。
4. Layer Resolution 导出倍数
「Layer Resolution 导出倍数」是导出图片的倍数。
![](https://cdnfile.sspai.com/2024/05/25/7efdddc6dcb492afadc84081282616a7.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
为了适配不同设备的最佳预览效果,设计师会为不同坑位图片导出不同的倍数,比如 PC 的图片一般是@2x,手机的图片一般是@3x。
插件用户只要勾选了「Show Layer Resolution (Suffix)」的选择框,导出倍数信息会自动出现在图层命名中图层尺寸的后方。
自动分组
Figma 有一个隐藏的小功能,图层名称如果带“/”斜杠,导出时将自动抓取斜杠前的文字成为文件夹名称,再取斜杠后的文字变为图片名称,图片自动收纳在文件夹中。
举个🌰:比如一个图层叫 “EN/WDS-M-LP-BG”,那么这张图片导出的时候会位于一个叫 "EN" 的文件夹中,图片本身叫“WDS-M-LP-BG.jpg”。
再举个复杂一点的🌰:比如六个图层分表叫“EN/WDS-M-LP-BG”、“EN/WDS-M-LP-BG2”、“EN/WDS-M-LP-BG3”、“FR/WDS-M-LP-BG”、“FR/WDS-M-LP-BG2”和“FR/WDS-M-LP-BG3”。那么导出后,三张图片处于同一个 "EN" 的文件夹中, 另外三张图片处于 "FR" 的文件夹中。每个文件夹中分别有三张图片,都叫“WDS-M-LP-BG.jpg”“WDS-M-LP-BG2.jpg”和“WDS-M-LP-BG3.jpg”。
![](https://cdnfile.sspai.com/2024/05/25/c19e2570890514e0885cbb223013bf41.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
借助这个特性来对国际化需求进行批量命名,导出时将会获得事半功倍的效果。比如 Rename Helper 插件中的 i18n Rule 功能,它可以把同属一批活动的英文画板全都命名成“EN/EN_xxx_xxxxx@xx”,再把法语画板命名成“FR/FR_xxx_xxxxx@xx”,再把德语画板命名为“DE/DE_xxx_xxxxx@xx”。用户选中所有图层一次导出,图片会自动分到“EN”“FR”“DE”三个文件夹中,且每张图片名称会带上国家简码。
锁定部分修改
值得注意的是,Rename Helper 还兼容了一个方便用户多次修改的高阶功能。
比如设计师做活动落地页时,部分模块需要跟着活动周期修改内容,画板长度会跟着改变。 Rename Helper 会识别最新信息,把图片尺寸自动更新到图层名称中。为了跨语言批量操作方便,「i18n Rule 国际化国家」有一个 Stay Old 的开关。只要用户保持关闭这个开关,原图层名称中的国家简码会保留在新名称中,其他信息则自动更新。
![](https://cdnfile.sspai.com/2024/05/25/91e77bad51f4cebc382ae6463d35c093.jpg?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
如上图案例案例,原来是 EN 和 FR 两个语种的画板。画板尺寸变化后,在使用插件时关闭开关(保留 Stay Old 的选择),则图层名称中国际化信息不动,图片尺寸信息自动更新成最新的版本。
使用方法
使用 Rename Helper 的方法非常简单。
大家只要在 Figma Community 或者任意 Figma 文件插件画板中,搜索并打开插件「Rename Helper」,选择需要的图层一键 Rename 即可。
或者直接复制网址到浏览器也能打开: https://www.figma.com/community/plugin/1372126247948054836/rename-helper
![](https://cdnfile.sspai.com/2024/05/25/12e1b000ddf433a335d2ede779274469.png?imageView2/2/w/1120/q/40/interlace/1/ignore-error/1)
所有功能会自动开启,插件可以帮用户一键填写「i18n Rule 国际化国家」、「Device 适配设备」、「Layer Size 图片尺寸」、「Layer Resolution 导出倍数」这 4 个信息,使得图层命名更规范。
但大部分用户的使用场景比较特殊,有时候需要批量操作多语言,有时候需要处理之前名称中的「脏数据」。为了更好地解释插件的使用方法,我将介绍两个具体案例。
Case 1:交叉批量命名
在一次大促活动中,设计师做了一批活动 banner,有些用在 M 站活动页,有些用在 APP 开屏,有些用在 PC 站活动页, 有些用在 EDM 邮件中。而且这批 banner 有英语和德语两个版本,都需要导出交付给对应运营同学。
这时候设计师只需跟随下面 3 个步骤就能轻松完成 32 个图层的批量命名:
![](https://cdnfile.sspai.com/2024/05/25/9e2aa5b58eedbab928b1efc6d44629c9.gif)
- 先选择所有英语版本的 banner 图层。打开插件,取消勾选「Show Device (Prefix)」的选择框,命名所有英语图层
- 再选择所有德语版本的 banner 图层。打开插件,保证「Show Device (Prefix)」选择框还是处于取消勾选状态,选择「i18n Rule」的下拉框为「🇩🇪 DE」,命名所有德语图层
- 选择两门语言中所有用在 M 活动页的 Banner,把「i18n Rule」的开关滑向「Stay Old」那一侧,再勾选上「Show Device (Prefix)」并选择「Device」的下拉框为「M」,并依此类推完成其他设备的命名。
Case 2:清理脏数据 + 重新命名
在做一个活动页的时候,设计师共设计了 5 个模块。但由于不同画板可能从不同地方拖拽复制过来,所以图层命名千奇百怪。
如果想要为活动页这些模块高效命名,可以采取先清理再命名的方式:
![](https://cdnfile.sspai.com/2024/05/25/85ac719efdb5350f4cefa166c0a04a99.gif)
- 选择 5 个模块对应的图层
- 快捷键 [CMD + R]/[Ctrl + R] 可以呼出官方的 Rename 弹窗,将所有图层重命名为活动名称,后缀加上排序序号
- 打开插件,选择对的国家语言/设备,一键命名
最后
Rename Helper 并不是想要替代 Figma 官方 Rename 功能的插件,它也不是多么 fancy 的超级巨无霸功能集合。它的目标是利用现有信息和工具,以最少的功能,帮助用户形成一套更高效的重命名工作流,让导出和交接的流程更顺滑。
希望 Rename Helper 能够陪伴更多的平面设计或者运营同学,让工作时间可以缩短一点点,拥有更多自己的时间,做感兴趣的事情。
如果你想要了解更多跟 Figma 相关的基础知识和好用插件,也请订阅&持续关注「设计防潮箱」和接下来一系列的「Figma 101 」教程。