How do I set up a CMS Template page in Webflow to look like this figma image?

To match a CMS Template page in Webflow to your Figma design, you’ll need to map your design components to CMS fields and use Webflow’s dynamic bindings. Here's how to do it step-by-step.

1. Build the CMS Collection

• Go to the CMS panel in Webflow and click “+ New Collection.”
• Add fields that match your Figma layout (e.g., Title, Main Image, Body Rich Text, Author, Category, etc.).
• Click Create Collection when done.
• Add at least one dummy item so that template page has preview content.

2. Open the Collection Template Page

• Navigate to Pages Panel > CMS Collection Pages.
• Click the template page that corresponds to the collection you just created (like “Blog Post Template”).
• This is the dynamic page used to display each item in the collection.

3. Design the Template Page Layout

• Use Webflow’s elements (like Section, Container, Heading, Image, etc.) to replicate the structure of your Figma design.
• Use dynamic bindings to insert CMS fields:
• Select an element → Click settings (gear icon) → Choose “Get Text from…” or “Get Image from…” from your collection.

4. Style It to Match Figma

• Match the typography, spacing, colors, images, and layout exactly as per your Figma file using the Style Panel.
• Pay attention to:
• Font sizes and weights
• Margins and padding
• Flexbox/Grid structure
• Backgrounds and borders

5. Handle Rich Text Fields

• For body content or other rich text fields:
• Drag a Rich Text element onto the canvas.
• Bind it to your Rich Text field (e.g., "Body").
• To style it, select the Rich Text element, then click “Open Selector” and choose "All Rich Texts" or create a custom class to style headings, paragraphs, images, etc. inside.

6. Add Conditional Visibility (if needed)

• For elements like an optional Author Bio or Secondary Image, use Conditional Visibility:
• Select the element → Go to Settings (gear icon) → Add a condition to only show if the connected field is set.

7. Use Collection Lists (if applicable)

• If your Figma design includes related posts, tags, or authors:
• Add a Collection List inside the template.
• Filter it to show related content (e.g., same category).

Summary

To match a CMS Template page to a Figma design, build the CMS structure first, then use dynamic bindings and Webflow’s layout/styling tools to match the visual design. Make sure all text, images, and rich content are dynamically connected and styled according to your Figma file.