2026年8月12日 下午 12:00
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 就會長出自己那一版。新增一筆資料，網站自動多一個頁面，你不用再開 Framer，不用複製圖層，不用重新排版。
如果你還在評估要不要把 Framer 當主力建站工具，可以先看 Framer 是什麼 那篇打底，這裡直接進 CMS。
✱ THE MODEL
COLLECTION
一張資料表
部落格文章、作品、團隊成員，各是一張。
FIELDS
表的形狀
標題、日期、圖片、分類、內文，決定每筆能存什麼。
ITEMS
一筆資料
一篇文章就是一列，客戶自己就能新增。
PAGES
自動生成
一個模板，替所有 Item 生出各自的網址。
✱ CHAPTER 02 · WHY IT MATTERS
我看過太多漂亮但死掉的網站。動畫做得很細，滾動節奏抓得很準，交出去那天大家都很開心。三個月後客戶想發第四篇文章，打電話給你，你打開專案、複製整頁、換掉文字、重新發佈——十分鐘的事。
問題是這種十分鐘，一年會發生二十次。而且你不好意思收錢，因為它真的只花了十分鐘。
更糟的是第二種結局：客戶懶得每次都找你，網站就停在那裡。最後那個案子從你的作品集裡消失，因為裡面的內容早就過期到不能見人。
接案真正的成本不在做出來的那兩週，在交出去之後的那三年。
網頁設計的三十五年演變裡，內容管理系統的出現是一個真正的分水嶺。在那之前，文字是寫死在 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
這是 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
✱ FAQ
可以。官方定價頁寫明免費方案的專案能用十個 Collection，也給到一千個頁面，適合拿來學習、做模板或當純設計工具。限制在於你只能用 Framer 的子網域、頁面會帶官方標記，要接自己的網域就得升級付費方案。
Collection 是資料本體，住在 CMS 面板裡；Collection List 是畫布上的元件，負責把那些資料排出來。一個是內容，一個是展示，同一個 Collection 可以被好幾個 Collection List 用不同版型呈現。
可以，而且有兩種方式：進 CMS 面板改，或直接在前台頁面上點字修改。額外的編輯者席次是要另外計費的，內容編輯者的價格比完整編輯者便宜，報價時記得把這筆算進去。
可以。最常見的做法是把舊站內容整理成 CSV 再匯入成 Collection。另外也有官方外掛能接 Notion、Airtable、Google Sheets 當內容來源，適合內容還在別的地方持續更新的情況。搬家時記得處理舊網址的轉址，不然 SEO 會斷。
會，但通常不是資料量的問題，是圖片跟一次載入的筆數。超過三十筆就開分頁，圖片上傳前先壓過，這兩件事做了大部分情況都不會有感。
單純展示商品沒問題，用 Collection 做商品目錄很順。但購物車、庫存、結帳這些要靠外掛或串第三方金流，複雜的電商還是建議用專門的平台，把 Framer 留給品牌頁跟行銷頁。
它多半會給出合理的結構，但不知道你未來要拿這些資料做什麼。建議把 Agent 當草稿產生器，建完自己檢查一遍分類欄位有沒有用 Option、該做關聯的地方有沒有用 Reference，這兩點是它最常做保守決定的地方。
