十多年前做企業網站，設計稿多半是一個個 PSD 或 Sketch 檔，靠雲端硬碟或 Email 傳來傳去，檔名從「首頁_final」一路長成「首頁_final_改3_真的最終版」。工程師拿到檔案還得自己量間距、吸色碼、切圖，設計一改又要重來一輪。Figma 出現之後，設計稿變成放在雲端、用瀏覽器就能打開的連結，設計師、工程師、PM 甚至客戶都能同時看著同一份檔案。這篇從實務角度說明 Figma 協作改變了哪些環節：雲端即時協作的本質、設計師與工程師的交接方式，以及 UI/UX 團隊工作流如何重新排列。
從傳檔案到傳連結：雲端即時協作的本質
傳統設計工具以本機檔案為核心，檔案存在誰的電腦裡，誰就握有最新版本。設計師改完要重新匯出、重新上傳，其他人手上很可能是舊版；工程師照著上週的稿子做了半天，才發現版面早就調整過。部分工具只能在特定作業系統執行，用 Windows 的工程師甚至得另外想辦法才能打開原始檔。
Figma 把檔案放在雲端，不論用瀏覽器或桌面應用程式打開，看到的都是同一份。多人可以同時進入，畫面上會出現其他人的游標與名字，誰正在改哪個區塊一目了然。版本紀錄會自動保存，需要時可以回到先前的狀態，也能為重要節點手動命名，例如「客戶確認版」。過去靠檔名管理版本，現在靠檔案內的歷史紀錄。
對團隊來說，最明顯的差別是有了「單一資料來源」。設計稿只有一份，修改當下就反映給所有人。不過即時也代表沒有緩衝：設計師還在嘗試的方案，工程師可能已經看見並開始動工，所以雲端協作最好搭配清楚的分區與狀態標示。
Figma 協作下的設計交接：工程師拿到的不再只是圖
傳統交接通常是設計師輸出標註圖和切圖包，或另外上傳到專門的標註工具。工程師拿到的是靜態畫面，接著一項項追問：滑鼠移上去長怎樣？手機版怎麼排？這段來回往往比畫圖本身還耗時。
在 Figma 裡，工程師點選任一元素就能看到尺寸、間距、字級、行高與色碼，並有 CSS 等程式碼片段可供參考；設計師事先設定好匯出格式，工程師就能自行匯出 SVG 或 PNG。Figma 也提供給開發者使用的 Dev Mode，把檢視規格、比對修改等功能集中在一起，實際可用功能依方案而定。
比規格自動化更關鍵的是元件化。設計師用元件（Component）與變體（Variant）建立按鈕、表單、卡片，再用 Auto Layout 定義排列方向與間距規則，這套邏輯和前端的元件化、Flexbox 排版相當接近。設計稿的結構對得上程式碼的結構，工程師就能一對一對應，而不是照著一張圖重新拼湊。顏色與字級若用樣式或變數（Variables）管理，也比較容易轉成前端的 CSS 變數或 design tokens。
交接前，我通常會請設計師確認這幾件事：
- 每個畫面標明狀態，例如在頁面或區塊名稱註記「設計中」「可開發」。
- 元件的各種狀態都畫出來，包含預設、hover、停用、錯誤。
- 手機、平板、桌機的關鍵斷點都有對應版型。
- 互動與轉場用原型（Prototype）示意，難以表達的部分直接加註解。
自動產生的 CSS 只能當參考，不要整段貼進專案。它常帶著寫死的絕對數值，未必符合專案既有的命名規則與排版架構。
工作流的重新排列：從接力賽變成同場作業
傳統流程像接力賽：PM 寫需求、設計師畫線框與視覺稿、客戶確認後交給工程師，工程師發現某個設計做不到，再整包退回。每一次來回，都得等前一個人做完。
Figma 協作讓這條線有機會並行。工程師可以在線框階段就進檔案，提早指出「這個動態效果在現有架構下成本很高」或「列表資料量大時要考慮分頁」；PM 和客戶直接在畫面上留言，留言釘在特定位置，討論脈絡跟著設計稿走，不必在通訊軟體裡翻找截圖。設計師處理完把留言標記為已解決，大家就知道哪些意見已經落實。
審稿方式也跟著改變。以前開會投影 PDF，會後再整理修改清單；現在直接分享連結，與會者可以點擊原型實際操作，意見當場留在檔案裡。對外部客戶可以只開檢視或留言權限，避免誤改版面。
元件也能發布成團隊共用的資源庫，讓多個專案引用同一套元件。主元件更新後，引用的檔案會收到更新提示，再決定是否套用。同時維護多個網站或產品線的團隊，這樣通常比較容易維持視覺一致。
導入 Figma 協作時常見的落差與團隊規範
工具換了、習慣沒換，效果就有限。常見狀況是檔案毫無結構，正式稿、廢案、參考圖全混在同一頁，工程師打開不知道該看哪一個；或圖層全叫 Frame 123、Rectangle 45，交接時對照起來非常吃力。
幾個實務上常用的規範：
- 檔案依專案切分，頁面依階段或功能區分，例如「參考」「線框」「視覺稿」「已交付」。
- 圖層與元件命名盡量貼近前端用語，例如
button/primary。 - 權限分層，編輯權只給真正需要的人。
- 重要修改後在版本紀錄命名，並用留言通知相關工程師。
另一個落差是角色邊界模糊。人人都能進檔案，不代表人人都該動檔案。客戶直接拖動元素、工程師為了方便自行調整圖層，都會讓設計師失去對版面的掌控。團隊最好事先約定誰能改什麼、意見統一用留言表達。另外，Figma 的協作主要仰賴網路連線，元件與圖片過多的大型檔案在較舊的電腦上可能變得緩慢，適度拆分檔案，能讓所有參與者用起來更順。