身為一個同時跟設計師和工程師合作的 UI/UX 設計師，「設計交接」一直是我最頭痛的環節。以前都是用 Zeplin 或手動標註，工程師還是會跑來問：「這個間距到底是 8px 還是 12px？」、「這個顏色的變數名稱是什麼？」

直到 Figma 推出 Dev Mode，一切都不一樣了。今天這篇Figma Dev Mode 設計交接教學，就是我實際在團隊中導入 Dev Mode 的經驗總結。

什麼是 Figma Dev Mode？

Dev Mode 是 Figma 針對「開發者」推出的專屬檢視模式。跟設計模式不同，在 Dev Mode 裡你看到的不是設計工具，而是：

精確的尺寸標註
CSS / SwiftUI / Jetpack Compose 程式碼片段
設計元件的變數名稱和 Token 值
版本之間的差異比較
連結到外部開發資源（Jira、Storybook 等）

簡單說，它就是一個專為工程師打造的「唯讀+智慧標註」介面。

Ready for Dev 工作流程

Dev Mode 最強大的功能之一是「Ready for Dev」標記。設計師做好一個頁面之後，可以把它標記為「Ready for Dev」，這就像是在跟工程師說：「這部分的設計已經確認了，你可以開始做了。」

工作流程是這樣的：

設計師完成設計，確認所有元件、顏色、間距都正確
在 Dev Mode 的側邊欄中，把該 Section 或 Frame 標記為 Ready for Dev
工程師在 Dev Mode 中就能看到哪些部分是已確認可以開發的
設計修改時，系統會自動標記哪些「Ready」的部分有變動

這解決了一個老問題：工程師做到一半，設計師突然說「等等，那個部分我還在改」。有了 Ready for Dev 的機制，雙方對進度的掌握更清楚。

提取程式碼片段

在 Dev Mode 中點選任何元素，右側面板就會顯示對應的程式碼。支援的格式有：

CSS：包含 flexbox 排版、color、padding、border-radius 等
SwiftUI：iOS 原生開發
Jetpack Compose：Android 原生開發

特別值得一提的是，Figma 的 Auto Layout 屬性會直接對應到 CSS Flexbox。這意味著設計師在 Figma 中用 Auto Layout 設定的 gap、alignment、padding，工程師可以一對一地轉成 CSS flexbox 屬性。如果你還不熟悉 Auto Layout，建議先看看 Figma Auto Layout 完整教學。

單位轉換

在設定中，你可以把輸出單位切換為 px、rem 或 pt。我的建議是跟團隊約定好用 rem，這樣比較容易做響應式設計。

Design Tokens 與變數

如果你的設計檔有使用 Figma Variables（顏色、間距、圓角等），在 Dev Mode 中工程師看到的就不會是靜態的 #3B82F6，而是變數名稱 --color-primary-500。

這對維護設計系統超級重要。工程師可以直接用變數名稱來寫 CSS，而不是寫死十六進位色碼。當設計師改了顏色值，只要變數名稱不變，前端程式碼完全不用動。

想深入了解如何建立完整的 Tokens 系統，推薦閱讀 Figma Variables 設計 Tokens 教學和設計系統 Design Tokens 指南。

版本比較功能

設計稿經常會改版，工程師最怕的就是不知道「到底改了什麼」。Dev Mode 的 Compare 功能解決了這個問題：

選擇一個元件或 Frame
點擊「Compare changes」
系統會自動顯示上次「Ready for Dev」之後的所有變更
包含屬性的具體差異（例如 padding 從 16 改成 12）

這就像是設計檔的 git diff，工程師一目了然該更新哪些地方。

VS Code 擴充套件整合

Figma 有一個官方的 VS Code 擴充套件，安裝之後可以直接在編輯器中：

瀏覽 Figma 設計檔
點選元件查看程式碼片段
複製 CSS 程式碼到正在編輯的檔案中
看到設計檔的即時更新通知

我們團隊的前端工程師裝了這個套件之後，幾乎不需要再切換到瀏覽器看 Figma 了。減少上下文切換 = 提升效率。

Code Connect：元件與程式碼的橋樑

Code Connect 是 Figma 在 2024 年底推出的進階功能。它讓你可以把 Figma 的元件直接對應到實際的程式碼元件。

例如，你有一個 Figma 中的 Button 元件，可以用 Code Connect 把它連結到 React 的 <Button /> 元件。這樣工程師在 Dev Mode 中看到這個 Button 的時候，顯示的就不是通用的 CSS，而是你團隊的元件用法：

<Button
  variant="primary"
  size="md"
  onClick={handleClick}
>
  送出
</Button>

2026 年的更新已經支援了 Angular、Vue 和 HTML 等框架，不再只限於 React。

Dev Resources：集中管理外部連結

另一個實用的功能是 Dev Resources。你可以把外部資源直接連結到 Figma 元件上：

Jira 票號
Storybook 元件頁面
GitHub 檔案連結
API 文件

這樣工程師在看設計的時候，所有需要的上下文都在同一個地方。不用再到處翻找。

設計交接最佳實踐

根據我的實際經驗，這些做法能讓 Dev Mode 的效果最大化：

統一命名規則：圖層名稱要有意義（「header-nav」而不是「Frame 123」），工程師才看得懂
善用 Component Properties：把元件的各種狀態（hover、active、disabled）做成 Properties，而不是分散在不同頁面
建立設計交接 Checklist：標記 Ready for Dev 之前，檢查所有顏色是否用了變數、間距是否一致、文字是否用了正確的 Style
定期 Design Review：每週跟工程師一起看一次 Dev Mode，確認有沒有看不懂的地方
用 Section 組織頁面：把不同功能模組放在不同的 Section，方便分批標記 Ready for Dev

想了解更多 Figma 的進階互動設計，可以參考 Figma 微互動原型教學。