Banner Resize 神器：Figma 超實用技巧快速搞定多尺寸、多語系

目錄
1. 為什麼分享這個主題？
2. Resize 的挑戰與混亂
3. Figma 解決方案原理說明
4. 實作流程步驟拆解
5. 結語

為什麼分享這個主題？

你會如何處理同張視覺的 resize 呢？

來聊聊真實設計現場：確認好 Banner 主視覺後，接著就是 resize 過程，面對 10 種不同尺寸的 Banner，加上 10 種不同語系，總計 100 張圖，期間可能需要 3–5 次修改⋯⋯

Resize 的挑戰與混亂

以 Photoshop 處理這些任務確實帶來了一系列挑戰 ，不僅是費時冗長，而且錯誤率高，每張圖還需要單獨存檔，如果每張圖都需要存檔一次，大概要存 300–500 次，實在是一場硬戰。

Figma 解決方案原理說明

先簡單說明原理，主要是利用 Component 的特性

1. 設定可以共用的 Component，例如「背景」、「主視覺」
2. 多語系文字另外做 Component

然後可以共用的 Component 會用於所有 banner，而文字 Component 則用於各語系的不同尺寸，接著先製作第一份語系的 banner resize

後面的語系就可以直接複製第一份後，快速的更換成需要語系

實作流程步驟拆解

Step 1. Banner 基底設計

這個階段使用哪個軟體做設計都可以，但確保基礎 Banner 完整性符合需求

Step 2. 元素變身 Component

開始把 Banner 可以共用的元素拆分為主體、背景、按鈕的 Component。這樣一來，修改 Component 就能輕鬆地影響所有相關元素

再來是製作多語系 Component

Step 3. 先製作一份語系的 Resize Banner

通常我會先製作好一套語系，例如 EN，然後按語系更換文案。使用 Component 一次修改，語系版本就會同步更新。

Step 4. Copy 與 Replace multi language component

1. 直接複製第一份語系的所有 resize
2. 將裡面語系的 component 改為對應語系 (ex. EN -> JP)

修改圖片名稱的方式：選取新增語系，然後按 ⌘ R (CTRL R)，把原本的語系名稱取代為新的

Step 5. 一次轉存全部圖檔

這階段只剩下最後一個步驟，直接選取所有圖片然後選擇格式就可以存檔了

如果需要分資料夾，可以在命名時使用/，”English/檔案名稱”，就會自動生成一個 English 資料夾，命名前面有 English/ 都會被放到那個資料夾中

利用 Figma resize 最大優點是如果後續新 Banner Layout 類似的狀況下可以簡單替換背景跟前面的主視覺就可以完成，不需要再一張一張重新 resize

結語

透過 Figma，我們簡化了 Banner Resize 的流程：

1. 建立可重複使用的 Component： 將主視覺、背景、按鈕等元素轉為 Component，確保設計的一致性。
2. 製作多語系 Component：將多語系文字分開製作成 Component，方便後續語系的快速切換。
3. 製作第一份 Resize Banner： 先完成其中一份 Banner 的Resize，例如英文版本。
4. 複製與替換： 直接複製第一份 Banner，然後替換其中的語系 Component，快速生成其他語系版本。
5. 一次轉存全部圖檔： 選取所有圖片，選擇格式，一次性完成所有 Banner的轉存。

這樣的步驟提高 Resize 效率，還讓 Banner Resize 變得輕鬆有趣。設計師能更專注於創意發揮，就不需要為了瑣碎的操作而煩惱。