Figma Design 教材 / Class LLL

Code Connect、MCP與API：脈絡如何變成實作

先辨輸入、執行位置與輸出，再補產品責任

設計能否自動變正式碼？Code Connect連實作、MCP提供工具與脈絡、REST處理HTTP資源、外掛在文件環境讀寫。逐條核來源、作用範圍、檔案條件與執行位置，知道還缺哪些程式與驗收。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 17 分鐘

開啟互動教材查看參考來源

閱讀目標

區分映射、脈絡、HTTP資源及文件執行
分Code Connect UI與CLI的輸出
不把MCP一律說成read-only
用具名REST 作用範圍及檔案權限判讀
辨外掛 main、iframe及Dev Mode限制
列出成品實作與驗收缺件

適用條件與學習範圍

同樣說「連接Figma」，是在提供真元件用法、讀設計脈絡、呼叫HTTP端點，還是在文件內執行程式？

可補Dev Mode讀交付資料；框架／群組、元件及變數各有唯一基礎頁，本頁只處理整合責任。

能為一個整合需求列輸入、來源、授權、執行位置及輸出，分清程式片段與可運作成品，選相符工具並列未核條件。

四條有限比較路徑、預寫輸出及條件前提，沒有連真程式庫／Figma、沒有存取權杖輸入、API／MCP請求、安裝外掛、生成或發布。不是完整protocol、所有端點或開發實作課。

原理與判斷

同一個「連接」可能只交出一條檔案路徑，也可能給代理程式布局資料、修改原生層或讀HTTP JSON。把它們都當成自動生產完整應用，會漏掉程式來源、授權與實際執行條件。整合接線台把來源與輸出分開：路徑能匹配不代表元件存在，作用範圍相符不代表可讀任意檔，讀scene也不代表在iframe能改文件。每次先說清此步真的拿到什麼，再回Dev Mode列成品責任。

Code Connect連到實作，不憑空建立實作

當日Help列專業方案、組織方案、政府方案、企業方案，需Full或開發席次。它把設計元件與程式庫中的程式元件連起來，讓Dev Mode及MCP取得更準確的實作參考。先要有可用程式、可對照的設計元件、穩定屬性契約與維護責任；一條路徑不等於程式存在或可建置。專業方案只可有一個active 資源庫與framework，首度發布或方案轉換會選active範圍，團隊管理員可在Admin → Settings → Resources → Code Connect切換。被停用的連接保留資料、標Deactivated，MCP不回傳它們。這與刪除元件、取消資源庫發布不同；本台active只是固定條件比較，不管理真方案。

UI與CLI各提供什麼，先看收件端

Code Connect UI在Figma操作，GitHub連接可選，也可手動給元件路徑及名稱；一個設計元件可連多個framework。GitHub連接需檔案擁有者或org 管理員，GitHub Enterprise Server不支援。UI可帶自訂指示與codebase脈絡給MCP，但檢查不直接顯示CLI式snippet，當期只列檔案／名稱並支援AI preview；preview與代理程式完整對話生成脈絡不同，結果可能有差異。 CLI在本地程式庫用範本定義真元件用法與屬性映射，再發布連接；它提供Dev Mode中的實作用法，不是執行元件。當期推薦framework-agnostic templates，舊framework-specific parsers不再積極維護。本台用Size=Compact對到density=compact的原創預寫例，需人工維護映射；UI／CLI可共用系統，但CLI建立的連接只能由CLI改。

MCP按具體工具可讀也可寫

Figma MCP把設計布局、變數、元件及其他資源交給代理程式，也有可寫原生Design／FigJam／Slides內容的工具，不能一律說成read-only。寫畫布需Remote server，草稿外需Full；當日測試版免費、未來將按usage收費，不把它說成永久免費。由live UI生成可編輯層另限Remote與支援client，與取得設計脈絡不是同一步。 Remote連Figma hosted endpoint，不需桌面App；Desktop透過桌面App，要求指定付費／教育方案及Dev或Full。client需在官方catalog，支援功能仍按client／工具核。node連結帶識別脈絡，不是授權。MCP有自己的OAuth，不是把REST 作用範圍填進去就取得工具能力。本台只取已付費Full、草稿外、相符client的有限案例；選編輯前提並未授權真帳戶或發寫入。

