Figma Dev Mode 完整教學:設計師與工程師的高效交接指南
身為一個同時跟設計師和工程師合作的 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 微互動原型教學。
總結
Figma Dev Mode 不只是一個工具更新,它代表了設計師和工程師合作方式的根本性轉變。從「丟一個 PDF 標註檔過去」到「在同一個平台上即時同步」,這個進步是巨大的。如果你的團隊還在用傳統的設計交接方式,現在是時候升級了。
想更全面地掌握 Figma 的設計系統建設,歡迎閱讀我們的 Figma UI 設計系統實戰指南。
繼續閱讀
Figma AI 功能完全攻略:Make、圖片編輯到 MCP 雙向工作流一次搞懂
相關文章
你可能也喜歡
探索其他領域的精選好文