Figma Design 教材 / Class LLL

Sites：畫布能看，網站還要驗什麼？

響應、內容與公開版本各有責任

設計能否發布網站？比較Design與Sites、breakpoints及CMS 集合／field／項目，列鍵盤、內容、SEO與發布範圍，再分畫布修改與公開版本。本站只做原創對照，不發布外部網站。

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

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

閱讀目標

分原稿、原型與可發布網站
列寬窄及內容改變的驗收條件
辨CMS內容結構與顯示模板
核SEO、網域、觀眾及發布版本
以真網站驗收操作，不以畫布或勾選代替

適用條件與學習範圍

同一份設計能預覽之後，哪些內容、操作與公開版本仍需要另核？

可直接比較；要看原生容器及佈局責任時補讀框架／群組與自動排版。

能指出發布後仍需成品驗證，區分響應、CMS、語義與發布責任；本地教材不等於授權發布本站。

原創三尺寸、三內容版本與三項目；紙床與清單只是模型，不建立Sites檔、CMS、真URL、SEO、DNS或發布。

原理與判斷

Design原稿與原型可表達外觀、結構與已設定的流程，Sites則有webpage、breakpoints、網站互動、CMS及發布。工具相似不表示所有設計都已成為可用網站，或複製過去後所有連線、語義與內容都完整。本台分可改候選與獨立發布快照。換尺寸看排欄，改CMS標題看內容，留下人工待驗條件；按快照只是本機記錄，不對外發布。正式網站仍需用實際URL／版本、裝置及鍵盤重走。

Design原稿、Sites webpage與公開網站分清

當期Explore稱Sites仍公開測試，可設計、預覽及發布響應網站。檔案列webpages與圖層，Insert有blocks／libraries，CMS管理內容，Settings管理網站設定，右側Design／Interaction分外觀與互動。新檔可由範本、blocks或Design複製開始，不能將熟悉工具等同所有Design功能完全一致。一般Copy／Paste需目的檔編輯；Design特定Copy to Figma Sites入口另要求自己是檔案 creator且設計寬1200–1600px，建立新Sites的Home。Annotations在Sites不顯示但貼回Design可再出現；自動排版相對定位、未用或ignore者絕對定位，原型 sticky／fixed保留相應定位。這些是已核具名轉換，不保證整份設計往返無損。

Breakpoints改版面，也要改互動條件

Webpage是網站頁，新增頁由工具列Webpage；其header ＋可加預設或自訂斷點，選斷點後右側改寬度，刪除時鄰近範圍重分。Primary 斷點修改會向其他breakpoints傳遞，跨尺寸需核覆寫；自動排版可幫新尺寸重排，但仍需檢內容與實際結果。本台自訂800／1200px門檻，在390／800／1280比較1／2／3欄，內距24／間距16的卡寬由同一模型計算；不是Figma預設寬度或完整排版引擎。正文、長標題、空資料與圖像比例要各驗，不能只縮畫布。預覽或Shift＋Space可先看互動與響應；手機不依賴懸浮，改press或其他可觸控方式並測焦點。

CMS把內容、模板與重複列表分開

左側CMS建立集合，field是title／影像／date等欄，項目是每篇文章或案例資料。CMS list重複一份設計呈多項目，CMS 頁面是單項目模板，各項目有自己的URL；列表連到各自詳頁，而不是為每篇內容手工複製整張版面。可用sample 集合、CSV import及prebuilt list／頁面，但輸入欄與內容仍需核對。從CMS或畫布連接內容編輯項目，變更會即時在畫布出現；發布時帶已連接CMS資料。本站三項目／title與slug欄是原創有限例，切list／頁面只換本站顯示，假路徑不建立公開URL。原稿改內容不代表已公開網站同步；當期發布專文明示畫布改動需發布更新，須核實際CMS與站點版本，不以畫布已新就跳過確認。

互動與語義要在實際成品驗

Interaction > Add interaction分觸發條件與動作，物件類型決定哪些可用。切換為只在元件組的變體；懸浮／cursor不適用手機，press結束回原態；捲動 parallax對fixed／sticky及子層停用。其他如Reveal、Scroll transform、Marquee／Lightbox等按目的另核，不用一個滑桿冒充全功能；條件判斷／設定變數沿唯一原型條件與型別頁補讀。 Design多數原型連線可轉Sites相應互動，找不到配對則在Review issues或發布 > Issues與右側Interaction修正。Accessibility可設定HTML tag、heading／landmark、alt／decorative、label／current 項目等；盡用適合語義，不能只在div加label就認為可按。真正網站要以Tab／Shift＋Tab、Enter／Space、觸控、焦點可見、關閉／返回、長內容與少動態走必要任務，設定存在不等於完整符合或真人可用性已測。

SEO、觀眾、網域與版本各自核

