为了告别图层命名的重复劳动，我做了一款高效 Figma 插件

推荐阅读

我的第一个 Figma 插件「Rename Helper」上线了！它的核心功能是 「批量重命名图层，高效导出图片」。希望这个小玩意能给所有需要「国际化出图&上传后台」的平面设计和运营 uu 们带来便利。

一、灵感来源

做这个插件的想法，是看到朋友在日常工作中「重命名图层」的重复性工作，实在太违！反！人！性！了！

朋友是一家跨境电商公司的平面设计师，每当活动大促来临的时候，她需要先给站内外做一整套活动 banner 图。主站设计确认之后，她还要跟实习生小伙伴们一起完成十几门语言的国际化，然后给每一个画板标上国家、设备、活动、坑位、图片尺寸和导出倍数，再导出不同 banner 交付给各站对应的运营同事。

这样算下来，她和她的小伙伴，每次大促期间起码需要给 100 个画板重新命名，并需要确认名称准确无误。如果按一张图片一分钟来算，一年 10 场大促，每场大促有 4 个周期，他们每年至少需要花费 4000 分钟在进行重复性劳动。

目睹了这些违反人性的机械性动作，我不禁在想：是不是可以做一个小工具让他们在每个细节上都更快一点？比如图层尺寸、导出倍数这些信息都是设定好的，是不是可以自动化抓取到图层名称上？又比如国际化语言的命名是不是可以利用 figma 规则特性帮助他们快速分组导出？

有了上述粗略想法之后，我和研发小伙伴开始探索，如何利用插件来简化用户命名流程。

二、一键命名

找朋友仔细看了一些正在设计的 Figma 文件，发现他们在导出图片时已经拥有一套比较规范的命名规则 。这套规则基本可以归结为「国际化国家」-「活动名称」-「适配设备」-「坑位名称」-「图层尺寸」-「导出倍数」的结构。

但由于每一次命名图层的过程都需手动完成，所以他们经常会遇到了各种问题：

1. 命名图层的过程重复且枯燥。为了加速，他们经常复制粘贴其他图层名称到当前画板使用，反复操作导致某个或某些细节容易出错
2. 已经命名（带尺寸）的画板在拖动时误触改变了画板的尺寸，图片名称中尺寸和图片实际尺寸不一致，导致上传后台时图片变形
3. 不熟悉国际化语言，某一语言画板在修改命名时手误写错国家，导致页面预览时文案不对
4. 不同设计师的命名习惯不一样：有些大写，有些小写；有些用中短横线，有些有下短横线；同一模块内容有些在前，有些在后 ... 导致阅读难度增加

...

每次出错，他们需要花费额外时间排查错误、修改命名、重新切图、再找运营同事重新上传后台，费时又费力。

他们其中也有人试过 Figma 自带的 Rename 功能，但打开看到纯输入框 match 模式的界面就直接放弃了——好复杂，学习门槛有点高。

所以在做 Rename Helper 插件的时候，我一直提醒自己产品设计应该简单：所见即所得，操作更简单。在迭代了好几版之后，最终的用户界面是这样的。

所选图层的修改前和修改后的命名对比直观地展示在插件顶部。图层现有名称出现在左侧「Original Layer Name」模块。用户自由地进行一切操作，所有改动都会实时返回到「Modified Layer Name」模块中，不需要任何额外记忆。

插件基本遵循原有的图层命名逻辑，并将命名规则中 4 个模块变为自动化填写：「i18n Rule 国际化国家」、「Device 适配设备」、「Layer Size 图片尺寸」、「Layer Resolution 导出倍数」。

1. i18n Rule 国际化国家

「i18n Rule 国际化国家」是国际化出图的时候用来标注不同国家语言的标识。

跨境电商平面设计一般都有多国国际化的需求。比如同一张开屏图片需要英语、德语、法语和西语多门语言。图层命名时加入国家简码，可以更好地辨识图片对应语言，以及更好地交付图片给对应的国际化运营。

插件用户只要勾选了「Show i18n Rule (Prefix)」的选择框，并在下拉框中选择具体国家，这部分信息就会自动出现在图层命名的前缀部分。

2. Device 适配设备

「Device 适配设备」是使用这张图片的具体场景所属设备。