脈絡與生成結果都要回到真程式核對

Get design context給代理程式設計資訊與可用實作參考，並不代表已建好業務流程；有Code Connect時可引真元件，沒有時仍可能只有布局。生成程式應對照程式庫架構、依賴、Token命名、內容、響應、語義、焦點、狀態與資料連線，再建置及測試。截圖相似不能替代行為驗收。 CLI發布會把連接所需的元件路徑、程式庫 URL、.figma中的屬性與code等資料送給Figma；UI／MCP也會帶相關脈絡到整合流程。先核組織政策、資料來源及具體服務，避免把密鑰或不該提供的資料放進例子。本站只有預寫文字、沒有程式庫／存取權杖欄位或外部連線；工具路徑可用也不宣稱原生結果已驗證。

REST按HTTP端點、authentication與作用範圍工作

REST透過HTTP資源取得檔案JSON／節點、圖片、版本及其他資料，也有評論、變數、dev resources等具名寫入端點；不是任意畫布編輯API。一般base是api.figma.com，政府方案另用api.figma-gov.com。能讀JSON不代表得到HTML語義或已運作應用，能寫評論也不代表能改框架寬度。當期authentication列OAuth 應用程式、個人存取權杖及組織方案／企業方案的方案存取權杖。OAuth代表各使用者，PAT代表個人，方案存取權杖供組織自動化並由管理員管理；依需求及文件選，不共用秘密到教材或前端。作用範圍仍不越過org／資料夾／團隊／檔案的既有權限。MCP自行OAuth，不用這套REST scopes設定取代；本站只比較假設，沒有輸入或儲存憑證。

具名作用範圍不等於所有資源權限

file_content:read用於檔案內容，file_comments:write是評論及反應的寫入，兩者不同；本台單一作用範圍案例不會互補。當期scopes頁把file_variables:read／write列企業方案 only，不能因Design可編變數就推成REST可寫。Library analytics、組織事件等又有自己的方案／管理員條件，端點與rate limits也要各看，不在這裡捏造通用配額。 files:read及OAuth舊file_read已deprecated，文件建議granular scopes；folders:read／folder_metadata:read承接舊專案相關作用範圍，舊存取權杖是否仍可用依文件分開。收到拒絕、過期或限流時先核目標資源、存取權杖條件、作用範圍、方案及端點，不以重試或換node ID當成授權。本站不實際呼叫，所以沒有真HTTP成功／失敗證據。

外掛 main與UI iframe有不同能力

外掛在編輯環境的main sandbox可讀scene節點樹，並在支援條件下修改文件；UI iframe可做HTML／瀏覽器 API，不能直接存取scene，要用message passing與main交換資料。把REST回應直接當場景物件，或在iframe呼叫main的文件API，都會選錯環境。本文沒有安裝、執行或提供可用外掛包。一般應先處理目前頁零／一／多選；跨頁內容按需loadAsync或非同步存取，不能假定所有PageNode 子層已載入，也不要為了小動作掃整檔。網路能力與manifest／CSP各核；限制plugin直接請求的網域不等於封住iframe網站內所有外部資源。工作結束closePlugin，使用者也可取消；讀寫場景與對外傳資料仍是不同責任。

Dev Mode 外掛與驗收終點再分清

Dev Mode plugin主要讀文件、接收事件、開UI及做codegen，不能建立、刪除或修改scene內容；pluginData、relaunchData及exportAsync等具名例外按文件另論，不泛稱任何寫入都不行。Dev Mode頁面動態載入，選取條件也與普通編輯不同，codegen可在檢查顯示自訂片段而不必開iframe。本台改Rect只代表Design main的固定計畫，Dev Mode與iframe阻擋這個計畫；沒有真API實行。要整合時，列出需求→具體路徑→可存取來源→執行／授權→輸出→缺少的產品責任，再到Dev Mode及成品核對。生成、映射或資料請求成功各自有驗收，不能用一張圖把所有環節都標完成。