Site settings可設全站及逐頁title／description／分享圖／language與noindex；全站另有favicon、Analytics／custom code等，付費的密碼／cookie banner另有條件。Title幫分頁與搜尋辨識，language與語義服務閱讀，noindex指示搜尋引擎不收錄，不是存取控制。Org／企業方案可設內部觀眾，限登入組織成員且排guest；管理員可能禁open web。密碼與內部觀眾不共用，實際分享與內容範圍要另核。檔案 > 發布專文列付費＋編輯、教育方案含一個已發布站且有頻寬限制，不能外推所有帳戶可公開；完整席次／逐步推出依當期帳戶功能核。測試版中畫布每個webpage及CMS動態子頁都會包含，未好頁先移別檔；Issues建議修完但原生未強制，本站四格也只是準備，不是假原生發佈gate。改畫布後需重新發布；Republish舊版立刻換公開產物卻不改畫布，取消發布才移除站，單斷開自訂網域仍留figma.site。

網域與往返限制保留來源差異

付費且編輯可在已發布後Settings > Domains接自己擁有的網域，依Figma提供的TXT／CNAME向registrar核值、Refresh驗證並等DNS／SSL，one site只接一個custom 網域，不支援wildcard或網域路徑。本頁不買網域、不改DNS；專文仍寫「2025年內免費」及當時10個／unlimited 測試版額度，2026-10-22讀到的舊期限不當當期免費承諾，費用／額度待帳戶核。同日發布文一處仍說figma.site不可改，專門Change subdomain文卻列付費＋編輯可Edit 網域，63字元、a–z／0–9／hyphen、首尾字母或數字及唯一性，改後舊網址失效。保留具名差異、以實際Domains核，不保證舊link redirect。Sites貼回Design時webpage成區段含各斷點 frames，嵌入成靜態圖、內部連結不保留、很多互動不支援；外部link可轉Open link，Accessibility設定在Design不顯示但貼回Sites可再出現。當期發布 FAQ仍稱不能匯出Sites程式作外部發布，與本站本機原始碼是不同產物。

步驟與觀察

定網站任務與保留原稿
列讀者要找內容、點連結或做決定的任務；保留Design來源，不把原型預覽當已上線。操作名稱對照（中文為本站教學譯名）： Sites > Webpage > ＋斷點（介面原文：Sites > Webpage > ＋breakpoint） Sites > CMS > 集合／items > CMS list／頁面（介面原文：Sites > CMS > collection／items > CMS list／page）右側 > Interaction／Accessibility；Review issues Site settings > General／pages／Domains；檔案 > 發布（介面原文：Site settings > General／pages／Domains；File > Publish）
核webpages與breakpoints
選內容與尺寸、檢primary／覆寫與長內容，手機換掉hover-only；本台只示意三尺寸。
接CMS欄與顯示模板
先集合／field／項目，再list／頁面及slug；核空值、長文、圖片與各詳頁內容。
用公開預覽走操作與語義
檢Issues、標籤／heading／alt，再用鍵盤、觸控、少動態及失敗／返回重走。
逐項核發布條件
核方案、編輯、觀眾、全站所有頁／CMS、SEO／metadata、網域及公開權利；本地教材不授權對外發布。
公開產物另留版本與回復
真有發布時再核URL／內容／響應／操作、保存版本與未測；改畫布需更新，回舊公開版不改原稿。

常見問題

畫布改了，公開頁仍是舊內容

分畫布與published版本，重新發布並在實際URL核內容；本台快照不跟著改。

手機只縮小，內容與按鈕仍擠

用自動排版及breakpoints重排並測長內容，懸浮改可觸控入口。

CMS每筆都手工複製頁面

用集合欄與項目，list展示多筆、頁面模板帶各項目；核slug與連結。

點得到滑鼠，就忽略鍵盤語義

設適當tag與名稱，再Tab／Enter／Space／焦點／關閉返回實測，不拿設定當可用性證據。

noindex就認為不會被外人看

搜尋索引與存取控制不同，核觀眾／密碼與真收件人；不在本站輸入密碼。

改網域或貼回Design就期待都保留

核舊link失效、CMS／嵌入／內部連結／互動與程式匯出限制；保留原稿與回復資料。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Sites 公開測試、breakpoints／CMS／互動／語義、settings／發布／網域及Design往返具名條件；不執行外部操作。來源狀態：十篇官方Help robots允許後Scrapling GET200主文查核。Publish與subdomain專文差異、2025網域優惠舊期限保留，不冒稱當期價格或帳戶資格。示意限制：三尺寸／三內容版／三項目與四人工欄的原創紙床、CMS文字樣例及獨立快照；非Sites引擎或原生發布。原生軟體實測：未原生Sites／CMS／DNS／正式發布／SEO收錄或帳戶實測；本站公開頁另驗。學習成效驗證：未真人使用或學習成效測試。

參考來源

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