Figma Design 教材 / Class LLL

程式層：會動的內容，還保留哪一種來源？

原生層、流程與執行程式分開核

可互動內容是什麼？比較Design原生框架、原型與程式層，區分目前狀態、局部與錄製流程擷取；可改設計層、推回程式及正式產品各需不同證據。

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

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

閱讀目標

按來源分原生設計、預設流程與執行程式
區分擷取入口及可回推條件
按共享檔／草稿／MCP核資格與點數
以實際產物及目標環境驗收可回改與正式使用

適用條件與學習範圍

畫面能操作之後，哪些資料仍在來源，哪些只剩擷取時的狀態？

可直接比較三種產物；需要看原生容器結構時補讀框架／群組。

能說出可互動、可編輯設計層與正式上線各需什麼證據，不把擷取入口視為相同能力。

同一原創預約案例、三個有限狀態及兩段文字；不執行任意程式、呼叫代理程式、擷取Figma或網站、連GitHub／MCP或發佈。

原理與判斷

原生框架包含可編輯設計物件，原型以設定的連線與動作表達流程，程式層則是Design畫布上由執行程式支撐的互動原型。三者能呈現相似畫面，卻保存不同資訊；會動不自動代表設計層可回改，也不證明產品已接真資料或能正式上線。本台以三抽屜與獨立擷取紙床比較資料責任。所有狀態皆預寫本站示意；沒有把此網站的React運行當Figma 程式層實測。

先分原生框架、原型與程式層

Design原生框架是設計容器，可含文字、向量與佈局；設原型後才依觸發／動作連出流程。程式層本身則是跑程式的互動原型，放在Design畫布與設計並排，能複製做不同方向比較。原生層可編輯不等於有完整產品行為，原型有事件也不等於保存產品程式。本台原生選項不送事件，原型與Code選項只輪換初始／成功／錯誤三狀態。這是觀察差異的有限模型，不是原生功能清單或生成結果。真產品另核資料、錯誤、權限、鍵盤／語義與裝置行為。

建立與修改：先確認起點及作用對象

當期專文列：工具列Code或B畫空程式層再提示詞；選框架後Code > Build selection，亦可選多框架請代理程式處理；Chrome extension的Capture code貼入Design成程式層。已有前端程式可依來源入口clone GitHub或上傳本機資料夾，不能把Capture code與原生設計擷取當相同輸出。選程式層按Play可在畫布互動，同頁可多個一起播放；可在Figma mobile 應用程式預覽，仍需真機驗收。修改可提示詞、Open code editor直接看／編碼，或Browser > Edit選元素改色彩、內距／margin／文字等，按Apply由代理程式套用；支援屬性取決元素及生成方式。改後必要時Reload 程式層，不保證每種程式庫立即可跑。

Current state、Select element與錄製 a 流程各留下什麼

Extract designs把目前程式層視圖變成可編輯Design層。Current state取當時整頁，Select element只取選定元素，錄製 a 流程則邊互動邊建立多框架表達畫面序列；專文明示可更新這些層並將變更推回main 程式層。這個具名錄製路徑不能外推每張任意截圖、局部或外部Make 快照都自帶雙向連結。本台先選Code後建立擷取，右紙床保存當時狀態與文字；來源後續再變不自動更新快照。Current與Element只示意獨立副本；錄製才允許按具名按鈕推回一段文字，仍沒有還原事件、後端或整套程式。最多三步只方便閱讀，非原生錄製上限。實際回推應在副本檢查差異、重新播放各狀態並留版本。

Git來源是clone，回去仍需權限與變更流程

當期Git專文列前端web 應用程式，須能本機安裝／執行、有入口及build；程式庫小於3GB。本機上傳資料夾上限100MB，沒有live GitHub連線，不能push／pull／PR。VPN、firewall／IP allowlist、需登入registry的private npm及原生mobile／桌面版應用程式不支援；不能用「有程式」保證可匯入。 GitHub連線涉及Figma管理員啟用程式庫、GitHub組織管理員核准與個人授權，clone後的程式在Figma檔內可見範圍也要檢查：檢視可看preview與其來源，編輯可看底層git-level 來源，即使沒有原GitHub權限。建議另分支比較，原分支直接push或新分支 PR各核權限／衝突；公開URL clone無須連帳戶，但不能push或PR。本頁只說明，不要求或執行任何連線。

共享檔、草稿、MCP與教育資格分路徑查

