Figma 程式碼層和 Specs：它們是什麼、它們如何運作以及它們在哪裡停止2 min read

Figma 程式碼層將運行程式碼放在畫布上，Figma Specs 也將 Markdown 放在那裡。兩者均於 2026 年 10 月 15 日在 Config India 進入公開測試版，因此設計文件現在可以包含框架、工作原型和代理構建的書面計劃。

本指南適用於設計師、PM 和前端工程師決定是否將原型和規格工作移至 Figma。它涵蓋了每個功能的用途、如何開始、AI 積分的成本以及工作必須在哪裡將 Figma 留給 Claude、ChatGPT 或 Cursor 中的隊友。

在人工智慧時代，設計就是程式碼。若要使用 AI 直接在程式碼中進行設計，或將 Figma 設計轉換為程式碼，請使用 Anima Playground：描述一個畫面或從 Figma 設計開始，然後不斷迭代您可以預覽和發布的可編輯應用程式。

使用 AI 直接在程式碼中進行設計

使用 AI 進行設計：描述螢幕或將 Figma 設計轉換為程式碼。

Figma在Config India 2026上推出了什麼？

程式碼層和 Specs 是標題，但它們附帶了一組代理功能。以下是 Figma 幫助中心的當前狀態：

這兩個測試版都會在幾週內推出，因此您可能會在團隊其他成員之前或之後看到它們。

什麼是 Figma 代碼層？

程式碼層是保存真實的、運行的程式碼的層。您不會得到一個偽造與框架連結互動的原型，而是在畫布上您的設計旁邊得到一個可用的、有程式碼支援的原型。隊友可以點擊它，對其進行評論，並複製它以並排嘗試不同的方向。

Figma 提供您四種啟動方法：

• 來自設計。 選擇框架並要求 Figma 代理程式將它們轉換為程式碼層。
• 來自即時網站。 使用 Figma Chrome 擴充捕捉頁面並將其貼到畫布上。
• 來自回購協議。 從 GitHub 或本機資料夾匯入受支援的輕量級原型程式碼庫。 GitHub 導入保持與該儲存庫的連線。
• 從頭開始。 新增一個空程式碼層並提示代理程式建置。

您也可以透過 Figma MCP 伺服器將在編碼工具中建立的原型帶到畫布上。

編輯透過三種方式進行。您提示代理，註釋框架以顯示更改所屬的位置，或打開程式碼編輯器並自行更改程式碼。當視覺細節比程式碼更重要時， Extract designs 將螢幕從程式碼圖層還原為可編輯的 Figma 框架。當程式碼準備好供工程師使用時，您可以將其推送到分支並打開拉取請求。

Figma Specs是什麼？

Figma 將 Specs 稱為「上下文的原生家園」。實際上，它是一個協作 Markdown 文檔，可以存在於 Figma Design 文件或 FigJam 板的畫布上，也可以作為自己的 Spec 文件。

上手很快：

1. 從檔案瀏覽器建立獨立的 Spec，或前往 figma.com/spec/new。
2. 在設計檔案或 FigJam 板內，點選工具列中的 Spec 或按 D。
3. 已經有一個 .md 文件？將其拖到畫布上，它就成為一個規格。
4. 用你已經知道的 Markdown 來寫： # 對於標題， - 對於子彈來說， [] 對於待辦事項， > 對於引號，三個反引號用於代碼。類型 / 對於影像，Figma 嵌入和分隔符號。

規範比 Markdown 檔案更重要的是文字周圍的內容。您可以嵌入框架、FigJam 板或畫布中的任何節點，因此其描述的需求和設計彼此相鄰。隊友對其發表評論，Figma 代理可以閱讀並回應這些評論。

Specs 也可以在 Figma 之外運作。連接到 Figma MCP 伺服器的編碼代理可以使用以下命令讀取、建立和更新規範： figma-spec 技能。首先，您將規範連結複製到編碼代理的提示中，連結的框架、圖表、程式碼層和 Code Connect 片段都會隨之而來。

