為了告別圖層命名的重復(fù)勞動，我做了一款高效 Figma 插件

推薦閱讀

我的第一個 Figma 插件「Rename Helper」上線了！它的核心功能是 「批量重命名圖層，高效導(dǎo)出圖片」。希望這個小玩意能給所有需要「國際化出圖&上傳后臺」的平面設(shè)計(jì)和運(yùn)營 uu 們帶來便利。

一、靈感來源

做這個插件的想法，是看到朋友在日常工作中「重命名圖層」的重復(fù)性工作，實(shí)在太違！反！人！性！了！

朋友是一家跨境電商公司的平面設(shè)計(jì)師，每當(dāng)活動大促來臨的時候，她需要先給站內(nèi)外做一整套活動 banner 圖。主站設(shè)計(jì)確認(rèn)之后，她還要跟實(shí)習(xí)生小伙伴們一起完成十幾門語言的國際化，然后給每一個畫板標(biāo)上國家、設(shè)備、活動、坑位、圖片尺寸和導(dǎo)出倍數(shù)，再導(dǎo)出不同 banner 交付給各站對應(yīng)的運(yùn)營同事。

這樣算下來，她和她的小伙伴，每次大促期間起碼需要給 100 個畫板重新命名，并需要確認(rèn)名稱準(zhǔn)確無誤。如果按一張圖片一分鐘來算，一年 10 場大促，每場大促有 4 個周期，他們每年至少需要花費(fèi) 4000 分鐘在進(jìn)行重復(fù)性勞動。

目睹了這些違反人性的機(jī)械性動作，我不禁在想：是不是可以做一個小工具讓他們在每個細(xì)節(jié)上都更快一點(diǎn)？比如圖層尺寸、導(dǎo)出倍數(shù)這些信息都是設(shè)定好的，是不是可以自動化抓取到圖層名稱上？又比如國際化語言的命名是不是可以利用 figma 規(guī)則特性幫助他們快速分組導(dǎo)出？

有了上述粗略想法之后，我和研發(fā)小伙伴開始探索，如何利用插件來簡化用戶命名流程。

二、一鍵命名

找朋友仔細(xì)看了一些正在設(shè)計(jì)的 Figma 文件，發(fā)現(xiàn)他們在導(dǎo)出圖片時已經(jīng)擁有一套比較規(guī)范的命名規(guī)則 。這套規(guī)則基本可以歸結(jié)為「國際化國家」-「活動名稱」-「適配設(shè)備」-「坑位名稱」-「圖層尺寸」-「導(dǎo)出倍數(shù)」的結(jié)構(gòu)。

但由于每一次命名圖層的過程都需手動完成，所以他們經(jīng)常會遇到了各種問題：

1. 命名圖層的過程重復(fù)且枯燥。為了加速，他們經(jīng)常復(fù)制粘貼其他圖層名稱到當(dāng)前畫板使用，反復(fù)操作導(dǎo)致某個或某些細(xì)節(jié)容易出錯
2. 已經(jīng)命名（帶尺寸）的畫板在拖動時誤觸改變了畫板的尺寸，圖片名稱中尺寸和圖片實(shí)際尺寸不一致，導(dǎo)致上傳后臺時圖片變形
3. 不熟悉國際化語言，某一語言畫板在修改命名時手誤寫錯國家，導(dǎo)致頁面預(yù)覽時文案不對
4. 不同設(shè)計(jì)師的命名習(xí)慣不一樣：有些大寫，有些小寫；有些用中短橫線，有些有下短橫線；同一模塊內(nèi)容有些在前，有些在后 ... 導(dǎo)致閱讀難度增加

...

每次出錯，他們需要花費(fèi)額外時間排查錯誤、修改命名、重新切圖、再找運(yùn)營同事重新上傳后臺，費(fèi)時又費(fèi)力。

他們其中也有人試過 Figma 自帶的 Rename 功能，但打開看到純輸入框 match 模式的界面就直接放棄了——好復(fù)雜，學(xué)習(xí)門檻有點(diǎn)高。

所以在做 Rename Helper 插件的時候，我一直提醒自己產(chǎn)品設(shè)計(jì)應(yīng)該簡單：所見即所得，操作更簡單。在迭代了好幾版之后，最終的用戶界面是這樣的。