2026-10-22 程式層專文列教育方案(K–12)、入門方案／專業方案／組織方案／企業方案與Design 編輯，稱公開測試逐步開放；同日AI總覽卻限higher education／bootcamp並排K–12。教育來源差異仍在，教材保留兩者，實際教育帳戶可用性待核，不能把新日期當衝突已消失。 AI總覽分Full完整使用、Dev／Collab／檢視在自己的草稿探索；共享檔代理程式編輯需Full與編輯。程式層專文MCP建立另明示Full，匯入可10分鐘以上且可能需改程式；匯入本身不耗AI 點數，後續代理程式改動另計。計畫、席次、檔案編輯、AI管理設定與逐步推出各自核，本站選單不偵測帳戶或解鎖功能。原研究release notes的Code sources closed 測試版屬當時具名公告，不等於所有連程式庫入口永遠closed或人人有；當期Git專文已列入口／限制，仍需帳戶確認。

點數、交付與不可用替代都要有日期

當期專文稱付費方案在2026-11-04前生成／編輯程式層部分不耗點；同提示詞其他代理程式工作仍可能耗AI 點數，11月4日後依agentic規則另核。不是永久免費，也不能擴到入門方案、所有任務或所有模型。企業方案可透過關AI退出，但也關其他AI；實際管理政策及當期費用回官方與帳戶。若功能沒出現，可先用原生框架整理容器、原型表達已知事件，或用本站靜態對照確認要保存哪些來源；不要用另一張可看圖片冒充能回改的程式。交付時附來源種類、版本、擷取入口、可回改／回推條件及未測範圍，再在真產物驗收。Make獨立檔與其快照另查，動畫、可點流程與可上線產品也分開。

步驟與觀察

先列要保留的資料
要改設計層、比較互動或沿用實際前端？按目的選框架／原型／Code，不以畫面相似決定。操作名稱對照（中文為本站教學譯名）： Design工具列 > Code／B > Build selection 程式層 > Play／Open code editor（介面原文：Code layer > Play／Open code editor） Code editor > Browser > Edit > Apply Extract designs > Current state／Select element／錄製 a 流程（介面原文：Extract designs > Current state／Select element／Record a flow）
核入口、席次與來源
核Code工具列／編輯／Full或草稿、逐步推出與教育差異；有程式庫則先核web入口、build、大小、依賴及可見範圍。
播放後記錄具名狀態
在原生環境重走初始、成功、錯誤等必要狀態；本台只預寫三狀態，不能拿作軟體實測。
按要保存的範圍擷取
Current state、Select element或錄製 a 流程各取不同資料，保存來源及指定版本，別把單張擷取當全流程備份。
修改後明確核回推
錄製路徑依實際功能推回；先比較差異與重播，不能把任意快照改稿當自動同步程式。
以真正產物列交接限制
核可編輯性、資料／錯誤、鍵盤／語義、依賴與目標環境；沒有功能時保留原生框架／原型及未核條件。

常見問題

能點就認為是完整產品

回查執行來源、真資料、失敗與權限；原型與程式層都需成品驗收。

擷取後期待所有程式也還原

分當前頁／局部／序列，另保存程式來源、依賴與版本。

改Current快照就期待來源自動變

回具名錄製回推路徑核支援與差異，不把所有擷取入口混成雙向同步。

clone完看不到或跑不起程式庫

核管理員啟用、個人權限、前端入口／build、大小與private依賴限制；必要時用小型公開依賴範例。

教育或草稿能用就推全團隊可用

保留K–12來源衝突，分共享檔／自己草稿／MCP及Full／編輯／逐步推出。

限時免點被寫成永久免費

列2026-11-04與付費方案／code工作範圍；其他代理程式工作及後續費用另核。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：程式層三產物、入口／擷取／回推及Git來源限制；共享檔／草稿／MCP與教育差異、逐步公開測試及限時點數分開。來源狀態：三篇Help當日Scrapling GET200主文重核；release notes沿21日歷史研究，不重新標22日。K–12與AI總覽差異保留，Code sources舊closed公告不推全部當期入口。示意限制：原創三抽屜／擷取紙床，三狀態／兩文字及最多三步；非Figma程式、AI生成、原生擷取或Git連線。原生軟體實測：未Figma原生／程式層／MCP／程式庫／行動App或教育資格實測。學習成效驗證：未真人試用或學習成效實測。

參考來源

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