為什麼 Markdown 成為交接格式

Figma 自己的發布貼文明確表示：Markdown 現在是與代理程式共享上下文的事實上的格式。每個編碼代理都會閱讀它。大多數產品團隊已經將計劃、PRD 和代理指示保存在 .md 文件。

我的讀到的是，Specs 是 Figma 接受向代理的移交是文本，然後使該文本多人遊戲。本地人 AGENTS.md 或 PRD 從未因格式而失敗。它失敗了，因為只有一個人編輯它，它偏離了設計，沒有人能看到代理使用的是哪個版本。

在 Figma 內部，Specs 解決了這個問題。懸而未決的問題是它之外會發生什麼。嵌入、評論和即時設計參考是 Figma 的功能，代理可以透過 Figma MCP 目錄中列出的客戶來存取它們。如果您的工程師、PM 的 ChatGPT 和行銷團隊的 Claude 都需要相同的計劃，您仍然需要決定共用副本的位置。

一個實用的工作流程：從PRD到程式碼層到pull request

以下是這兩個功能如何在實際功能上組合在一起，僅使用今天的 Figma 文件。

1. 將 PRD 拖曳到畫布上。 您現有的 .md 文件成為規範。沒有任何內容被重寫，並且手動編輯它不使用人工智慧積分。
2. 嵌入它談論的框架。 使用 / 新增 PRD 所描述的流程。審閱者現在可以同時看到需求和螢幕。
3. 將關鍵影格變成程式碼層。 選擇它們並提示代理。如果您已經有原型儲存庫，請從 GitHub 匯入它。
4. 審查在一處。 收集有關規範和程式碼層的評論。請 Figma 代理回覆每個公開評論並提供建議的修復方案，同時人們也在同一主題上發表意見。
5. 交上規格。 將規格連結貼到連接到 Figma MCP 伺服器的 Codex、Claude Code 或 Cursor 中。代理取得 Markdown 以及連結的設計上下文。
6. 發送原型代碼。 將程式碼層的變更推送到分支並開啟拉取請求，以便工程師在合併之前進行審查。

輸出是您的編碼代理可以讀取的規格以及您的團隊實際點擊過的工作原型。像任何其他程式碼一樣測試生成的程式碼。運行的原型與生產就緒的程式碼不同。

如果下一步是將 Figma 設計轉換為可以運行的程式碼，或根據提示進行程式碼設計，那就是 Anima Playground 的工作。

代碼層和 Specs 的成本是多少？

• 程式碼層使用人工智慧積分。 在付費方案中，到 2026 年 11 月 4 日，程式碼層內的產生和編輯都是免費的。同一提示中的其他代理程式工作仍然使用積分，11 月 4 日之後，所有程式碼層任務都使用積分。
• Specs可以自由編寫。 自己輸入和編輯規格不使用積分。使用具有規範的代理即可。將滑鼠懸停在每個提示後的收據上即可查看費用。
• Payload 和指南增加了成本。 Figma 指出，兩者都為代理商提供了更多上下文和更多工作，因此相同的提示可以使用更多積分。

在製定計劃之前要檢查的限制

• 推出。 這兩項功能都是公開測試版，將在幾週內推出。在 Figma Design 工具列中尋找「代碼」圖標，在文件瀏覽器中尋找「Spec」選項。
• 計劃。 Specs 需要付費方案。初學者使用者可以獲得代碼層，但不能獲得 Specs。兩者都需要編輯權限才能創建。
• 選擇退出。 只有企業管理員可以關閉程式碼層，並且只能透過關閉所有 Figma AI 功能來關閉。
• 回購規模。 GitHub 導入適用於輕量級原型程式碼庫，而不是完整的生產應用程式。
• 設計系統代碼。 透過程式碼來源連接真實的元件程式碼仍處於封閉測試階段，因此程式碼層可能還無法使用您的生產元件。

Figma 停止的位置以及 Anima 和 AgentGrid.io 適合的位置

