Figma將GitHub引入設計畫布——Code Layers能否跨越設計與開發的鴻溝

Figma的新功能Code Layers實現了兩年前看來幾乎不可能的事：允許將GitHub儲存庫直接克隆到設計畫布上。儲存庫出現在畫布後，可從現有程式碼中提取可編輯的設計框架，進行視覺修改，再將變更同步回儲存庫——一切都在單一Figma檔案內完成，即時協作功能完整保留。設計與開發在同一個視窗中共存。

對於多年來一直在撰寫交接說明、將規格複製到Jira工單或向工程團隊傳送Zeplin連結的設計師來說，Code Layers改變了設計與程式碼對話發生的地方。Figma中的修改會更新底層程式碼；程式碼中的修改會更新設計圖層。兩個領域之間的橋梁始終需要切換情境，現在這種切換的代價變小了。

Figma Motion將動畫轉化為可直接交付的程式碼

Figma還發布了Motion——一個直接內建於畫布的關鍵影格動畫時間軸。設計師可使用時間軸和預設庫建立過渡效果、懸停狀態和捲動動畫，然後以七種格式匯出：CSS、JSON、React、MP4、WebM、動畫SVG和GIF。在Figma中設計的載入動畫不再是開發人員需要解讀的參考文件——它本身就是動畫。

第三項重要發布是著色器效果（Shader Effects）——由WebGPU（瀏覽器最新圖形標準）驅動的GPU加速填充，使設計師能夠將複雜的、以數學方式生成的視覺紋理直接套用至Figma圖層。Figma的AI助手可根據文字描述或上傳的圖像生成這些自訂著色器填充。輸入「帶有柔和藍色干涉圖案的磨砂玻璃」等短語，畫布便會生成即時渲染且可互動調整的內容。

AI助手新增技能、工具與外部連結

AI助手本身也有了顯著擴充。它現在可以從自然語言提示中建構可重複使用的「技能」——無需API知識即可自動化重複設計任務的自訂工具——並直接連接到包括Notion、GitHub和Microsoft Excel在內的外部服務。2026年稍後的更新將加入Weavy——Figma去年收購的工作流程建構器，支援在設計檔案內進行節點式自動化。

並非所有功能今天就能使用。Code Layers目前處於早期存取階段，申請將於2026年7月開放；需要付費Figma方案中的Full席位。著色器效果和增強版AI助手已在付費方案中上線。Figma Motion現已面向Full席位用戶開放，Code Layers的全面發布預計在2026年稍後進行。

Figma吸收程式碼編輯器工作流程的雄心面臨一個切實的問題：編寫程式碼與設計介面是不同的認知活動，而上週被SpaceX以600億美元收購的AI程式碼編輯器Cursor，其用戶群建立在工程師而非設計師之中。這兩個社群是否會圍繞共享畫布走向融合，目前仍是一個懸而未決的問題。

標籤: GitHub, Code Layers, Config 2026, Cursor, Figma, 設計工具