Figma Config 2026：程式碼圖層、原生動畫與 AI 外掛，設計與開發的邊界正式瓦解

在 Figma 的大部分歷史中，它一直是設計工作「結束」、工程工作「開始」的地方。設計師建好元件、標註好規格，把文件交給重新用程式碼實現一遍的開發者。Config 2026——Figma 於 6 月下旬舉辦的年度使用者大會——是這家公司正式宣告：這條界線，它不打算再接受了。

核心發布——程式碼圖層（Code Layers）——讓團隊可以直接在 Figma 畫布上 clone 程式庫，在設計圖層旁邊操作真實的程式碼。搭配這一功能一起發布的，還有原生動畫支援、AI 生成視覺效果，以及一個讓任何人都能用自然語言建立自訂 AI 工具的外掛系統。統合來看，這些發布代表了 Figma 有史以來最深遠的產品擴張。

程式碼圖層：核心發布

程式碼圖層將可執行的程式碼直接帶入協作畫布。團隊現在可以將一個程式庫 clone 進 Figma，從程式碼中提取 UI 流程至設計圖層進行探索與測試。系統支援以 React 為基礎的程式碼和 npm 套件，包括主流動畫函式庫和 3D 框架。

這個機制與 Figma 過去提供的功能有本質差異。2023 年推出的 Dev Mode、程式碼檢視面板——這些功能的本質都是閱讀程式碼：讓設計師查看元件規格對應的 CSS 或 React 程式碼。程式碼圖層則是執行程式碼。你可以把生產環境的元件拉進畫布，透過 Figma 的 AI 對話介面或內建的程式碼編輯器修改它，並將結果直接作為原型或交付物的工作基礎。

首席產品官山下裕樹（Yuhki Yamashita）以區分「探索」與「生產」的框架詮釋這一設計意圖：在探索和發想階段，程式碼圖層創造了一個「不需要在乎程式碼品質」的環境。目標是讓設計畫布成為設計師、工程師和產品經理在真實 UI 上協作的空間，而不必等待生產就緒的實現或完善的視覺稿。

程式碼圖層也在 Figma Sites（產品的無程式碼建站工具）中運作，讓非工程師背景的使用者也能在不開啟程式碼編輯器的情況下，將真實元件整合進即時網頁。

原生動畫與 3D 變換

此前，Figma 的動態展示能力非常有限。需要呈現動畫效果的設計師，得在 After Effects、Rive 或其他專業工具中製作，匯出後再想辦法向最終負責實現的開發者傳達設計意圖。「這個動畫應該是什麼感覺」和「生產環境的動畫實際做出來是什麼樣子」之間的落差，是長年以來摩擦和返工的重要來源。

Config 2026 填補了這個缺口。Figma 現在在設計文件內原生支援動畫、轉場和 3D 變換。設計師可以直接在 Figma 內建立和預覽動態效果，無需匯出至外部工具或進行程式碼轉換步驟。這樣的動態預覽就是預期的實現規格，而不是它的近似描述。

3D 變換能力尤為值得關注。隨著裝置硬體算力提升，網頁和行動端 UI 設計越來越多地加入景深、視差和立體感轉場效果。Figma 過去無法原生呈現 3D 變換，逼迫設計師採用各種變通方案，難以完整傳達設計意圖。Config 2026 的更新消除了這一限制。

AI 生成著色器與自訂技能

Figma 於 2024 年引入的 AI 設計智能體在本次大會中得到了大幅擴展，其中兩項新能力尤為突出。

著色器生成：Figma 的 AI 現在可以生成 GLSL 著色器效果和填充——這些在 GPU 上運行的數學程式，用於產生光線散射、材質扭曲、流體模擬和複雜漸層等視覺效果。著色器程式設計技術門檻極高，長期以來對沒有圖形程式設計背景的設計師幾乎不可觸及。AI 生成著色器改變了這一現實，讓設計師可以用自然語言描述想要的視覺效果，並獲得可直接套用於設計文件元素的著色器實現。