如果您的整個團隊在 Figma 中運作，則代碼層和 Specs 是強大的預設設定。原型、計劃和評論位於同一個文件中，Figma 的代理和 MCP 客戶可以對其進行處理。

有兩種常見情況仍然不屬於該文件範圍。

這個想法是從其他地方開始的。 Claude Design 原型、ChatGPT 產生的 HTML 頁面或您想要學習的即時網站。 Figma 的 MCP 伺服器現在有一個 html_to_figma 代理產生的 HTML 工具。 Anima 的 Buddy，我們 Figma 內部的 AI 設計代理，也變成了 HTML，Claude 工件、圖像和 URL 到可編輯的 Figma 圖層中，當您想要使用設計系統繼續在這些層上進行設計時，這非常有用。

結果需要留下Figma。 您的規格或原型必須由 Figma 團隊以外的人員審核、由多個供應商的代理編輯或作為即時連結發布。這就是由 Anima 建構的 AgentGrid.io 所做的工作。 AgentGrid.io 上的 Markdown 工件是一個即時自動保存文檔，人們和連接的代理（例如 Claude、ChatGPT、Cursor 和 Grok Bot）可以編輯該文檔，每次更改都按歷史記錄中的名稱進行歸因。 HTML 工件是一個運行頁面，您可以在其獲得批准後發表評論並發佈到公共 URL。您也可以將一個 Figma 框架作為應用程式工件匯入到 AgentGrid.io 中。此導入是單向的，因此以後的 Figma 編輯不會同步。

兩人並不是在爭奪同一個台階。 Figma 擁有設計畫布。 AgentGrid.io 是 Markdown 當工作跨工具和團隊時，HTML 工件就會消失。

試試AgentGrid.io 保留團隊中的每個代理人都可以編輯和發布的規格或原型。

使用每個工具時

• 使用 Figma 代碼層 當利害關係人需要點擊設計旁邊的工作原型並並排比較方向時。
• 使用Figma Specs 當計劃應位於框架旁邊並由編碼代理透過 Figma MCP 伺服器讀取。
• 使用 Anima Playground 當您想要使用 AI 直接在程式碼中進行設計，或將 Figma 設計轉換為可編輯的應用程式時，您可以預覽和發布。
• 使用 Buddy 當起點位於 Figma 之外並且您想要在畫布上編輯圖層。有關在 Figma 中建置與瀏覽器建構器的更全面比較，請參閱 Figma Make 與 Anima Playground。
• 使用AgentGrid.io 當規範或原型必須由人員和代理商跨工具進行編輯、透過評論進行審查並作為即時連結發佈時。

常見問題

Figma 中的程式碼層是什麼？

程式碼層是 Figma 畫布上保存真實運行程式碼的層。您可以從選定的框架、使用 Figma Chrome 擴充功能捕獲的即時網站、GitHub 原型儲存庫或空白提示中建立一個框架，然後按一下它、對其進行評論並複製它以比較方向。

Figma Specs 就是 Markdown 嗎？

Specs 使用 Markdown 作為其文本，您可以將任何 .md 檔案拖曳到畫布上來建立一個。它圍繞著該文本添加了 Figma 功能：嵌入式框架和 FigJam 板、評論以及可以讀取和回應這些評論的代理。

Figma 代碼層會消耗 AI 學分嗎？

是的。在付費方案中，到 2026 年 11 月 4 日，程式碼層內的產生和編輯都是免費的。同一提示中的其他代理程式工作仍然使用積分，11 月 4 日之後，所有程式碼層任務都使用 AI 積分。

Claude Code、Codex 或 Cursor 可以讀取 Figma Spec 嗎？

是的，如果它們連接到 Figma MCP 伺服器。編碼代理可以使用 figma-spec 技能讀取、建立和更新規範，並且您可以將規範連結貼到提示中以傳遞其連結的設計上下文。

哪些Figma方案包括Specs？

Specs 處於付費方案的公開測試版：根據 Figma 的 Config India 文章，專業、組織、企業和教育以及政府。它不在免費的入門計劃中。代碼層正在推廣到所有計劃，包括 Starter。