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

推荐阅读

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

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

一、灵感来源

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

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

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

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

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

二、一键命名

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

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

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

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

...

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

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

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

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

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

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

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

1. i18n Rule 国际化国家

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

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

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

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

2. Device 适配设备

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

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

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

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

3. Layer Size 图片尺寸

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

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

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

4. Layer Resolution 导出倍数

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

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

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

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

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

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

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

五、使用方法

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

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

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

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

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

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

Case 1:交叉批量命名

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

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

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

  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 个模块。但由于不同画板可能从不同地方拖拽复制过来,所以图层命名千奇百怪。

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

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

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

最后

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

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

收藏 21
点赞 46

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。