終結設計與開發的隔閡，Figma 推出「程式碼圖層」打造全端無縫協作新紀元

Figma 6 月 24 日於年度 Config 大會上公布一系列更新，將程式碼、動畫與 AI 工具更緊密整合進設計流程，並把協同合作畫布重新定位為更適合全端開發的工作空間。這次更新的核心，是讓設計師、產品經理與工程師能在同一介面中更直接地試驗想法，而不必先把重點放在可直接上線的精緻程式碼上。

最受關注的新功能之一是 code layers（程式碼圖層），使用者可在 Figma Design 畫布上直接操作程式碼，包括複製（clone）程式庫、從程式碼中抽取流程並轉成可編輯的設計圖層，然後將修改同步回程式碼。Figma 產品長 Yuhki Yamashita 表示，程式碼圖層讓團隊能更快疊代概念，適合快速探索不同方向，而不需一開始就追求可直接部署的生產級程式碼。

Figma 也把動態設計能力拉進平台內，新增對動畫、轉場與 3D 變形的支援。過去設計師常需在其他軟體製作動畫再轉換成可被理解的程式碼，現在動畫與轉場可以直接在 Figma 中建立，並可透過 AI 產生部分素材或使用預設樣式，或在時間軸上手動調整。

另一項更新是 shaders（著色器）功能，使用者可透過提示詞建立特效與填色，並使用 WebGPU 支援新的視覺處理效果，例如 dither（抖動）、pixelate（像素化）與多種模糊型態。這些過去在 Figma 中難以直接完成的效果，現在可在畫布上直接製作。

Figma 同時擴大 AI 助手的用途。使用者可以用文字提示建立可重複使用的 skills，讓 AI 代理執行固定工作；也能連線 Notion、Granola、Excel 與 GitHub 等工具，或附加檔案，讓 AI 擁有更多背景資訊。公司也加入以提示詞建立客製化外掛（generative plugins）的能力，例如版面產生器或向量路徑追蹤器，降低團隊打造可重用工具的門檻。

此外，Figma 正在進一步整合去年收購的節點式工具 Weavy（也稱 Weave/Weavy 或 Weave 工具的相關整合）。公司表示在未來數月內，使用者將能直接在 Figma 內建構 Weavy 工作流程，讓多模型比對與視覺產出流程更緊密地融入畫布操作。

（首圖來源：Figma）