跨境电商平面设计师需要承接多平台多坑位的设计任务。同一个大促活动，可能需要为 m/pc/app/edm 等不同设备的不同坑位进行设计。图层命名时加入设备名称，方便设计师交付管理。

插件用户勾选了「Show Device (Prefix)」的选择框，并在下拉框中选择对应设备，这部分信息就会出现在图层命名中国家简码的后方。

3. Layer Size 图片尺寸

「Layer Size 图片尺寸」 是整个图层/画板的尺寸。

设计师在进行设计时，画板宽高都是设定好的。插件用户只要勾选了「Show Layer Size (Suffix)」的选择框，这个信息就会自动出现在图层命名的后缀部分。

4. Layer Resolution 导出倍数

「Layer Resolution 导出倍数」是导出图片的倍数。

为了适配不同设备的最佳预览效果，设计师会为不同坑位图片导出不同的倍数，比如 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”。

借助这个特性来对国际化需求进行批量命名，导出时将会获得事半功倍的效果。比如 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 的开关。只要用户保持关闭这个开关，原图层名称中的国家简码会保留在新名称中，其他信息则自动更新。

如上图案例，原来是 EN 和 FR 两个语种的画板。画板尺寸变化后，在使用插件时关闭开关（保留 Stay Old 的选择），则图层名称中国际化信息不动，图片尺寸信息自动更新成最新的版本。

五、使用方法

使用 Rename Helper 的方法非常简单。

大家只要在 Figma Community 或者任意 Figma 文件插件画板中，搜索并打开插件「Rename Helper」，选择需要的图层一键 Rename 即可。

或者直接复制网址到浏览器也能打开： https://www.figma.com

所有功能会自动开启，插件可以帮用户一键填写「i18n Rule 国际化国家」、「Device 适配设备」、「Layer Size 图片尺寸」、「Layer Resolution 导出倍数」这 4 个信息，使得图层命名更规范。

但大部分用户的使用场景比较特殊，有时候需要批量操作多语言，有时候需要处理之前名称中的「脏数据」。为了更好地解释插件的使用方法，我将介绍两个具体案例。

Case 1：交叉批量命名

在一次大促活动中，设计师做了一批活动 banner，有些用在 M 站活动页，有些用在 APP 开屏，有些用在 PC 站活动页， 有些用在 EDM 邮件中。而且这批 banner 有英语和德语两个版本，都需要导出交付给对应运营同学。

这时候设计师只需跟随下面 3 个步骤就能轻松完成 32 个图层的批量命名：

1. 先选择所有英语版本的 banner 图层。打开插件，取消勾选「Show Device (Prefix)」的选择框，命名所有英语图层
2. 再选择所有德语版本的 banner 图层。打开插件，保证「Show Device (Prefix)」选择框还是处于取消勾选状态，选择「i18n Rule」的下拉框为「🇩🇪 DE」，命名所有德语图层
3. 选择两门语言中所有用在 M 活动页的 Banner，把「i18n Rule」的开关滑向「Stay Old」那一侧，再勾选上「Show Device (Prefix)」并选择「Device」的下拉框为「M」，并依此类推完成其他设备的命名。

Case 2：清理脏数据 + 重新命名

在做一个活动页的时候，设计师共设计了 5 个模块。但由于不同画板可能从不同地方拖拽复制过来，所以图层命名千奇百怪。

如果想要为活动页这些模块高效命名，可以采取先清理再命名的方式：

1. 选择 5 个模块对应的图层
2. 快捷键 [CMD + R]/[Ctrl + R] 可以呼出官方的 Rename 弹窗，将所有图层重命名为活动名称，后缀加上排序序号
3. 打开插件，选择对的国家语言/设备，一键命名

最后

Rename Helper 并不是想要替代 Figma 官方 Rename 功能的插件，它也不是多么 fancy 的超级巨无霸功能集合。它的目标是利用现有信息和工具，以最少的功能，帮助用户形成一套更高效的重命名工作流，让导出和交接的流程更顺滑。

希望 Rename Helper 能够陪伴更多的平面设计或者运营同学，让工作时间可以缩短一点点，拥有更多自己的时间，做感兴趣的事情。