Figma EDM 設計完整教學｜用 Figma 打造專業電子報模板的步驟流程（2026）
在設計工具百花齊放的時代，Figma 早已不只是 UI 設計的專屬武器。越來越多行銷人與設計師開始用它來製作 EDM 電子報，不僅因為它免費、跨平台，更因為它的 Auto Layout 與元件系統能大幅加速模板產出。本篇教學將從尺寸規格、工具鏈、實作流程到輸出測試，帶你從零到有完成第一封用 Figma 設計的專業 EDM。
Figma 設計 EDM 前必知的尺寸與規格
EDM 的尺寸規格並非任意決定，而是由郵件客戶端的渲染規則所決定。搞懂這些數字，是避免設計稿在 Gmail 或 Outlook 裡走味的關鍵第一步。
EDM 標準尺寸解析
電子報的寬度幾乎有一個業界共識：600px。這是因為多數郵件客戶端會將超過 600px 的內容縮放或截斷，尤其是 Gmail 的預覽窗格。寬版設計可以做到 640px，但相容性會略降。手機版的寬度則落在 320px 到 480px 之間，視你的響應式斷點策略而定。
高度方面，建議整封 EDM 不超過 2000px。Gmail 對過長的郵件有截斷機制，超出部分可能直接消失，導致讀者看不到 Footer 的取消訂閱連結、這在法規上可是大問題。
| 項目 | 建議值 | 說明 |
|---|---|---|
| 桌機版寬度 | 600px（標準）/ 640px（寬版） | 超過 600px 可能被縮放或截斷 |
| 手機版寬度 | 320px - 480px | 響應式區塊的設計寬度 |
| 最大高度建議 | 不超過 2000px | 避免 Gmail 截斷問題 |
圖片與文字輸出規格
EDM 是螢幕顯示介面，不是印刷品，所以解析度不需要 300 DPI，72 DPI 就能呈現足夠清晰的畫質。圖片格式的選擇也很重要：需要透明背景的元素（如 Logo、裝飾圖示）用 PNG；一般照片或主視覺用 JPG 並將品質設在 80-85%，可在檔案大小與畫質間取得平衡；如果你想做動態 Banner，GIF 是唯一選擇，但要注意並非所有郵件客戶端都支援動畫效果。
文字的間距設定也是細節所在。段落行高設在 1.4 到 1.6 倍字高，能讓內文保持良好的閱讀呼吸感，讀者不會覺得文字擁擠或鬆散。
| 項目 | 建議值 | 說明 |
|---|---|---|
| 圖片解析度 | 72 DPI | 適用於螢幕顯示，無需高解析度 |
| 圖片格式 | PNG、JPG、GIF | 依用途選擇透明/壓縮/動態格式 |
| 圖文比例 | 圖片佔比 20-40% | 圖片過多會拖慢載入速度 |
| 段落行高 | 1.4-1.6 倍字高 | 維持良好閱讀舒適度 |
郵件客戶端相容性要點
這裡是很多設計師踩坑的地方。Gmail 不支援背景圖片與 JavaScript，所以千萬別把重要資訊放在背景圖上。Outlook（尤其是 Windows 版）對 CSS 的支援狀況最糟糕，ms-word 樣式類別經常覆蓋你的設定，最保險的做法是回歸表格排版。相對來說，Apple Mail 的支援度最好，但也不能因此就放膽用複雜 CSS，否則在其他客戶端很可能出問題。
| 客戶端 | 特殊注意事項 |
|---|---|
| Gmail | 不支援背景圖片、JavaScript |
| Outlook | 需使用表格排版，ms-word 樣式類別可能失效 |
| Apple Mail | 支援度較佳，但仍需避免複雜 CSS |
在 Figma 設定 EDM 畫布
了解規格後，就要在 Figma 裡建立正確的畫布。第一步，新增一個空白檔案，選擇「Design」類型。接著建立一個 Frame，尺寸設為 600x1000px（高度可視內容延伸）。如果你需要做手機響應式版本，就再建立一個 320px 寬的 Frame。最後開啟 Pixel Preview 模式，確認所有元素都對齊像素，沒有半透明或模糊的問題。
一個實用技巧是：先建立一個命名為「EDM_Desktop_600」的 Frame，再複製並命名為「EDM_Mobile_320」，然後微調手機版的內容。這樣能確保兩個版本的結構對應，修改時不會漏掉任何一側。
為什麼用 Figma 做 EDM？從設計流程到行銷價值
Figma 能在 EDM 設計領域突圍，核心原因在於它把「設計產出」與「協作流程」整合在同一個環境裡。對行銷人員來說，這意味著不需要頻繁來回寄檔案、對版本；對設計師來說，模板系統可以一次建立、永久複用。
Figma 相比傳統工具的優勢
如果你還在用 Illustrator 或 Photoshop 做 EDM，會發現幾個明顯的痛點：授權費用昂貴、檔案難以共享、版本控管混亂。Figma 完全免費（基本功能），而且是網頁應用，Windows、Mac 甚至平板都能開啟。多人即時協作更是殺手級功能、行銷人員可以直接在設計稿上留言回饋，不需要另外開會或寄 email 往返確認。版本歷史會自動儲存，隨時可以回到三天前的版本，這對需要反覆修改的 EDM 來說簡直是救星。
| 優勢項目 | 說明 |
|---|---|
| 免費且跨平台 | 網頁版/Windows/Mac 皆可使用，無授權費用 |
| 即時協作 | 行銷、設計、主管可同時檢視與批注 |
| 版本控制 | 自動儲存歷史版本，隨時回溯 |
| 原型整合 | 同一工具完成設計與互動預覽 |
EDM 行銷的 6 大核心好處
在動手設計之前，先理解 EDM 為什麼值得你投入時間製作。根據多份行銷數據報告，電子報行銷的投資報酬率平均落在 36:1 到 42:1 之間，這個數字遠高於多數數位廣告渠道。具體來說，EDM 有六個核心價值：
第一，顧客再行銷。透過定期的 EDM 觸及沉睡客戶，是召回消費者的最低成本方式之一。第二，建立品牌關係，每週或每月一封風格統一的 EDM，能持續加深讀者對品牌的記憶。第三，節省廣告成本，相較於點擊付費廣告，EDM 的單位觸及成本極低。第四，高轉換率潛力，根據 DMA 的數據，EDM 的平均轉換率高於 Facebook 與 Instagram 等社群平台。第五，精準數據追蹤，開信率、點擊率、轉換率都能量化分析，讓你能持續優化。第六，可自動化執行，設定觸發條件後，購物車未結帳、會員生日等情境都能自動寄送 EDM。
| 排名 | 好處 | 說明 |
|---|---|---|
| 1 | 顧客再行銷 | 透過 EDM 召回沉睡客戶，提升回購率 |
| 2 | 建立品牌關係 | 持續觸及客戶，加深品牌記憶 |
| 3 | 節省廣告成本 | 相較於付費廣告，EDM 單位觸及成本較低 |
| 4 | 高轉換率潛力 | EDM 平均轉換率高於社群媒體 |
| 5 | 精準數據追蹤 | 開信率、點擊率等指標可量化分析 |
| 6 | 可自動化執行 | 設定觸發條件後，自動化寄送省時省力 |
Figma EDM 在行銷漏斗中的角色
不同的行銷漏斗階段，對 EDM 的功能需求差異很大。在認知階段，EDM 主要用於品牌公告與新功能介紹，這時候需要的是能快速產出、風格統一的模板。在考慮階段，優惠資訊與案例分享是主力，設計系統的一鍵複製功能就能大幅節省調整時間。到了轉換階段，限時促銷與購物車提醒需要高轉換 CTA 按鈕，這時候預先建立好的按鈕元件庫就派上用場了。
換句話說，Figma 的元件系統讓你能在漏斗的每個環節都使用同一套視覺語言，讀者收到的每一封 EDM 風格一致，但內容針對不同階段做了優化。
Figma 基本操作快速上手：EDM 設計必學功能
用 Figma 做 EDM 不需要你是 Figma 專家，但有幾個核心功能必須掌握。Auto Layout、Frame 應用與圖層管理，是撐起整個 EDM 設計流程的三根柱子。
Auto Layout 在 EDM 的核心應用
Auto Layout 是 Figma 裡最值得投資時間熟悉的功能。對 EDM 設計來說，它解決了一個根本問題：當你修改某個區塊的內容時，整個版面的間距與尺寸不會跟著跑掉。具體來說，Auto Layout 的三大應用場景是：
彈性寬度、設定區塊隨內容或容器自動調整寬度，不用每次手動拉尺寸。間距控制、統一管理元素間距，例如設定 CTA 按鈕與上方文字的距離為 24px，未來修改時只需要改一個數值。溢位處理、設定文字過長時的顯示方式，是截斷顯示還是展開區塊，這對 EDM 裡的產品名稱或促銷文案特別實用。
Frame 與元件的階層管理
一個結構良好的 EDM 設計稿，必須有清晰的圖層階層。最外層是主 Frame，相當於整封 EDM 的容器。裡面依序是區塊 Frame：Header（信頭）、Hero Image（主視覺）、Body（主內容）、CTA（行動呼籲）、Footer（信尾）。
命名規範也很重要。建議使用「類型_用途」的命名方式，例如「EDM_Header_Logo」、「EDM_CTA_Button_Primary」。統一的命名規則讓你在一百個圖層裡依然能快速找到目標，大幅減少溝通成本與修改時間。
EDM 設計常用快捷鍵
熟練快捷鍵是提升設計效率的不二法門。以下是 EDM 設計中最常用的四個組合鍵：Ctrl/Cmd + Alt + C 用來複製元件屬性，例如你已經調好一個按鈕的圓角與陰影，用這個快捷鍵就能一鍵複製到其他按鈕上。Ctrl/Cmd + Shift + E 是導出選取元素，選中某個 Frame 或圖層後直接匯出，不需要再點右鍵選單。Ctrl/Cmd + Alt + K 是建立元件，把任何元素轉為可複用的元件。Ctrl/Cmd + Shift + O 則用來切換輪廓與填充模式，在檢視版面整體性時特別好用。
| 快捷鍵 | 功能 |
|---|---|
| Ctrl/Cmd + Alt + C | 複製元件屬性 |
| Ctrl/Cmd + Shift + E | 導出選取元素 |
| Ctrl/Cmd + Alt + K | 建立元件 |
| Ctrl/Cmd + Shift + O | 切換輪廓/填充模式 |
圖層面板的整理技巧
圖層面板是 Figma 裡最容易雜亂的地方，也是很多人忽略的效率瓶頸。建議按區塊類型建立資料夾：Header、Body、Footer 各一個資料夾，把相關元素拖進去。重要的圖層可以鎖定，避免誤選影響進度。統一命名規則則是讓你自己和團隊成員都能快速定位元素的關鍵。
從無到有：Figma EDM 模板製作實戰教學
了解規格與工具之後，終於要動手做了。這一段我會用一個完整的實作流程，帶你從無到有完成一封 EDM 模板。
EDM 基本版塊拆解
一封結構完整的 EDM，通常由五個核心區塊組成。Header（信頭）包含 Logo 與品牌識別，高度約 80-120px，Logo 左對齊是業界常見的做法。Hero Image（主視覺）是讀者第一眼看到的區域，用來放主圖或促銷 Banner，寬度固定 600px，高度建議 200-400px。Body（主內容）放文字與圖文區塊，建議左對齊或置中，保持足夠的留白空間。CTA（行動呼籲）是設計師最需要花心思的部分，按鈕要用對比色且尺寸要夠大。最後是 Footer（信尾），放版權聲明與取消訂閱連結，通常用小字與灰色調。
| 版塊名稱 | 內容說明 | 設計重點 |
|---|---|---|
| Header（信頭） | Logo、品牌識別 | 高度 80-120px，Logo 左對齊 |
| Hero Image（主視覺） | 主圖/促銷 Banner | 寬度 600px，高度建議 200-400px |
| Body（主內容） | 文字、圖文區塊 | 左對齊或置中，保持呼吸感 |
| CTA（行動呼籲） | 按鈕、超連結 | 對比色、清晰文案、夠大可點擊 |
| Footer（信尾） | 版權聲明、取消訂閱 | 小字、灰色調、法律必要資訊 |
Header 區塊製作步驟
Step 1：建立一個 600x100px 的 Frame，命名為「EDM_Header」。這個尺寸能容納 Logo 與頂部連結，同時不會佔用太多空間。
Step 2：置入 Logo 圖層。建議使用 PNG 透明背景的格式，這樣無論 EDM 背景是白色或淺色，Logo 都能乾淨呈現。將 Logo 尺寸設為高度 40-50px，保持視覺比例。
Step 3：加入「查看網頁版」文字連結，對齊右側。這是 EDM 的標準做法，讓無法正常顯示郵件的收件者可以透過連結在瀏覽器打開。
Step 4：在 Header 底部加入 1px 的分隔線，顏色設為 #E0E0E0。細線能有效區分 Header 與主內容，同時不會造成視覺負擔。
CTA 按鈕設計原則
按鈕是 EDM 裡轉換率最高的元素，設計時有幾個原則不能妥協。尺寸方面，寬度至少 120px，高度 40-50px，這是最小可觸控範圍。顏色對比是關鍵，按鈕顏色與背景的差異要足夠明顯，建議使用品牌色或能在灰白背景中跳出來的警示色。圓角設在 4-8px，能帶來現代感又不至於太卡通。文字用 10-12pt 的粗體，文案要直接告訴讀者行動內容，例如「立即領取」、「查看詳情」，避免「點擊這裡」這類模糊表述。
響應式設計實作
現在超過六成的 Email 在手機上被開啟，響應式設計不再是選項而是標配。桌機版的 Frame 寬度是 600px，採用標準的雙欄或單欄配置。手機版則設定在 320-375px 寬，圖片要縮放、欄位要堆疊、文字也要稍微縮小。
Auto Layout 在這裡發揮了巨大作用。將雙欄佈局改為單欄，只需要把 Frame 的方向從水平改為垂直。圖片寬度設為「Fill Container」，就會自動填滿新手機版寬度。文字大小從 16pt 調整為 14pt，避免在小螢幕上顯得擁擠。
用 Figma 高效設計 EDM 的工具鏈：必裝外掛推薦
Figma 原生功能已經很強，但外掛生態才是拉開效率差距的關鍵。以下整理五個 EDM 設計師幾乎必裝的外掛，每一個都能節省你大量的重複性作業時間。
EDM 設計必裝外掛清單
| 外掛名稱 | 核心功能 | 推薦指數 |
|---|---|---|
| html.to.design | 將 Email 網頁版直接轉為 Figma 設計稿 | ★★★★★ |
| Lorem Ipsum | 快速填充假文、假圖、假資料 | ★★★★☆ |
| Iconify | 超過 40,000 種向量圖示可搜尋使用 | ★★★★★ |
| Remove Background | 一鍵去背，省去 Photoshop 步驟 | ★★★★☆ |
| Brandfetch | 自動抓取品牌 Logo、色彩、字體 | ★★★★☆ |
html.to.design 深度應用教學
這是本篇文章最重要的差異化內容之一。html.to.design 的核心價值在於：它能把你喜歡的 EDM 範例頁面，直接轉換成可編輯的 Figma 設計稿。
具體操作流程如下。首先，在瀏覽器開啟你想參考的 EDM 頁面，可以是競品的電子報、知名品牌的行銷郵件，或是設計平台上找到的優質範例。接著，在 Figma 工作區的外掛面板搜尋並安裝「html.to.design」。安裝完成後，複製 EDM 頁面的 URL。回到 Figma，開啟 html.to.design 外掛，把 URL 貼上，選擇要匯入的範圍（整頁或特定區塊）。等待解析完成，通常只需要幾秒鐘，所有圖層就會自動轉為可編輯的 Figma 元素。最後，把轉換過來的元件儲存到你的檔案裡，替換品牌元素與文案，一封客製化的 EDM 模板就完成了。
這個流程能為你節省至少 50% 的版面設計時間。尤其當你需要參考多個範例的優點時，用這個外掛能快速截取各家所長，再用自己的品牌元素整合。
圖片素材準備工具推薦
設計 EDM 勢必要用到圖片素材，以下四個工具是我長期使用下來最推薦的組合。Unsplash 提供數十萬張高品質免費圖庫，搜尋「fashion」、「product」等關鍵字就能找到適合 EDM 主視覺的素材。remove.bg 用 AI 演算法做到一鍵去背，過去需要 Photoshop 才能處理的去背工作，現在只需要上傳圖片、等待十秒、下載完成。Heroicons 是一套由 Tailwind CSS 團隊維護的開源向量圖示集，風格簡潔，適合用在 EDM 的裝飾元素或功能標示。Flaticon 則是圖示與向量素材的最大資料庫之一，免費帳戶每天可下載一定數量。
| 工具名稱 | 用途 | 取得方式 |
|---|---|---|
| Unsplash | 高品質免費圖庫 | unsplash.com |
| remove.bg | AI 快速去背 | remove.bg |
| Heroicons | 開源向量圖示 | heroicons.com |
| Flaticon | 圖示與向量素材 | flaticon.com |
建立可複用的 EDM 設計系統：元件庫與樣式管理
如果你每做一封 EDM 都要從頭拉版面，時間成本會高得驚人。真正的效率提升，來自於建立一套可複用的 EDM 設計系統。Figma 的 Components 與 Styles 功能，就是為這個目的設計的。
EDM 元件庫（Components）架構
一個完整的 EDM 元件庫，至少應該包含四種核心元件。按鈕元件需要建立多狀態版本、Default（正常）、Hover（指標懸停）、Disabled（禁用），狀態越完整，實際應用時的彈性就越大。圖文區塊元件是可替換圖片與文字的組合，例如「ImageText_Left」（圖左文右）與「ImageText_Right」（圖右文左）。優惠券元件帶有折扣資訊的可變區塊，是電商 EDM 的常客。分隔線元件則提供視覺上的區塊劃分，「Divider_Line」（線條分隔）與「Divider_Image」（圖片分隔）是最常用的兩種。
| 元件類型 | 說明 | 範例 |
|---|---|---|
| 按鈕元件 | 多狀態（Default/Hover/Disabled） | CTA_Primary、CTA_Secondary |
| 圖文區塊元件 | 可替換圖片與文字的組合 | ImageText_Left、ImageText_Right |
| 優惠券元件 | 帶有折扣資訊的可變區塊 | Coupon_Banner |
| 分隔線元件 | 視覺分隔元素 | Divider_Line、Divider_Image |
建立按鈕元件的完整流程
以建立一個 Primary CTA 按鈕為例，說明元件的建立流程。首先設計 Default 狀態的按鈕：設定背景色、圓角與文字內容。選取這個按鈕，按下 Ctrl/Cmd + Alt + K 建立元件。在元件屬性中新增「Hover」狀態覆層（Override），設計 Hover 時的樣式、通常背景加深 10%、指標變化為手指圖示。完成後將元件發布至團隊元件庫，其他成員就能直接拖曳使用，未來修改時只要更新主元件，所有實例都會同步更新。
樣式系統（Styles）管理
樣式系統讓你一次定義就能處處應用。色彩樣式用來管理按鈕背景色、強調色與灰階色系；文字樣式則建立從標題到標籤的完整字體階層。效果樣式（Effects）用於陰影、光暈等視覺效果。
建立樣式的方式很直覺：在 Figma 右上角點擊「Design」面板，找到「Styles」區塊，選擇「Colors」或「Text」即可建立。建立完成後，只要在屬性面板中點擊「四色圓點」圖示，就能快速套用已建立的樣式。
使用 Styler 外掛批次建立樣式
手動一個一個建立樣式很耗時，Styler 外掛能幫你批次處理。Color Styles 功能可以一次建立品牌色彩系統，設定好主色之後，外掛會自動生成同一色系的深淺變化作為輔助色與灰階。Text Styles 功能則能快速建立字體階層，例如從 32pt 的 H1 標題一路設定到 10pt 的標籤文字。Effect Styles 用來建立按鈕陰影、卡片陰影等效果庫。
這裡有個實務經驗分享：建立 EDM 樣式系統時，建議同時製作「深色模式」版本。越來越多郵件客戶端支援深色模式，如果你的 EDM 只設計了淺色版本，在深色模式下文字會變成刺眼的白色，阅读体验大打折扣。
確保多人協作時的風格一致性
當團隊有多位成員共同使用同一個 EDM 設計系統時，需要一些管理機制來防止風格走鐘。發布共用元件庫是最根本的做法，讓所有成員都從同一個元件庫拖曳使用，而不是自行建立。建議設定貢獻規範：新元件必須經過審核才能發布，避免重複或品質不一的元件佔據資源。元件更新時要主動通知團隊，否則成員可能還在用舊版元件。最好在 Figma 內建立一份設計規範文件，說明各元件的使用情境與規範。
從 Figma 到 Email：設計稿輸出與測試要點
設計稿完成後，最後一哩路是將它轉換為可寄送的 Email 格式。這個階段最常見的錯誤是忽略跨客戶端測試，導致辛苦設計的 EDM 在收件者的 Outlook 裡變成一團糟。
圖片資源輸出設定
Figma 的匯出功能支援 PNG、JPG 與 SVG 三種格式。PNG 適合需要透明背景的元素，例如 Logo 與小圖示。JPG 適合照片與主視覺圖片，建議匯出時將品質設在 80-85%，能在保持畫質的同時控制檔案大小。GIF 則需要另外處理，如果你的 EDM 有動態效果，需要先在其他工具中完成動畫後再匯入 Figma。
| 格式 | 建議用途 | 解析度設定 |
|---|---|---|
| PNG | 需要透明背景的元素（Logo、圖示） | 72 DPI |
| JPG | 照片、主視覺圖片 | 72 DPI，品質 80-85% |
| GIF | 動態效果 Banner | 72 DPI |
推薦的 Figma 輸出工具
Figma 本身支援基本的圖片匯出，但如果需要更進階的 Email 格式轉換，有幾個工具值得一試。Figma to Email 這個外掛能直接輸出 Email 兼容格式，適合需要快速轉換、不想另外處理 HTML 的情境。Htmlifier 則是將 Frame 轉為 HTML 程式碼的工具，適合有進階客製化需求、願意自己調整 CSS 的使用者。Image Export 是 Figma 內建的批次匯出功能，選取多個圖層後一鍵匯出所有素材。
| 工具名稱 | 功能特色 | 適用情境 |
|---|---|---|
| Figma to Email | 直接輸出 Email 兼容格式 | 需要快速轉換 |
| Htmlifier | 將 Frame 轉為 HTML 程式碼 | 進階客製化需求 |
| Image Export | 批次匯出圖層為圖片 | 圖片素材準備 |
EDM 預覽與測試清單
送出 EDM 之前，請逐項檢查以下項目。桌機顯示方面，確認版面是否正確、圖片是否正常載入。手機顯示方面，測試響應式斷點是否正常、文字是否過小。跨客戶端測試是最容易被跳過但也最關鍵的一步，務必在 Gmail、Outlook 與 Apple Mail 三個主流客戶端各寄一封測試郵件。深色模式測試近年越來越重要，如果你的 EDM 有深色版本，要確認在深色模式下顯示正常。所有 CTA 按鈕的連結必須逐一點擊確認有效性，連結錯誤是 EDM 行銷中最致命的失誤之一。
常見輸出問題與解決方案
圖片模糊是最常見的輸出問題，通常是因為解析度設錯了。解決方式很簡單：回到 Figma 重新匯出，確認解析度為 72 DPI。版面跑版則可能是因為使用了不支援的 CSS 屬性，這時建議改用表格排版或使用專業的轉換工具。字體變色是 Outlook 用戶常見的困擾，Outlook 有時會用自己的預設樣式覆蓋設計師的設定，解決方案是使用安全字體（如 Arial、Georgia）或直接將關鍵文字轉為圖片。
| 問題 | 可能原因 | 解決方案 |
|---|---|---|
| 圖片模糊 | 解析度不足 | 重新匯出 72 DPI 圖片 |
| 版面跑版 | 使用了不支援的 CSS | 改用表格排版或使用專業轉換工具 |
| 字體變色 | Outlook 預設樣式覆蓋 | 使用安全字體或圖片化文字 |
常見問題與解決方案
以下整理讀者最常提出的幾個問題，幫助你快速找到解答。
Figma 可以直接設計 EDM 嗎？
可以。Figma 的 Frame、Auto Layout 與元件功能完全能勝任 EDM 設計需求。設計完成後需要將圖層匯出為圖片，或透過外掛轉換為 HTML 格式，再匯入 EDM 寄送平台。Figma 本身不具備發送 Email 的功能。
EDM 設計的標準尺寸是多少？
桌機版標準寬度為 600px，寬版可至 640px。手機版寬度建議 320-480px。圖片解析度統一使用 72 DPI，過高的解析度只會增加檔案大小而無助於顯示品質。
Figma EDM 需要做手機版嗎？
強烈建議製作。根據統計，超過 60% 的 Email 在手機上被開啟，如果只做桌機版，手機上的閱讀體驗會大幅下降，甚至導致讀者直接刪除郵件。用 Figma 的 Auto Layout 製作響應式版本並不困難，時間成本遠低於放棄手機族群的代價。
哪些 Figma 外掛適合 EDM 設計？
推薦五個必裝外掛：html.to.design（將網頁 Email 轉為可編輯 Figma 稿）、Lorem Ipsum（快速填充假文假圖）、Iconify（40,000+ 向量圖示）、Remove Background（一鍵去背）、Brandfetch（自動抓取品牌 Logo 與色彩）。
如何讓 Figma 設計的 EDM 支援深色模式？
在建立 EDM 設計系統時，同時建立「Light Mode」與「Dark Mode」兩套色彩樣式。深色模式下將背景色改為深色（#1A1A1A 或 #000000），文字色改為白色或淺灰色。匯出時需要分別匯出兩個版本的圖片素材，再由 EDM 寄送平台根據收件者的系統設定自動切換顯示。
Figma 免費版能做 EDM 元件庫嗎？
可以。Figma 免費版已支援 Frame、Auto Layout、基本元件（Components）與樣式（Styles）功能。建立個人專用的 EDM 元件庫完全沒有問題，但若要與團隊成員共享元件庫，則需要升級至付費方案。
EDM 的圖片解析度要多少？
標準為 72 DPI。EDM 是螢幕顯示媒介，不是印刷品，72 DPI 在所有郵件客戶端都已足夠清晰。過高的解析度只會讓檔案變大、載入變慢，反而對使用者體驗造成負面影響。
html.to.design 外掛怎麼用？
在 Figma 中安裝外掛後，三步驟完成操作：複製任意 Email 網頁版的 URL、在外掛中貼上 URL 並選擇匯入範圍、等待解析完成後獲得可編輯的 Figma 圖層。接著用自己的品牌 Logo、文案與色彩替換原始元素，快速完成客製化 EDM 設計。
如何確保多封 EDM 風格一致？
建立企業級的 EDM 設計系統是根本解法。將所有按鈕、區塊、色彩樣式與文字樣式定義在 Figma 元件庫中，每次製作新 EDM 都從元件庫拖曳使用，而非重新設計同一個按鈕。同時制定設計規範文件，記錄字體、色彩、按鈕尺寸等標準，讓所有成員都有參照依據。
Figma EDM 設計完怎麼寄送？
Figma 本身不具備 Email 寄送功能。設計稿完成後的流程是：將圖層匯出為 PNG/JPG 圖片，或使用 Htmlifier 等工具轉為 HTML 程式碼，再匯入 Mailchimp、Salesforce Marketing Cloud、eSpring 等 EDM 寄送平台，最後設定收件名單與發送時間完成寄送。
Outlook 顯示異常怎麼辦？
Outlook 對 CSS 的支援度向來是業界痛點。常見的解決方案包括：使用表格排版取代 div 層疊結構、避免使用複雜的 CSS 屬性（如 Flexbox、Grid）、使用安全字體（Arial、Georgia）取代網頁字體、將重要文字轉為圖片以確保顯示一致性。寄送前務必在 Outlook 實際測試一遍。
Figma 可以輸出 HTML 嗎？
Figma 本身不直接輸出 HTML，但可以透過外掛輔助。Htmlifier 能將 Frame 轉為 HTML 程式碼，但輸出的語法品質參差不齊，複雜版面往往需要手動調整。另一個做法是將設計稿匯出為圖片，交由前端工程師轉換為 Email 友善的 HTML。