The content management system (CMS) in Figma Sites helps you organize and scale structured content—like blog posts, case studies, or product listings—without updating your designs. You can view your content live on the canvas, with updates to CMS content appearing immediately.
What is CMS in Figma Sites?
CMS lets you manage and reuse content directly in your webpages. It includes three core pieces:
- CMS collection: A set of fields and items grouped by a topic. Think of a collection like a spreadsheet of your content.
- CMS page: A webpage that acts as a template. Each item in a collection gets its own URL, with content dynamically inserted into the page.
- CMS list: A repeating design block that displays multiple items from one collection.
Examples
Portfolio site
A Case studies collection can hold your case studies.
The homepage features a CMS list of case studies, and each project links to a CMS page with its own images and description.
Product catalog
A Shop collection gives the marketing team an easy way to update names, prices and photos—without editing the site layout.
A CMS list can display featured products, and visitors can click an item in the list to view its full detail page.
Informational pages or blogs
You might create a CMS collection for Posts.
Each article—like How to build a climate ready data stack—is a CMS item.
A CMS list can display recent articles on your homepage, with a link to display each full article in a CMS page.
Tip: To get hands-on with a real example, create a new site file and choose a template from the CMS category. They’re all wired up and ready to use!
Create a CMS collection and add content
Click CMS in the left navigation bar of a Figma Sites file. From there, you can create, edit, and connect content to your site’s design.
Create a CMS collection
A collection defines the structure of your data—the fields and items that power your content. If a collection is like a spreadsheet, fields are the column headers—like title, image, and date—and each item is a row of data.
Learn how to create a CMS collection.
Tip: You can start with a sample data set to get up and running quickly if you don’t have content yet. Click CMS in the left navigation bar of a sites file, then choose one of the starter collections.
Import a CMS collection
If you already have content in a CSV file, you can import it directly to CMS to create a collection. You may need to adjust column headers or content to make sure it can import successfully.
Learn more about importing a CMS collection.
Add or edit items in your CMS collection
Each item in a collection represents one piece of content—an article, a case study, or a product.
Quickly edit an item’s fields—such as its title, image, or description—from the CMS section in the left navigation bar, or by double-clicking connected content on the canvas. As you make changes, updates appear instantly, letting you see exactly how your content looks in context.
Learn more about adding and editing CMS items.
Connect CMS content to your site
Once you’ve added a collection, display its content on the canvas using CMS lists and pages.
Create a CMS list
A CMS list repeats a specified design for multiple items in a collection. The list provides an easy way for visitors to see a list of content in your collection.
Learn how to create a CMS list.
Create a CMS page
A CMS page is a dedicated webpage for a single item. It’s often used as the detail view when visitors click an item from a CMS list.
Learn how to create a CMS page.
Add a pre-built CMS list or CMS page
If you’ve don’t have designs yet, add a pre-built CMS page or list block to your site. These are a great way to get started once you’ve added some content.
Learn more about adding pre-built blocks in Figma Sites.
Publish CMS content
When you publish your site, Figma automatically includes any connected CMS data—so your live site always reflects the latest content.