Figma Design 教材 / Class LLL

案例：介紹頁要交設計、程式，還是網站？

相似預覽，保留的來源與公開責任不同

從原創小樹工具介紹選Design 原型、程式層、Make或Sites，換窄幅／空內容，查真連結與焦點，再比較目前來源、靜態設計副本與本地公開演練版。不是工具能力偵測，也不執行生成、帳戶或外部發布。

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

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

閱讀目標

按收件目的比較四種資料來源
分可操作預覽、靜態擷取與真正成品
查窄幅、空資料、連結與焦點責任
分草稿、副本、發布與取消公開
依資格選替代，保留版本與實際驗收

適用條件與學習範圍

介紹頁看起來一樣、也能操作時，為何仍要先問交的是設計、程式來源還是公開網站？

可直接比較；具體擷取、來源交接、Sites、Make與成品可及性各有唯一頁，可補讀後返回。

能依設計／流程／公開目的選路線並列待驗條件，知道帳戶不一定可用全部產品；靜態副本不自動回寫，公開需另授權與成品驗收。

固定原創介紹、兩文案、三資料列、1280／390及四路線；本站HTML連結只移本頁焦點。沒有真生成、任意程式、後端／CMS、原生擷取、帳戶、部署或可用公開URL。

原理與判斷

「能看」「可互動」「可改設計層」「能繼續維護程式」和「已公開」描述不同產物。Design原稿、原型連線、畫布內程式層、獨立Make與Sites可以呈現相近內容，但資料、修改位置與驗收責任不一樣；不能用一張預覽圖替收件者決定全部路線。本例是本站虛構的小樹工具介紹：三項用途、詳情入口，窄幅與沒有內容時仍需說明下一步。四個卡匣選目前來源，校樣床顯示有限版式；設計副本與本地公開演練紙各自留下當時內容。所有文案、資料與圖形原創，沒有真客戶、生成結果或正式產品。

先問交付目的，再比較來源而非只比外觀

繼續改設計時保留可存取Design來源及版本；比較已設定流程時可用原型，想查程式行為則核程式層或Make來源；要提供真正公開介紹頁，才評估Make／Sites與發布條件。這是本案例的方法推導，實際專案可同交原稿、流程、程式與說明，不是一個目的只能選一個檔。本台「路線可承接目的」只表示本例的類別相符。真資料、權限、內容、可維護性與收件環境仍未驗，不能把路線選對當成品已通過。靜態圖片與向量交換又缺哪些來源，回匯入交接唯一頁核，不把SVG、PNG或截圖當完整應用備份。

Design 原型與程式層保留不同互動資料

Design原生框架有可修改設計層，原型透過指定觸發條件／動作及連線表達流程；有分享連結也不等於已部署成對外介紹網站。程式層在Design畫布內執行程式，是另一種互動原型來源，能按也仍需真資料、錯誤、語義與裝置驗證。程式層的Current state擷取目前狀態，Select element取局部，錄製 a 流程另有具名可更新設計層並推回main 程式層的流程。本案例只另取本站靜態標本，不模擬錄製；不能把它的「不自動回寫」擴成原生所有擷取永遠不能回推。要查入口、共享檔／草稿／MCP資格、教育差異及限時點數回程式層原頁。

Make：獨立程式候選與Design擷取分清

Make是獨立檔內的程式與對話候選，能接設計脈絡、修改程式及預覽；生成能跑不證明原意、必要狀態或後端已完成。本台改來源文案只是切兩個預寫字串，沒有模型呼叫、程式生成、資料儲存或服務請求。 22日Copy Make preview專文：Browser > Edit > Copy designs > Whole 頁面取當前狀態，貼入Design可改層；可先加入含所需變數的資源庫，available 變數會配對綁定。同文仍說沒有連Make、沒有原互動、不自動綁完整design system。保留部分變數與完整元件身份、規則及程式連動不同；改Design快照就期待Make改動，需回Make來源重新修改並驗。

Sites：webpage、breakpoints與CMS各有責任

Sites用webpage及breakpoints承接網站，CMS的集合／field／項目管理內容，list與頁面模板呈現多項與詳頁；這不等於任意Design層都自帶真CMS。本站三列資料直接沿Sites唯一頁原創資料，空資料只是固定反例，沒有建立集合或真URL。 1280／390與固定三欄／窄幅單欄沿既有有限模型。套本站適配規則可容納窄幅，但不是偵測四產品自動能力；真正成品要查斷點間寬度、長文、圖像、懸浮替代及內容極值。Design到Sites多數原型連線可轉相應互動，仍有Review issues；Sites回Design內部網頁連結不保留，外部連結另轉Open link，不能把貼回畫布當完整網站。

用真連結與焦點檢查，分開圖像意圖

本台未接連結的文字只表示外觀，沒有可焦點操作。建立本站頁內連結後，真HTML a提供名稱與鍵盤入口，Enter移到「本站介紹說明」並讓焦點可見；它只在本頁跳轉，不改知識網址或連外。這是本站試片，不是Figma原生或你的成品測試。真公開頁要開實際URL驗連結目的地、返回、Tab／Shift＋Tab、Enter／Space、焦點、觸控、語義與少動態。視覺按鈕或工具內可操作不會自動變成正確HTML；回工具可及性唯一頁區分原生工具、本站及成品責任。空內容要保留說明和下一步，不只用白畫面當正常狀態。

目前來源、靜態副本與公開版本各自留記錄

