# Introduction to Figma Sites CMS

Source: https://www.youtube.com/watch?v=H2ssGe1EzP0
Recap page: https://rapidrecap.app/video/H2ssGe1EzP0
Generated: 2025-11-19T18:38:59.097+00:00

---
## Quick Overview

Figma Sites CMS allows users to dynamically populate website content, such as blog articles, portfolios, and event pages, by connecting data from collections structured like spreadsheets to design elements within Figma, enabling content updates without altering the underlying design layout across various breakpoints.

**Key Points:**
- Figma Sites CMS manages site content in one place, allowing creation from scratch, templates, or CSV import (0:34, 1:34).
- Collections structure data using fields (columns) and items (rows), similar to a spreadsheet (1:18).
- Users connect CMS collections to design elements, creating unique pages for each item (like a blog post) or lists of repeating items (like a carousel) (2:25).
- Field mapping connects CMS fields (e.g., Title, Author Name, Article Content) to specific layers in the design canvas (3:05).
- Dynamic content updates allow editing field values in the CMS panel, which automatically updates the corresponding design across all breakpoints (3:02, 4:23).
- The list component allows setting a visual limit (e.g., 3 items) and reordering items directly within the CMS table (4:07, 4:14).
- Users can preview the live, data-populated pages in a full-screen window to verify the dynamic content integration (4:37).

![Screenshot at 0:17: Demonstration of connecting the 'Journal' CMS collection on the left panel to the design structure on the right, showing fields like Title, Author, and Article Content being mapped to layout elements.](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-00-17.png)

**Context:** This video tutorial explains how to implement a Content Management System (CMS) within Figma Sites, specifically demonstrating how to connect structured data collections—like a 'Journal' blog—to design components to create dynamic, scalable web pages. The presenter showcases connecting various fields (title, author, content) to design layers, ensuring that content edits in the CMS are instantly reflected across all designed breakpoints without breaking the layout.

## Detailed Analysis

The tutorial introduces the Figma Sites CMS functionality, which centralizes content management. Users begin by creating a new collection or importing data via CSV (1:34). Collections organize data into structured fields (columns) and items (rows), exemplified by a 'Journal' collection containing blog articles with fields like Title, Author Name, and Article Content (1:18, 3:40). To link this data to a design, users navigate to the 'Connect' tab on the left sidebar and select a collection (2:21). They choose whether the connection creates an 'entire page' for each item (like a unique blog page) or a 'part of a page' (like a repeating list or carousel) (2:25). Once connected, specific layers in the design—such as text elements or images—are mapped to corresponding CMS fields by clicking 'Connect' next to the layer and selecting the field (2:58). This connection is shown for the Title, Author Name, Author Job Title, Author Bio, Publish Date, and multiple Article Content blocks (3:09). Upon mapping, the design canvas instantly populates with data from the selected CMS item, and changes made to field values in the CMS panel update the design immediately (3:02, 3:24). Furthermore, for list components, users can control the number of items displayed (Limit) and reorder items directly in the CMS table view, which reflects immediately on the design canvas (4:07). Finally, users can preview the live, data-driven pages across different breakpoints (Desktop, Tablet, Mobile) to ensure proper rendering of the dynamic content (4:36).

### CMS Setup and Collection Structure

- Creating a CMS collection or importing data via CSV
- Collections structure data into fields (columns) and items (rows)
- Existing collections like 'Journal', 'Careers', and 'Employee directory' are shown (1:18, 1:34)

### Connecting Pages and Lists

- Connecting a collection to an entire page creates unique item pages (e.g., blog posts)
- Connecting to 'Part of a page' creates repeating lists like carousels or article indexes (2:25)

### Field Mapping Process

- Mapping design layers (text, images) to CMS fields in the left panel
- Users click 'Connect' next to a layer and select the corresponding field (e.g., Title, Hero Image) (2:58, 3:17)

### Real-time Content Updates

- Editing field values in the right-hand CMS panel updates the design immediately across all breakpoints
- Switching between different items in the collection header updates the previewed page content instantly (3:02, 4:23)

### List Component Configuration

- Using the CMS List component allows styling repeating item layouts
- Users can set a 'Limit' to control how many items appear in the list (e.g., setting limit to 3) (4:07)

### Previewing and Finalizing

- Clicking the preview icon shows the live, data-populated website
- Users can verify content rendering and styling across desktop, tablet, and mobile views (4:36)

![Screenshot at 0:08: Example content types managed by the CMS: Blog Articles, Portfolios, and Events pages \(0:08\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-00-08.png)
![Screenshot at 0:17: Initial view of the CMS table structure for the 'Journal' collection, showing fields like Title, Author, and Article Content \(0:17\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-00-17.png)
![Screenshot at 0:39: Demonstration of a CMS page template acting as a template, showing how dynamic data fields \(like Title and Author\) are mapped to placeholder text \(0:39\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-00-39.png)
![Screenshot at 1:16: The interface for adding a new collection, emphasizing the spreadsheet-like structure for data organization \(1:16\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-01-16.png)
![Screenshot at 2:23: The dialogue box offering two connection types: 'An entire page' for unique URLs or 'Part of a page' for repeating lists \(2:23\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-02-23.png)
![Screenshot at 3:06: Connecting the 'Author Job Title' layer on the canvas to the corresponding 'Author Job Title' field in the left panel \(3:06\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-03-06.png)
![Screenshot at 3:46: Accessing the CMS blocks library within the design panel to drag and drop pre-connected list components onto the canvas \(3:46\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-03-46.png)
![Screenshot at 4:07: Adjusting the 'Limit' setting in the CMS List properties panel to control the number of items displayed in the repeating list \(4:07\)](https://ss.rapidrecap.app/screens/H2ssGe1EzP0/00-04-07.png)