Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學
2026年7月26日 上午 1:56
AI 設計FRAMER · WEB DESIGN · 2026
QUICK ANSWER
Framer CMS 是 Framer 內建的內容管理系統，核心只有兩層：Collection 是一張資料表，Item 是其中一筆。你設計一次頁面模板，接上 Collection，Framer 就替每一筆自動生一個頁面。部落格、作品集、團隊介紹、職缺列表全靠它。難的不是操作，是欄位怎麼設計，還有方案的 Collection 數量陷阱。
CONTENTS
01
Collection 與 Item，就這兩個字
02
沒有 CMS 的網站，是一具標本
03
十八種欄位，你只要先搞懂三種
04
四個步驟，做出第一個動態頁面
05
真正拉開差距的四個功能
06
把 SEO 變成模板
07
方案陷阱：升級之後你反而變少
08
重點整理
CHAPTER 01 · WHAT IS IT
Collection 與 Item，就這兩個字
把 Collection 想成試算表裡的一個分頁。欄位定義這張表的形狀——標題、日期、封面圖、分類；Item 就是其中一列，一篇文章、一個作品、一位團隊成員。
接下來才是關鍵的一步。你把 Collection 接到畫布上的設計元件，每一筆 Item 就會長出自己那一版。新增一筆資料，網站自動多一個頁面，你不用再開 Framer，不用複製圖層，不用重新排版。
如果你還在評估要不要把 Framer 當主力建站工具，可以先看 Framer 是什麼 那篇打底，這裡直接進 CMS。
THE MODEL
COLLECTION
一張資料表
部落格文章、作品、團隊成員，各是一張。
FIELDS
表的形狀
標題、日期、圖片、分類、內文，決定每筆能存什麼。
ITEMS
一筆資料
一篇文章就是一列，客戶自己就能新增。
PAGES
自動生成
一個模板，替所有 Item 生出各自的網址。
CHAPTER 02 · WHY IT MATTERS
沒有 CMS 的網站，是一具標本
我看過太多漂亮但死掉的網站。動畫做得很細，滾動節奏抓得很準，交出去那天大家都很開心。三個月後客戶想發第四篇文章，打電話給你，你打開專案、複製整頁、換掉文字、重新發佈——十分鐘的事。
問題是這種十分鐘，一年會發生二十次。而且你不好意思收錢，因為它真的只花了十分鐘。
更糟的是第二種結局：客戶懶得每次都找你，網站就停在那裡。最後那個案子從你的作品集裡消失，因為裡面的內容早就過期到不能見人。
"
接案真正的成本不在做出來的那兩週，在交出去之後的那三年。
網頁設計的三十五年演變裡，內容管理系統的出現是一個真正的分水嶺。在那之前，文字是寫死在 HTML 裡的；在那之後，內容跟版面第一次分了家。Framer 只是把這件事做得比較好看而已，觀念一點都不新。
CHAPTER 03 · FIELD TYPES
十八種欄位，你只要先搞懂三種
Framer 目前提供十八種欄位型別：Title、Slug、Content、Date、Option、Image、Gallery、Toggle、Icon、Color、File、Reference、Multi Ref、Link、Number、Array、Video、Divider。看起來很多，實際上八成的專案只會用到六七種。
真正會決定你這個 CMS 好不好用的，是這三種：
欄位設計是整個 CMS 唯一難改的地方。頁面設計改十次都無所謂，欄位改一次就要回頭補所有既有資料。開始前多想五分鐘，之後省五小時。
CHAPTER 04 · GETTING STARTED
四個步驟，做出第一個動態頁面
建立 Collection
左側面板點 CMS 圖示，或直接按 C。新增一張表，Framer 會自動幫你帶上 Title 跟 Slug 兩個欄位。
設計欄位
先在紙上列出這個內容型別要存哪些資訊，再一次加完。分類用 Option，關聯用 Reference。
做一個動態頁面
新增頁面時選擇綁定這張 Collection，Framer 會用 slug 自動生成每一筆的網址。你只設計一次，它替你生三百次。
放上 Collection List
回到列表頁，從 Ｉnsert 面板拖一個 Collection List 進來。設計第一張卡片，其他卡片自動複製格式。
2026 年還多了一條捷徑。Framer 3.0 把 Agent 放進 CMS：你用一句話描述要存什麼，它自己建表、選欄位型別、設好 slug。手上有現成的 CSV，也可以直接丟進去讓它拆成 Collection。
我的建議是第一次自己手動建一遍，第二次以後再交給 Agent。你得先知道它幫你做了什麼決定，才有辦法判斷它做錯了什麼。這點在 Framer Agents 的完整解析裡有更細的討論。
CHAPTER 05 · IN PRACTICE
真正拉開差距的四個功能
把資料接上去只是及格。以下四個功能，決定你的 CMS 頁面是「能動」還是「好用」。
CONDITIONAL VISIBILITY
依照欄位值決定元素顯不顯示。文章有標記 Featured 就掛上金色徽章，沒填副標題就整塊隱藏。少了它，你的卡片會在客戶漏填一個欄位時破版。
FILTERING
把頁面變數綁到 Collection List 的篩選條件，訪客點分類就即時換內容。三五個分類的部落格夠用；要同時篩價格區間跟地區這種多條件，就得往外掛找。
PAGINATION
內容超過三十筆一定要開分頁。不然一次載入兩百張圖，你前面調的所有動畫都會卡成幻燈片。
ON-PAGE EDITING
客戶可以直接在前台頁面上點字修改，不用進畫布。這是你交件之後最需要的一個功能，也是最多人忘記教客戶的一個。
官方在 CMS 改版時錄了一支示範，把內容、元件、Agent 三件事串起來講，值得花十幾分鐘看完：
▲ Framer 官方：Content, Components, and CMS with Framer Agents
CHAPTER 06 · SEO SETUP
把 SEO 變成模板
這是 Framer CMS 最被低估的地方。動態頁面的 meta title、描述、OG 圖、結構化資料，全都可以綁 CMS 變數。
意思是你設定一次「標題欄位加上網站名稱」這條規則，三百篇文章的 meta 就全部正確。多數人上線前一篇一篇手填，填到第三十篇就開始亂填，然後搜尋結果裡出現一整排一模一樣的描述。
順帶一提，OG 圖也吃 CMS 變數。文章封面圖直接當分享縮圖，不用另外做一套。這一步做完，你的網站在社群被轉出去的樣子就不會再開天窗。
CHAPTER 07 · THE LIMITS
方案陷阱：升級之後你反而變少
這一段請認真讀，因為它會直接影響你的報價。
Framer 免費方案給你十個 Collection——因為它把免費方案定位成設計工具，讓你在裡面把東西建完整。但當你付錢升到 Basic，Collection 數量會掉到兩個。
10
FREE · COLLECTIONS
2
BASIC · COLLECTIONS
10
PRO · COLLECTIONS
兩個 Collection 是什麼概念？一個部落格加一個作品集，剛好卡死。再想加一張「分類」表來做 Reference，就得跳到 Pro。這就是為什麼很多人從免費直接跳 Pro，中間那一階根本待不住。
報價的時候把這件事講清楚。網站是你做的，方案是客戶付的，這筆錢要在合約裡寫明白，不要等到上線那天才發現預算差了一階。方案內容 Framer 每隔幾個月就調一次，簽約前回官方定價頁確認當下數字。
另外兩個限制也值得先知道：Framer 不提供程式碼匯出，內容跟平台是綁在一起的；還有 Rich Text 的自訂樣式彈性有限，想在內文裡塞複雜排版元件會綁手綁腳。這兩點跟 Webflow 的取捨我在 Framer vs Webflow 那篇拆得比較細。
CHAPTER 08 · TAKEAWAYS
重點整理
TAKEAWAYS
→
Collection 是表，Item 是列。設計一次模板，Framer 替每一筆自動生頁面。
→
欄位是唯一難改的東西。分類用 Option、關聯用 Reference、slug 一定要手動改英文。
→
SEO 綁 CMS 變數，一條規則管三百篇。這是投報率最高的十分鐘。
→
Basic 只有兩個 Collection。報價前先算清楚客戶要幾張表，寫進合約。
學生做完一門建站課，最常撞上的牆從來不是動畫做不出來，是客戶問了一句「那我可以自己改嗎」。CMS 就是那句話的答案。
它不華麗，不會出現在你的作品集動態展示裡，沒有人會因為你的 Collection 設計得好而按讚。但它決定這個案子是一次性的收入，還是一段能長期維護的關係。做網站的人遲早會發現，後者才是這一行真正的複利。
RELATED READS · 延伸閱讀
Framer vs Figma Sites 怎麼選？
兩個都能從設計直接發佈，差別在 CMS 與上線之後的維護成本。
閱讀 →
Figma 與 Framer 的工具分工
什麼時候在 Figma 想，什麼時候直接進 Framer 做。
閱讀 →
過去十年的網站設計趨勢
從 iOS 7 扁平化一路到 Liquid Glass，視覺語言怎麼換了三輪。
閱讀 →
Spline Omma 完全解析
網站要放 3D 的時候，這是最順的一條路。
閱讀 →
配色公式怎麼用
六個讓畫面不會出錯的思考結構，做網站前先看。
閱讀 →
認識 UI/UX 設計
從定義、工作流到入門路徑的完整指南。
閱讀 →
EXTRA · LINKS
Framer 官方 CMS 產品頁：framer.com/cms
Framer Academy 的 CMS 入門課程：Getting Started with the Framer CMS
還沒有帳號的話，從這裡開始：framer.com
常見問題
Q：Framer 免費方案可以用 CMS 嗎？
可以。官方定價頁寫明免費方案的專案能用十個 Collection，也給到一千個頁面，適合拿來學習、做模板或當純設計工具。限制在於你只能用 Framer 的子網域、頁面會帶官方標記，要接自己的網域就得升級付費方案。
Q：Collection 跟 Collection List 有什麼不同？
Collection 是資料本體，住在 CMS 面板裡；Collection List 是畫布上的元件，負責把那些資料排出來。一個是內容，一個是展示，同一個 Collection 可以被好幾個 Collection List 用不同版型呈現。
Q：客戶可以自己編輯內容嗎？需要另外付錢嗎？
可以，而且有兩種方式：進 CMS 面板改，或直接在前台頁面上點字修改。額外的編輯者席次是要另外計費的，內容編輯者的價格比完整編輯者便宜，報價時記得把這筆算進去。
Q：可以把既有的部落格搬進 Framer CMS 嗎？
可以。最常見的做法是把舊站內容整理成 CSV 再匯入成 Collection。另外也有官方外掛能接 Notion、Airtable、Google Sheets 當內容來源，適合內容還在別的地方持續更新的情況。搬家時記得處理舊網址的轉址，不然 SEO 會斷。
Q：CMS 內容多了會不會拖慢網站？
會，但通常不是資料量的問題，是圖片跟一次載入的筆數。超過三十筆就開分頁，圖片上傳前先壓過，這兩件事做了大部分情況都不會有感。
Q：Framer CMS 適合做電商嗎？
單純展示商品沒問題，用 Collection 做商品目錄很順。但購物車、庫存、結帳這些要靠外掛或串第三方金流，複雜的電商還是建議用專門的平台，把 Framer 留給品牌頁跟行銷頁。
Q：CMS 的 Agent 會不會把欄位設計搞砸？
它多半會給出合理的結構，但不知道你未來要拿這些資料做什麼。建議把 Agent 當草稿產生器，建完自己檢查一遍分類欄位有沒有用 Option、該做關聯的地方有沒有用 Reference，這兩點是它最常做保守決定的地方。