Framer's CMS index pages let visitors browse an entire collection in one view, and this tutorial shows the exact build process using the Agent tool to scaffold the layout in under two minutes.

The video walks through collection lists, which repeat a single item layout across every entry automatically, then covers binding individual layers to CMS variables so content populates without manual input. The process for adding extra fields to each preview card while keeping the design consistent across all items is shown step by step.

The value here is not the final result but the sequence: Agent, collection list, variable binding, field expansion. Watch it to understand how these four steps connect, because skipping any one of them breaks the others.

[WATCH ON YOUTUBE →]