先取本站靜態快照，改快照標題成候補，再改目前來源成小樹工具與教學：兩份各自保留。本台副本存當時路線、文案、寬度、適配、內容及連結條件；重新取才覆蓋副本。它是本站紙樣，不還原真程式、完整Design層或全部資料。在Make或Sites可記本地公開演練版，之後改草稿不自動改演練紙；取消演練移除此記錄，仍保留原稿與副本。這不是發布／取消發布呼叫，也不產生URL或外部授權。真正Sites畫布改動需發布更新才出現在已發布版，取消發布移除公開站；Make亦須更新／取消發布，觀眾與資料責任按當期帳戶核，不能以本地按鈕宣稱上線或下線完成。

產品、席次、權限及發布需各自核資格

原型基礎建立需Design 編輯、播放檢視與分享條件另核。程式層公開測試與AI總覽的Full共享檔、其他席次自己草稿、MCP Full及教育差異沿原頁，不能從能檢視推能生成。Make一般付費 Full，其他席次／入門方案自己草稿試用另有條件，Copy designs為付費；入門方案公開需同時社群等條件回唯一頁核。本站不偵測帳戶、消耗點數或假設人人都能用。 Sites仍公開測試，斷點編輯與公開資格不同；發布為付費／編輯，教育方案一個公開site並有頻寬條件。Make／Sites的Org／企業方案觀眾、管理設定與密碼另核；Make FAQ舊public-only與當期發布專文差異保留，不把全部概稱公開不可限。若入口不可用，先交原稿、必要狀態與驗收清單，交由有資格者決定；公開發布、網域及真服務仍需另外授權。

把缺件交給下一位，不能只寄漂亮預覽

記來源檔案／版本、產物目的、程式或資源庫依賴、資料結構、必要狀態、真URL／觀眾及回復方法。CMS不是後端的所有業務邏輯，code ZIP也不自動包含雲端資料、secret或部署；本例沒有任何真服務輸入。需要更完整交接沿可追溯交付唯一頁，不另複製版本理論。即使待查反例清空，仍未驗帳戶、真正內容與成品。以實際裝置、瀏覽器、版本及收件操作留下結果；本站理解標記、快照或本地公開演練都不當真人可用性、學習成效或正式驗收證據。

步驟與觀察

列目標、收件者與保留資料
以同一原創介紹比較繼續設計、既定流程與公開頁面，必要時同交多種來源。操作名稱對照（中文為本站教學譯名）：本站：選目的與產物 > 換窄幅／空資料 > 檢連結焦點程式層 > Extract designs > Current state／錄製 a 流程（不同路徑）（介面原文：Code layer > Extract designs > Current state／Record a flow（不同路徑）） Make > Browser > Edit > Copy designs > Whole 頁面（介面原文：Make > Browser > Edit > Copy designs > Whole page） Sites > Webpage／CMS／預覽；發布及取消發布另核（介面原文：Sites > Webpage／CMS／Preview；Publish及Unpublish另核）
選四種產物並讀差異
看Design／原型、程式層、獨立Make、Sites各保存何種資料；界面能看不等於完整產品。
換窄幅與空資料，驗真操作
用本站固定反例觀察適配與空態；建立真HTML頁內連結後以Tab／Enter查焦點，真正URL與裝置另驗。
取副本再分開改動
取靜態快照、改副本標題，再更新來源；保留兩份，原生Make變數配對與Code 錄製具名回推條件另核。
分草稿與發布、列不可用替代
本地演練不對外；真更新／取消發布、觀眾、方案／席次／編輯與公開授權各查，缺入口先交來源與待驗清單。
補讀後返回核原條件
從具體缺件補讀唯一功能及可追溯交付，再返回／重載保目前路線、原稿、副本與演練記錄。

常見問題

原型分享網址就當成公開產品

核收件目的、保存的互動及資料；需公開網站時另核Make／Sites／正式部署與觀眾，分享檔不等於部署。

改Make Design快照，以為來源程式會改

回Make來源修改再驗；available 變數可配對不等於持續連結，Code 錄製是另一具名路徑。

寬畫面能看，手機與空內容就壞掉

查真斷點間寬度、長文、圖像與空態下一步；本站有限排欄通過不代原生或成品驗證。

圖上有按鈕卻不能Tab或沒目的地

以真語義連結／button、名稱、狀態及焦點檢查，開實際URL再走觸控與返回，不只看畫布。

草稿變了就宣稱公開版已新，或刪稿就當下線

草稿、發布與副本分記，實際更新或取消發布後檢URL／觀眾；本地演練不執行任何外部動作。

帳戶看得到就以為能生成、共享及發布

分產品、方案、席次、草稿／共享檔、編輯、AI設定、逐步推出及費用；缺資格先用來源與驗收清單替代。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：F19／20／22／25／26／21案例；四產品來源、具名擷取與發布條件按各唯一頁，無帳戶資格推定。Code教育與Make公開觀眾來源差異保留。來源狀態：重用FG43／46／49／50／54／59同日已核官方正文與metadata；基礎Prototype資格沿FG32同日主文；本票補讀Make Copy designs、Sites發布／往返具名主文，非重新HTTP抓取。案例選擇及原創資料為研究推導。示意限制：四卡匣／印樣床、兩文案及三原創資料列；沿FG49有限排欄，獨立白名單靜態紙樣與本地公開演練，本站HTML連結僅頁內移焦點。非四產品原生能力、真CMS／後端／生成／程式或可用網站。原生軟體實測：未Figma原生擷取／程式／AI／帳戶／CMS／發布或真成品驗收；本站瀏覽器證據另記。學習成效驗證：未真人試用、真產品需求簡報或學習成效驗證，沒有因模型待查歸零宣稱完成。

參考來源

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