BY SARAH PALUSZNY
Framer is a no-code website builder that has been rapidly gaining popularity over the past couple of years. As someone with a background in web development and design, I was curious to see how it stacked up—both in terms of usability for beginners and flexibility for developers.
To test it, I created a fictional product called Skip-That-Song: an app that allows users to skip the current karaoke performance. Features included democratic skipping, skip analytics, and venue integration. This project gave me a chance to explore Framer’s design tools, build workflow, and performance capabilities.
Design Process
Even though Framer is marketed as an all-in-one design-and-build tool, I started my process in Figma (where I’m most comfortable). My goal was to create a classic SaaS-style landing page with:
- A dark theme for a sleek, modern look
- Three sections: hero section, feature cards, and a contact form
- A responsive navigation bar that would adapt between desktop and mobile
By sketching everything in Figma first, I had a clear blueprint before diving into Framer.
Building in Framer
I decided to approach Framer “blind,” without tutorials, to test how intuitive it would be.
- Navigation Bar: Adding a nav bar was surprisingly quick thanks to Framer’s prebuilt components. This is a nice shortcut compared to coding one from scratch, which can get complex.
- Hero Section: I set up a two-column layout (image on one side, text + button on the other). Framer’s layout controls felt familiar since they mirror concepts from flexbox and grid. Initially, I struggled with image sizing, but once I placed the image inside a Frame, things clicked.
- Responsiveness: This was one of Framer’s most impressive features. Creating a mobile breakpoint after finishing the desktop design was seamless, making responsive layouts easy to manage.
Performance and Usability
As someone who has built many sites with HTML, CSS, and JS, I found Framer’s system intuitive—but not always as “drag-and-drop simple” as advertised. Some interactions, like resizing or positioning, might confuse first-time users without a web background. That said, I was pleasantly surprised by the Lighthouse speed test results. Even without heavy optimization, the Framer site scored well for performance. The mobile navigation bar also looked polished out-of-the-box, though I ran into a small bug: when opening the preset mobile menu, clicking on a link didn’t always behave as expected. Since it was a preset, I couldn’t easily fix the issue in Framer’s UI.
Final Thoughts
Framer impressed me with how quickly I could go from design concept → responsive website. It strikes a strong balance:
- For designers: the interface makes layout and styling approachable, especially for those less comfortable with code.
- For developers: familiar concepts like flex and grid translate well, and the ability to optimize responsiveness is a huge plus.
That said, Framer’s promise of effortless drag-and-drop doesn’t fully hold up—it still requires a bit of web knowledge to get things right. And while the preset components are helpful, they can feel limiting when bugs appear. Overall, I’d recommend Framer for designers looking to publish fast, professional marketing sites or for developers who want a quicker way to prototype without starting from scratch.