所選圖層的修改前和修改后的命名對比直觀地展示在插件頂部。圖層現(xiàn)有名稱出現(xiàn)在左側(cè)「Original Layer Name」模塊。用戶自由地進(jìn)行一切操作，所有改動都會實(shí)時返回到「Modified Layer Name」模塊中，不需要任何額外記憶。

插件基本遵循原有的圖層命名邏輯，并將命名規(guī)則中 4 個模塊變?yōu)樽詣踊顚懀骸竔18n Rule 國際化國家」、「Device 適配設(shè)備」、「Layer Size 圖片尺寸」、「Layer Resolution 導(dǎo)出倍數(shù)」。

1. i18n Rule 國際化國家

「i18n Rule 國際化國家」是國際化出圖的時候用來標(biāo)注不同國家語言的標(biāo)識。

跨境電商平面設(shè)計(jì)一般都有多國國際化的需求。比如同一張開屏圖片需要英語、德語、法語和西語多門語言。圖層命名時加入國家簡碼，可以更好地辨識圖片對應(yīng)語言，以及更好地交付圖片給對應(yīng)的國際化運(yùn)營。

插件用戶只要勾選了「Show i18n Rule (Prefix)」的選擇框，并在下拉框中選擇具體國家，這部分信息就會自動出現(xiàn)在圖層命名的前綴部分。

2. Device 適配設(shè)備

「Device 適配設(shè)備」是使用這張圖片的具體場景所屬設(shè)備。

跨境電商平面設(shè)計(jì)師需要承接多平臺多坑位的設(shè)計(jì)任務(wù)。同一個大促活動，可能需要為 m/pc/app/edm 等不同設(shè)備的不同坑位進(jìn)行設(shè)計(jì)。圖層命名時加入設(shè)備名稱，方便設(shè)計(jì)師交付管理。

插件用戶勾選了「Show Device (Prefix)」的選擇框，并在下拉框中選擇對應(yīng)設(shè)備，這部分信息就會出現(xiàn)在圖層命名中國家簡碼的后方。

3. Layer Size 圖片尺寸

「Layer Size 圖片尺寸」 是整個圖層/畫板的尺寸。

設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時，畫板寬高都是設(shè)定好的。插件用戶只要勾選了「Show Layer Size (Suffix)」的選擇框，這個信息就會自動出現(xiàn)在圖層命名的后綴部分。

4. Layer Resolution 導(dǎo)出倍數(shù)

「Layer Resolution 導(dǎo)出倍數(shù)」是導(dǎo)出圖片的倍數(shù)。

為了適配不同設(shè)備的最佳預(yù)覽效果，設(shè)計(jì)師會為不同坑位圖片導(dǎo)出不同的倍數(shù)，比如 PC 的圖片一般是@2x，手機(jī)的圖片一般是@3x。

插件用戶只要勾選了「Show Layer Resolution (Suffix)」的選擇框，導(dǎo)出倍數(shù)信息會自動出現(xiàn)在圖層命名中圖層尺寸的后方。

三、自動分組

Figma 有一個隱藏的小功能，圖層名稱如果帶“/”斜杠，導(dǎo)出時將自動抓取斜杠前的文字成為文件夾名稱，再取斜杠后的文字變?yōu)閳D片名稱，圖片自動收納在文件夾中。

舉個例子：比如一個圖層叫“EN/WDS-M-LP-BG”，那么這張圖片導(dǎo)出的時候會位于一個叫 "EN" 的文件夾中，圖片本身叫“WDS-M-LP-BG.jpg”。

再舉個復(fù)雜一點(diǎn)的例子：比如六個圖層分表叫“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”。那么導(dǎo)出后，三張圖片處于同一個 "EN" 的文件夾中， 另外三張圖片處于 "FR" 的文件夾中。每個文件夾中分別有三張圖片，都叫“WDS-M-LP-BG.jpg”“WDS-M-LP-BG2.jpg”和“WDS-M-LP-BG3.jpg”。

借助這個特性來對國際化需求進(jìn)行批量命名，導(dǎo)出時將會獲得事半功倍的效果。比如 Rename Helper 插件中的 i18n Rule 功能，它可以把同屬一批活動的英文畫板全都命名成“EN/EN_xxx_xxxxx@xx”，再把法語畫板命名成“FR/FR_xxx_xxxxx@xx”，再把德語畫板命名為“DE/DE_xxx_xxxxx@xx”。用戶選中所有圖層一次導(dǎo)出，圖片會自動分到“EN”“FR”“DE”三個文件夾中，且每張圖片名稱會帶上國家簡碼。

