Figma Sites 真正难的不是把页面画出来，而是把 collection、CMS page、自定义域名和发布节奏排成一条不会反复返工的内容链路。
- 01先读摘要，判断是否与你的场景相关。
- 02再看来源，保留继续查证的路径。
- 03最后看步骤、风险和可复用动作。
很多人第一次碰 Figma Sites，会把注意力全放在页面视觉上，结果上线前才发现真正拖慢进度的是内容结构、动态页面、域名切换和发布节奏。页面能画出来，不代表内容团队能继续维护；域名能填进去，也不代表搜索和访问入口不会被拆散。把 Figma Sites 用成稳定工作流，关键不是多会做动效，而是先把 CMS、域名和发布顺序定清楚。
适用场景
- 你要做作品集、案例页、博客、产品目录或资源页，而且内容会持续更新。
- 设计师想继续掌控页面结构，但又不想每次改一篇文章都重画版式。
- 你手上已经有 CSV 或一批固定字段内容，准备做动态页面。
- 你希望先在 figma.site 上验证，再切到自己的域名。
不适用场景
- 你要做的是重型会员系统、复杂电商结算或强依赖后端逻辑的应用。
- 你必须精准控制构建流程、脚本注入和工程化部署。
- 你的团队根本没有稳定的内容字段，只想先临时拼一个活动页。
- 你需要同一个站点长期挂多个自定义域名同时对外。
先把 Figma CMS 的三个部件分清
Figma 官方把 Sites CMS 拆成三个核心部件：CMS collection、CMS list 和 CMS page。collection 是字段和条目本身，像一张有结构的数据表；CMS list 是把同一组设计块重复渲染成列表；CMS page 则是为每个条目生成一个独立 URL 的详情页。很多人出错，是因为先画好了静态页面，后面才想把它改成动态站，结果每个区块都要返工。更稳的做法是先把 collection 设计好，再去画 list 和 page。
官方还特别强调一个好处：内容改动会立即反映在画布上，发布时会自动带上所有已连接的 CMS 数据。这意味着 Figma Sites 适合内容持续增长的团队，但前提是字段命名、条目状态和页面层级一开始就别乱。
准备材料
- 一份明确的内容模型：标题、摘要、封面图、发布日期、作者、CTA、slug 等字段要先想清楚。
- 若已有旧数据，先整理 CSV，避免一列里同时塞标题、说明和链接。
- 域名控制权和 DNS 权限，最好能直接改 TXT、CNAME 与 A/AAAA 记录。
- 确定主域名策略：是 www 做主站，还是 apex domain 做主站。
- 一轮发布验收清单：动态页是否生成、链接是否通、域名是否已签发 SSL。
步骤一：先设计 collection，再画页面
如果你把页面先画满，后面再补 CMS 字段，多半会在第二篇内容时崩掉。更稳的顺序是先站在内容运营角度设计 collection：哪些字段是每条内容都必需的，哪些只是可选展示。字段定得越清楚，后面 list 和 page 越不容易返工。
- 先列出每条内容都要重复出现的字段，例如标题、摘要、封面、正文链接、发布日期。
- 把“只会偶尔出现”的字段单独标记，例如下载按钮、价格、作者头像，不要和核心字段混成一列。
- 如果你打算导入 CSV，先把列名改成团队都看得懂的英文或固定命名，后续才好维护。
- 字段一旦上线被多人使用，就不要频繁改名；需要重构时，先复制 collection 做试验。
步骤二：先用 CMS list 验收列表页，再做 CMS page
官方示例里，collection 不是直接变成网站，它需要通过 CMS list 和 CMS page 才真正落到页面上。实操里，最稳的顺序是先做 list，确认卡片重复逻辑、封面比例和摘要长度都正常，再做 page。因为列表页最容易暴露字段不干净、图片比例不统一和标题过长的问题。
- 先在首页或栏目页放一个 CMS list，看三到五条内容是否都能正常展示。
- 把最长标题、最宽图片、最短摘要都放进去测试，不要只看最漂亮的示例条目。
- 确认卡片点击后再创建 CMS page，并让每个条目都能落到独立 URL。
- 如果条目结构太复杂，宁可拆成两个 collection，也不要让一个页面模板兼容所有极端情况。
步骤三：发布前先用 figma.site 验证，不要上来就绑正式域名
Figma 的域名流程有一个非常现实的前提：你得先把站发布出去，才能连接自定义域名。实操上更安全的方式，是先发布到系统分配的 figma.site 子域名，把结构、路由和动态页都走通，再切到正式域名。这样一来，问题是出在页面本身还是出在 DNS，就更容易判断。
- 先完成一次公开发布，确保每个 CMS page 都能打开。
- 记录当前 figma.site 地址，方便正式域名有问题时临时兜底。
- 在正式域名前，先用内部同事做一次浏览测试，确认动态内容和导航都正常。
- 只有当内容结构稳定后，再进入域名绑定和 SEO 统一环节。
步骤四：连接自定义域名时，把重定向策略一次定住
Figma 官方给的流程很清楚：发布后，到 Site settings 里的 Domains 添加 connected domain，然后把系统提供的 TXT 和 CNAME 记录加到域名服务商里。真正容易踩坑的是 apex domain 和 www 的重定向策略。如果两个版本都能打开，却没有干净地跳到同一个版本，你的流量和索引信号就会被拆开。
- 决定主入口是 www 还是 apex domain，不要拖到上线当天再选。
- 若你用的是 apex 或 www，在 Figma 的重定向开关里把另一侧统一跳到主入口。
- 回到域名服务商添加 TXT 和 CNAME，填写值时逐字核对。
- 加完后回到 Figma 点击 Refresh，不要只在 DNS 面板里自我感觉已经完成。
Figma 还给了两个很重要的排错信号。其一，如果你用 Cloudflare 做 DNS，代理状态必须改成 DNS only，否则域名可能无法验证。其二，如果你在 apex domain 上同时存在冲突的 AAAA 记录，也可能导致连接失败。很多“明明照文档做了还是不通”的问题，最后都落在这两项上。
步骤五：发布后不要只看首页，要检查动态页、SSL 和回退入口
自定义域名显示 Connected 只是第一步，不代表你的 live site 就完全可用。Figma 提醒 SSL 证书通常 15 分钟内会配好，但有时会更久。如果你只看首页没问题就宣布上线，很可能漏掉动态页、旧入口或 HTTPS 证书延迟。
- 检查首页、一个列表页、至少两个 CMS page 是否都在正式域名下可访问。
- 确认 www 和 apex 只保留一个主入口，另一个会自动跳转。
- 验证 HTTPS 证书是否已生效，避免用户访问时出现不安全提示。
- 保留 figma.site 备用入口，直到正式域名和内容路径稳定后再下线对外分享。
可复制内容模型模板
站点类型：作品集 / 博客 / 案例库 / 产品目录
主 collection 名称：
必填字段：title / slug / cover / summary / publish_date
可选字段：author / CTA / download_link / tag
列表页显示字段：
详情页显示字段：
主域名策略：www 或 apex
正式发布前必测页面：首页 / 列表页 / 详情页 / 移动端
回退入口：figma.site 子域名
首轮复查日期：实际例子：把静态案例页改成可持续更新的案例库
一个小团队原来只做了一页静态案例展示，每加一个新项目就复制一整段版式，改到第五个项目后首页变得很难维护。更稳的做法是先建一个 Case studies collection，把项目标题、行业、封面、摘要、按钮和发布日期拆成字段，再做一个 CMS list 承接首页卡片，用 CMS page 承接详情页。这样上线后，团队新增案例只要加一条内容，不必再重新摆版。正式切域名前，他们先在 figma.site 里通读全部项目页，发现一张横图比例不对、两个 slug 太接近，处理完再切正式域名，就比“边改边上线”稳得多。
验收清单
- collection 字段已经定型，没有把多种信息塞进一个字段。
- CMS list 和 CMS page 都已用真实内容测试，不是只看空模板。
- figma.site 发布版已经走通，再开始接自定义域名。
- TXT、CNAME 和主域名重定向策略已确认。
- Cloudflare 若在用，代理状态已改为 DNS only。
- 正式域名下的首页、列表页、详情页和 HTTPS 都已验证。
常见坑
- 把 collection 当临时表格用，字段命名今天一套明天一套。
- 先做了一堆静态卡片，后面再硬改成 CMS list。
- 域名刚填进去就宣布上线，没有等 SSL 和重定向验证完成。
- Cloudflare 代理没关，导致一直无法验证域名。
- apex domain 上残留 AAAA 记录，正式域名迟迟不通。
排错路径
- 动态内容不显示：先看 collection 字段是否真被连接到画布，而不是只改了文字样式。
- 自定义域名连不上：回查 TXT/CNAME 是否一致，再看 Cloudflare 是否 DNS only。
- 只通一个域名版本：检查 apex 和 www 的重定向是否真的启用。
- HTTPS 不正常：先等待 15 到 30 分钟，再检查是否有 CAA 或 DNS 冲突。
- 上线后 URL 乱：回到 CMS page 和 slug 规则，先修路径再重新发布。
后续维护建议
更新日期：2026-07-29。Figma Sites 适合把“视觉设计”和“内容更新”放到一个更轻的生产链路里，但这条链路能不能稳定，取决于你是否在第一轮就把字段、域名和发布顺序排清楚。每次要加新 collection、新版式或换主域名时，都先在 figma.site 验证，再上正式域名，会省掉后面很多线上返工。