自訂 AI 技能：使用者現在可以透過文字提示，為 Figma 設計智能體建立可重複使用的 AI 能力。描述一個重複性任務——「從內容項目清單生成版面」、「從點陣圖像追蹤向量路徑」、「將此元件的所有實例調整至特定斷點尺寸」——系統就會建立一個智能體可按需執行的可重複技能。這些技能可以在團隊間共享，意味著設計系統團隊可以建立並發布一個 AI 輔助自動化技能庫，供組織中所有人使用，無需每次重新指定操作邏輯。

自訂技能系統還整合了外部工具。使用者可以連接 Notion、Granola、Excel、GitHub 等服務，讓 Figma AI 智能體在執行任務時獲取更豐富的上下文。一個能同時讀取 Notion 中的產品規格和 Excel 中的內容表格、並同步執行版面任務的設計智能體，代表著向自動化處理機械性設計工作、將創意判斷留給人類的設計工作流程邁出了有意義的一步。

Weavy 整合已在路線圖上

還有一個針對 2026 年晚些時候的發布：Figma 計劃將其於 2025 年 10 月收購的節點式 AI 媒體工作流程工具 Weavy 直接整合進 Figma 畫布。整合後，使用者可以在 Figma 內生成 Weavy 工作流程，讓視覺設計與後端 AI 媒體處理之間的連接更加緊密。

收購 Weavy 時，業界曾對 Figma 如何把一個工作流程自動化工具融入設計產品感到疑惑。Config 2026 提供了第一個具體答案：Weavy 工作流程將作為可生成、可執行的流程從設計畫布中調用——是 Figma 將畫布推向日益自動化的設計到生產流水線核心協作介面這一策略的又一層。

更廣泛的戰略背景

這些發布的時機並非巧合。Figma 正在多個方向上面臨競爭壓力。

AI 原生設計工具——包括 Vercel 的 v0、基於 Cursor 的 UI 生成器，以及越來越多的 AI 優先設計原型工具——正在吸引那些從一開始就想貼近程式碼工作的開發設計師，而不是在另一個設計圖層中操作。程式碼圖層是 Figma 的直接回應：如果畫布可以承載真實程式碼，就沒有理由離開 Figma 去靠近實現。

設計與開發的交付摩擦問題隨著 AI 程式碼助手加速開發者交付 UI 的速度而愈發突出。當使用 Copilot 或 Cursor 的開發者可以在一小時而非一天內實現設計規格，交付摩擦的時間成本佔比就成比例增大。每花在將設計意圖轉化為程式碼規格上的時間，都是總耗時中更大的一塊。程式碼圖層直接攻克這一問題，讓設計文件本身成為實現的唯一真相來源。

平台整合是開發者工具市場的長期大趨勢。同時運行 Figma 做設計、GitHub 管程式碼、Notion 寫規格、Linear 做專案管理的團隊，都有動機減少工作流程中的上下文切換次數。Figma Config 2026 的發布——外部工具整合、把程式碼引入設計環境的程式碼圖層、Weavy 工作流程生成——都在推動 Figma 成為減少上下文切換的樞紐，而不只是龐大工具鏈中的一個節點。

山下裕樹首席產品官在程式碼圖層發布時明確表達了這一定位，指出這一功能「不只改變設計師的行為，也改變工程師和 PM 的行為」。Figma 正在將自身定位為一個協作介面，而不僅僅是設計工具——Config 2026 的一系列發布，讓這一定位比以往任何時候都更加具體落地。

對開發者意味著什麼

對產品團隊而言，實際影響相當深遠。設計審查不再需要另行建立原型環境，或請開發者搭建粗糙的實現供利害關係人查看。工程主管可以在 Figma 畫布中用真實程式碼向非技術背景的利害關係人展示功能的實際行為。設計師可以在不請開發者搭建測試環境的情況下，測試元件行為的邊界情況——例如清單有 200 個項目時會怎樣、空狀態長什麼樣。

這一轉變究竟是加速了產品開發，還是只是把摩擦從交付階段移到了設計階段，是團隊在接下來幾個月中將用實踐驗證的問題。但方向已然清晰：Figma 已下定決心不再只是一個設計工具，而 Config 2026 是它迄今為止對自身想成為什麼最具體的一次宣示。