Framer trick I wish I knew 6 months ago 🔥 I spent months manually duplicating layouts every time a client wanted a new page type. Different hero, different grid, same structure underneath.

Then I discovered Framer's variant components with CMS-driven content.

Here's the trick: build one component with multiple variants (say, "Hero A," "Hero B," "Hero C"), then connect the variant selector to a CMS field. Your client picks a hero style from a dropdown when they create a new page. No code. No duplicating. No calling you at 11pm.

How to set it up:

Create a component with the variants you need (layout shifts, color schemes, icon arrangements, whatever).

Add a new text field in your CMS collection called something like "Hero Style."

Connect the component's variant property to that CMS field.

Done. Each CMS entry now controls which variant renders.

Why this matters:

Your client gets flexibility without touching the design. You build once instead of five times. And when they inevitably want a 4th hero style three months later, you add one variant instead of rebuilding a page.

I used this on my Framer template and it cut my build time by roughly 30%. Every section (hero, features, pricing, FAQ) has 2-3 variants, all CMS-controlled.

One component. Multiple layouts. Zero client confusion.

If you're building Framer sites without this, you're working way harder than you need to.