推薦閱讀

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

一、靈感來(lái)源

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

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

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

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

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

二、一鍵命名

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

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

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

...

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

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

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

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

插件基本遵循原有的圖層命名邏輯，并將命名規(guī)則中 4 個(gè)模塊變?yōu)樽詣?dòng)化填寫(xiě)：「i18n Rule 國(guó)際化國(guó)家」、「Device 適配設(shè)備」、「Layer Size 圖片尺寸」、「Layer Resolution 導(dǎo)出倍數(shù)」。

1. i18n Rule 國(guó)際化國(guó)家

「i18n Rule 國(guó)際化國(guó)家」是國(guó)際化出圖的時(shí)候用來(lái)標(biāo)注不同國(guó)家語(yǔ)言的標(biāo)識(shí)。

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

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

2. Device 適配設(shè)備

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

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

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

3. Layer Size 圖片尺寸

「Layer Size 圖片尺寸」 是整個(gè)圖層/畫(huà)板的尺寸。

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

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

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

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

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

三、自動(dòng)分組

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

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

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

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

四、鎖定部分修改

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

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

如上圖案例，原來(lái)是 EN 和 FR 兩個(gè)語(yǔ)種的畫(huà)板。畫(huà)板尺寸變化后，在使用插件時(shí)關(guān)閉開(kāi)關(guān)（保留 Stay Old 的選擇），則圖層名稱(chēng)中國(guó)際化信息不動(dòng)，圖片尺寸信息自動(dòng)更新成最新的版本。

五、使用方法

使用 Rename Helper 的方法非常簡(jiǎn)單。

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

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

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

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

Case 1：交叉批量命名

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

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

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

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

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

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

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

最后

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

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