Framer has no official way to password-protect individual pages. For designers with NDA-protected work in their portfolios, that's a real problem. I identified the gap, built a solution from scratch, shipped it as a commercial product, and generated $600+ in revenue on Gumroad.
The Problem
As a designer with NDA-protected case studies, I needed a way to password-protect individual pages within my Framer portfolio. Framer doesn't offer this natively, and when I went looking for a solution, the existing options were limited: workarounds that required technical setup, third-party services with their own friction, or paid tools that felt overbuilt for the use case.
None of them were something I'd feel comfortable recommending to another designer. So I built one.
Research
Before building anything, I mapped what already existed. The options ranged from manual overrides and code snippets to paid plugins with optional payment gating. Most required more technical knowledge than the average Framer user has, and none offered the combination of simplicity, customizability, and seamless Framer integration I was looking for.
That gap defined the brief: a Framer component that any designer could drop in, configure visually, and use to protect any page.
Competitive Research
Pros
Cons
Provides a secure override for a framer layer to hide the content behind a password form
The form is not customizable
Free
Pros
Cons
Provides a password form
Redirects the user to another page, which may not be securely protected
Costs a $15
Framer Overrides
Pros
Cons
Provides a secure override for a framer layer to hide the content behind a password form
The form is not customizable
Free
Pros
Cons
Super build-out with a Firebase database for backend authentication, and user accounts
Firebase instance is owned by the independent developer
Proper implementation of security password validation
Redirects to other framer pages, its not clear that page requires a password to access
Super customizable
Complicated setup
Free
Beta Release
The Solution: PasswordForm
PasswordForm is a native Framer component that adds password protection to any page. It connects directly to child elements on the Framer canvas, so the protected content lives inside the component itself rather than requiring any external setup.
Designers can configure it entirely through Framer's component controls, with no code required:
Font, color, border radius, and padding
Responsive behavior across desktop, tablet, and mobile breakpoints
A clean, branded password form that matches the rest of the site
Technical Challenges
Responsive behavior. Getting the form to adapt across breakpoints required a different approach than a standard component. I implemented a breakpoints array with a corresponding children array, allowing each breakpoint to reference its own layout. Combined with an override script that sets child content to fill the parent element's width, the component handles responsive behavior the same way Framer handles it natively.
Child component linking. The component needed to control what content was visible before and after a correct password entry. I connected the form to child elements on the canvas directly, which meant working out how Framer's component model handles parent-child relationships in this context. This was my first Framer component, and figuring out that architecture was the core technical challenge.
Shipping It 🚀
Once the component was working, I built a dedicated demo and marketing site in Framer to show it in action. I listed the remix link on Gumroad and wrote product marketing copy that explained the use case clearly for designers who might not know why they need it yet.