步驟與觀察

把整合目的寫成輸入與輸出
說清要找真元件用法、取得設計脈絡、讀HTTP資料或在文件內改節點；先選具名工具，不只寫「把Figma變程式」。操作名稱對照（中文為本站教學譯名）： Dev Mode > Code Connect UI > 元件程式路徑／名稱本地程式庫 > Code Connect CLI > templates／屬性 > 發布後檢查（介面原文：本地repo > Code Connect CLI > templates／properties > 發布後檢查）支援的MCP client > 具體Figma工具與node連結 REST API > authentication／scopes／具名端點外掛 > main sandbox／UI iframe／目前頁選取（介面原文：Plugin > main sandbox／UI iframe／目前頁選取）
準備可存取來源與實作契約
核設計層／node、發布元件、程式庫路徑、真程式及屬性；沒有實作就先列缺件，不用Code Connect路徑冒充元件已存在。
分別核授權與環境
Code Connect看方案／席次／active範圍；MCP看server／client／檔案與操作；REST看authentication／作用範圍／端點；外掛看main／iframe／editor及文件讀寫，不能互相代替。
用最小案例檢查實際拿到什麼
先用測試檔與非機密資料，核連接回路徑或模板、MCP脈絡／具名寫入、REST JSON或外掛節點改動。保留來源版本與失敗條件；本站預寫輸出不是這份原生證據。
回到程式與成品補缺失
核真元件、Token、內容、語義／焦點、狀態、響應與資料連線，再建置與行為測試；片段相似不能取代可操作的產品。
記錄維護與資料邊界後交付
記映射擁有者、active 資源庫／framework、範本版本、目標檔案、服務條件、未核項與驗收；能力或方案變了再查當期文件，不沿用本站固定前提保證真帳戶。

常見問題

UI連到程式路徑，就以為檢查一定有完整snippet

UI路徑／名稱／AI preview與CLI模板輸出不同；需檢查 snippet時查CLI，仍需真正可用的元件與維護。

Code Connect停用後，MCP沒有實作參考

核專業方案 active 資源庫／framework與Deactivated；連接資料可保留，不等於設計元件或程式已刪。

把MCP一律當read-only，或當任何client都能寫

按具體工具查Remote／Desktop、client、檔案編輯與草稿外Full等條件；本站前提不授權真帳戶。

有REST 作用範圍，卻仍無法讀別人的檔

作用範圍不越過既有檔案／團隊／資料夾／org權限；核authentication與可存取資源，別把存取權杖當全站鑰匙。

UI iframe裡直接改Figma場景，或Dev Mode改Rect

scene由main處理，iframe用message；Dev Mode不能這樣改內容，metadata例外另核，不混成REST端點。

JSON、模板或AI程式看起來對，就跳過成品驗收

列真元件、資料、業務、語義、焦點、響應與錯誤責任，做實際建置／瀏覽器旅程及所需原生測試。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Code Connect UI／CLI、MCP 讀取／write及REST／外掛執行邊界；方案／席次／client／草稿／作用範圍及檔案條件逐路徑核，不保證當前帳戶或所有端點可用。來源狀態：當日Scrapling I01–I08公開GET200逐讀功能主體；developers robots404無指示，Help沿允許規則。REST／Plugin頁另經官方domain搜尋定位，未採第三方技術來源。示意限制：原創四路接線台與固定條件／預寫輸出，沒有存取權杖欄位、真request、程式庫映射、安裝或執行外掛；程式用法／Rect計畫是本站原創示例。原生軟體實測：未Code Connect／MCP／REST／外掛原生、外部帳戶或真程式輸出實測；本站瀏覽器驗證另見任務卡。學習成效驗證：未真人使用／交付／學習成效測試，條件接合不證明產品完成。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。