Did you know you could do this in FRAMER CMS?

Framer CMS hack

I’ve rebuilt my portfolio more times than I’d like to admit.

ohh btw Friends link here, Read the articles for free Click here✌️

My very first portfolio was built using plain HTML, CSS and JavaScript. Whenever I got stuck, a friend of mine who was a backend developer helped me navigate through Laravel, and together we somehow made it work. This was long before AI became the developer sitting next to you. Back then, Stack Overflow was where all of us went when we hit a wall.

A few years later I was introduced to WordPress. I was able to create custom layouts using Divi Builder and some plugins.

Then, about a year ago, I finally rebuilt everything in Framer.
Honestly, it has been one of my favorite tools for building portfolio websites. It’s fast, visually intuitive, easy to maintain, and makes publishing updates incredibly simple.

But while migrating my UX case studies, I found one limitation that immediately stood out. Framer expects every CMS item to follow the exact same page structure.
That sounds perfectly reasonable… until you’re designing a UX portfolio.

Why This Is Actually a Problem

Every portfolio template, every YouTube tutorial, and even most Framer templates encourage something like this:

Project Title → Subtitle → Cover Image → Overview → Problem Statement → Research → User Personas → User Journey → Wireframes → Design System → → Final UI → Prototype → Learnings

or something similar to this right?

On paper, that looks like the “ideal” UX case study. In reality? Almost none of my projects have looked exactly like that. And honestly, I don’t think yours do either.

If you’re building a completely new product in an unexplored space, investing time into understanding different user groups absolutely makes sense. But how often does that actually happen? Today, many of us are designing products that already exist in some form.

Another CRM, Another healthcare platform, Another e-commerce experience, Another AI assistant.

You probably already know who your users are. The challenge isn’t discovering who they are, it’s understanding how they currently behave and where the existing experience is breaking down. That’s a completely different design problem.

New Product vs. Product Redesign

This is something I don’t see discussed enough. A brand-new product and a redesign shouldn’t have identical case studies. If I’m designing a new product, my process might include:

  • Market research → Competitor analysis → User interviews → Personas → → Journey mapping → Information Architecture

But if I’m redesigning an existing product? The starting point changes completely. I’m usually looking at things like:

  • Existing user journeys → Analytics → Drop-off points → Heatmaps → Heatmaps → Customer feedback → Support tickets → Feature adoption → Business constraints → Technical limitations

If the product already exists. People are already using it. Now my job isn’t to imagine an experience. It’s to improve one. Trying to force both of these projects into the exact same CMS template doesn’t really make sense. They’re solving completely different problems.

Every Project Has Its Own Story
One thing I’ve learned after working across healthcare, AI, enterprise tools, internal platforms, CRMs and consumer products is that every project naturally tells its own story. Some projects are heavily research driven. Some revolve around stakeholder management. Some are packed with technical constraints. Some are all about simplifying an existing experience.
Trying to squeeze every one of them into the exact same template almost feels like writing five different books using the exact same chapters. You can do it. But eventually every story starts feeling the same. My own portfolio follows a very simple structure. Every project starts with:

Title → Subtitle → Cover Image → Overview → My Role → Challenge → Solution

Everything after that is completely custom. Some projects immediately jump into research. Others start with business problems. Some include design explorations. Some include usability testing. Others focus on accessibility, design systems, AI workflows or technical limitations.

The project decides the story, not the template.

The Workaround I Found

After experimenting for a while, I found a surprisingly simple workaround that lets every CMS page have completely different sections while still using a single CMS Collection. Here’s exactly how I set it up.

Step 1 Create an “Options” Field

Inside your CMS Collection, create a new field called Options. Now add an option for every project.

💡 Pro Tip: Name these exactly the same as your project titles, or something you’ll instantly recognize. It becomes much easier to manage later as your portfolio grows.
Add Options Field
Create Options by clicking on Add and adding all your project names.

Step 2 Add Your Custom Sections

Now create the custom sections you want for a project. Instead of leaving them floating around the page, group related sections inside a Stack or Frame. Personally, I prefer using a single Stack because it’s much easier to organize later, but multiple Stacks work just as well.
If you stop here, every single section will appear on every project. Which is exactly the problem we’re trying to solve.

Step 3 Make the Section Conditional

Select the Stack. On the right sidebar,

Under Styles, you’ll find Visible → Click the + icon → Set Variable → Select Options → Set the condition to Equals → Select the project that should display this section.

Now inside your CMS, You’ll see a new dropdown called Options, select the Project name where you added the condition earlier.
For e.g. I added the condition for Project 3 as you can see in the screenshot.

That’s it.👏

Now that Stack where you applied the condition to show on a specific project only appears for that specific project. Repeat the same process for the remaining custom sections and/or Projects.

This tiny workaround completely changed how I build portfolios in Framer. I no longer have to design around the CMS. The CMS works around my projects. Some of my case studies are almost entirely visual. Others dive deep into research. Some focus on AI workflows. Some barely mention research at all because the interesting part was solving technical constraints.

Every project finally gets the freedom to tell its own story. Exactly as it should. And the best part? This isn’t limited to portfolios.

You can use the same approach for blogs, documentation, resources, marketing pages, or anything where each CMS item deserves a unique structure.

Don’t let the CMS decide how your content should look.

🖌️You’re the designer.

Your projects should be the ones driving the experience.

If this saves you a few hours of frustration. Or helps you build case studies that actually reflect the work you did, then it was absolutely worth sharing.

Thank you for Reading 👏
My name is Dhruvin Dave & I am a Lead Product Designer. Feel Free to connect with me over Linkedin or Instagram. You can visit my Website for more information.

Did you know you could do this in FRAMER CMS? was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论