四、鎖定部分修改

值得注意的是，Rename Helper 還兼容了一個方便用戶多次修改的高階功能。

比如設(shè)計(jì)師做活動落地頁時，部分模塊需要跟著活動周期修改內(nèi)容，畫板長度會跟著改變。Rename Helper 會識別最新信息，把圖片尺寸自動更新到圖層名稱中。為了跨語言批量操作方便，「i18n Rule 國際化國家」有一個 Stay Old 的開關(guān)。只要用戶保持關(guān)閉這個開關(guān)，原圖層名稱中的國家簡碼會保留在新名稱中，其他信息則自動更新。

如上圖案例，原來是 EN 和 FR 兩個語種的畫板。畫板尺寸變化后，在使用插件時關(guān)閉開關(guān)（保留 Stay Old 的選擇），則圖層名稱中國際化信息不動，圖片尺寸信息自動更新成最新的版本。

五、使用方法

使用 Rename Helper 的方法非常簡單。

大家只要在 Figma Community 或者任意 Figma 文件插件畫板中，搜索并打開插件「Rename Helper」，選擇需要的圖層一鍵 Rename 即可。

或者直接復(fù)制網(wǎng)址到瀏覽器也能打開： https://www.figma.com

所有功能會自動開啟，插件可以幫用戶一鍵填寫「i18n Rule 國際化國家」、「Device 適配設(shè)備」、「Layer Size 圖片尺寸」、「Layer Resolution 導(dǎo)出倍數(shù)」這 4 個信息，使得圖層命名更規(guī)范。

但大部分用戶的使用場景比較特殊，有時候需要批量操作多語言，有時候需要處理之前名稱中的「臟數(shù)據(jù)」。為了更好地解釋插件的使用方法，我將介紹兩個具體案例。

Case 1：交叉批量命名

在一次大促活動中，設(shè)計(jì)師做了一批活動 banner，有些用在 M 站活動頁，有些用在 APP 開屏，有些用在 PC 站活動頁， 有些用在 EDM 郵件中。而且這批 banner 有英語和德語兩個版本，都需要導(dǎo)出交付給對應(yīng)運(yùn)營同學(xué)。

這時候設(shè)計(jì)師只需跟隨下面 3 個步驟就能輕松完成 32 個圖層的批量命名：

1. 先選擇所有英語版本的 banner 圖層。打開插件，取消勾選「Show Device (Prefix)」的選擇框，命名所有英語圖層
2. 再選擇所有德語版本的 banner 圖層。打開插件，保證「Show Device (Prefix)」選擇框還是處于取消勾選狀態(tài)，選擇「i18n Rule」的下拉框?yàn)椤???? DE」，命名所有德語圖層
3. 選擇兩門語言中所有用在 M 活動頁的 Banner，把「i18n Rule」的開關(guān)滑向「Stay Old」那一側(cè)，再勾選上「Show Device (Prefix)」并選擇「Device」的下拉框?yàn)椤窶」，并依此類推完成其他設(shè)備的命名。

Case 2：清理臟數(shù)據(jù) + 重新命名

在做一個活動頁的時候，設(shè)計(jì)師共設(shè)計(jì)了 5 個模塊。但由于不同畫板可能從不同地方拖拽復(fù)制過來，所以圖層命名千奇百怪。

如果想要為活動頁這些模塊高效命名，可以采取先清理再命名的方式：

1. 選擇 5 個模塊對應(yīng)的圖層
2. 快捷鍵 [CMD + R]/[Ctrl + R] 可以呼出官方的 Rename 彈窗，將所有圖層重命名為活動名稱，后綴加上排序序號
3. 打開插件，選擇對的國家語言/設(shè)備，一鍵命名

最后

Rename Helper 并不是想要替代 Figma 官方 Rename 功能的插件，它也不是多么 fancy 的超級巨無霸功能集合。它的目標(biāo)是利用現(xiàn)有信息和工具，以最少的功能，幫助用戶形成一套更高效的重命名工作流，讓導(dǎo)出和交接的流程更順滑。

希望 Rename Helper 能夠陪伴更多的平面設(shè)計(jì)或者運(yùn)營同學(xué)，讓工作時間可以縮短一點(diǎn)點(diǎn)，擁有更多自己的時間，做感興趣的事情。