設計交付失敗的常見原因
設計交付後頻繁出現「這個不對」的問題，通常有這幾個根源：
Figma 稿件不整潔：圖層沒有命名、元件沒有組織、有各種跑版或重疊的元素，開發者解讀時出錯。
缺乏互動說明：靜態設計稿只呈現一個狀態，但頁面有 hover、active、focus、error、empty、loading 等多種狀態，全部沒有設計就是留給開發者猜。
沒有設計規格說明：開發者不知道這個間距是 16px 還是 18px，這個顏色的色碼是什麼，這個文字用的是哪個字重。
不符合開發的實現方式：設計師設計了極複雜的動效或 3D 效果，但沒有和開發者討論技術可行性就直接交付，修改溝通來回消耗大量時間。
交付前的 Figma 稿件準備
整理圖層和命名
每個主要元素、元件、Frame 都應該有有意義的名稱：
不好：「Frame 43」「Rectangle 12」「Group 7」
好：「Hero Section」「CTA Button - Primary」「Navigation Bar」
用 Section 功能把頁面分成清楚的區塊（Pages：Desktop / Mobile；各頁面的 Main Flows 清楚分隔）。
建立並使用 Variables 和 Styles
使用設計系統中定義的顏色變數（而不是直接選色），使用文字樣式（而不是每次手動設定字型大小）。
這讓開發者在查看具體數值時，能一眼看到「這個顏色是 accent-600，對應 Tailwind 的 text-accent-600」，不需要每次都檢查色碼。
補充設計說明文件
交付 Figma 稿時，附上一份設計說明文件（可以是 Figma 中的 Comment 或 FigJam 頁面，也可以是 Notion 文件）：
互動狀態說明
列出頁面中所有需要程式控制的互動狀態：
按鈕：Normal / Hover / Active / Disabled / Loading
表單輸入：Empty / Focus / Filled / Error / Success
彈出視窗：如何觸發、如何關閉、是否有過渡動畫
導覽選單：手機版和桌機版的展開/收合行為
對每個狀態，在 Figma 中建立對應的畫面，不要依賴開發者「自行發揮」。
動效說明
如果有過渡動畫，說明：
類型：Fade（不透明度）/ Slide（位移）/ Scale（縮放）
時間長度：300ms / 500ms
緩動函式（Easing）：ease-out / ease-in-out 等
觸發條件：何時播放動效
Figma 的 Prototype 功能可以預覽部分動效，幫助開發者理解設計意圖。
響應式斷點說明
如果設計有多個版本（Desktop + Mobile + Tablet），要說明：
在哪個斷點（例如：768px）發生佈局改變
各種螢幕寬度下的 Padding 和間距如何調整
哪些元素在特定斷點隱藏或改變位置
只提供一個桌面版設計稿卻沒有說明行動端行為，是最常導致行動端體驗差的原因。
在 Figma Dev Mode 中標注規格
Figma 的 Dev Mode（開發模式）讓開發者能切換到設計稿的「開發視角」，直接查看選取元素的：
CSS 樣式規格（寬高、間距、顏色色碼、字型大小/字重/行高）
使用的設計 Token（如果你的設計稿用了 Variables）
Export 選項（圖片元素可以直接 Export）
善用 Dev Mode 的前提是：你的 Figma 稿件必須整潔、使用了設計系統中的 Styles 和 Variables。雜亂的設計稿在 Dev Mode 中看到的資訊也是混亂的。
建立協作節奏
定期的「設計評審（Design Review）」：在開發之前，設計師和開發者一起看畫面，讓開發者提前了解設計意圖，也讓設計師聽到「這個在技術上很難做到」的即時反饋，避免後期大改。
使用 Figma Comment 對話：讓開發者在位有疑問的畫面直接留言，設計師回覆，保留溝通記錄，比在 LINE 群組來回問答更有效率。