Sep 10, 2022
7 min read
Mastering Framer: My Journey From Designer to No-Code Developer
My journey to learning Framer began about a year ago. When I first discovered its potential, I was instantly excited. The idea of being able to bring my designs to life without writing code was a game-changer for me.
I had some coding knowledge, but my (not that good) coding skills and the time commitment needed to create custom sites made coding infeasible. Tools like Framer (and others like Webflow) make it possible for a humble designer, like myself, to also become a developer. That’s the beauty of no-code.
Getting Started: Learning by Doing
Once I saw the possibilities, I decided to jump in. I noticed a growing market for selling Framer templates, so I thought, "Why not learn by creating one?" I knew I wouldn’t make much money off the first template (spoiler alert: I was right 😭), but the learning process was invaluable.
After researching the Framer marketplace, I realized there weren’t many templates for restaurants (at that time!). Small businesses like these often need simple websites with just a few pages, so it seemed like the perfect project to test, learn, and experiment with Framer.
My First Template
Looking back, my first template was more about experimenting with the software than focusing on the design itself. I rushed through the visual concept in Figma because I was eager to dive into Framer. In hindsight, I wish I had spent more time refining the visual design and structure before jumping into implementation.
I successfully submitted my template to the Framer marketplace (not on the first try though), The Elaboré – but over time, it was removed as it no longer met Framer’s updated guidelines. Honestly, I can’t argue with that. I've made it now free, you can get it by clicking here.
Although I sold a few copies, the real reward was validation. People saw value in what I created and used it for their businesses. That gave me the motivation to keep going.
Expanding My Skills: Auto Repair Shop, Consulting and Firewood Sale & Delivery
After my first project, I invested more time in learning Framer. My second template, EVS 24, was for a car repair shop. This time, I introduced CMS functionality, which added complexity. Although it took longer to build, the more advanced technical elements made me proud when I saw the final result.
This template had a higher price than the first one, and though the sales didn’t cover my development costs, the experience was worth it. Plus, the better sales that the previous one gave me a little extra motivation to keep pushing forward.
With each new project, I focused more on refining my design before transitioning into Framer. And was in this context that the DS Consulting template appeared. It is aimed at consulting firms, law practices, or even architecture studios. I’m especially proud of this one because I spent more time working on the design, and the implementation in Framer was more advanced.
One day, while searching for firewood suppliers for the winter, I realized that most businesses in this space didn’t have websites. That sparked an idea: I created The Wood Brothers, a low-cost template designed to help these businesses establish an online presence and boost their sales.
Overcoming Limitations
In my next project, I wanted to overcome a challenge. At the time, Framer didn’t have a native filtering system for CMS content (as of the date of writing this post). I decided to tackle this by creating a template.
The result was Reliable Cars, a template for car dealerships. I built a dynamic filtering system by creating a custom component with over 30 variations, allowing users to filter vehicles by type (all, coupe, sports, sedan, SUV, truck) and by fuel (all, gasoline, diesel, hybrid, electric).
This template, along with The Wood Brothers and DS Consulting, was accepted into the Framer Marketplace, where they’ve stayed ever since (fingers crossed they stay there! 🤞).
Rejection as a Path to Growth
Now, before I tell you about my latest template, I have to mention an important part of this journey: rejection. I’ve received multiple rejections from the Framer marketplace — not once, not twice, but probably dozens of times (even though I’ve only built six templates so far 😅).
In the beginning, those rejections made me question whether I should continue creating templates. But I soon realized that if my primary goal was to learn, then these rejections were just part of the process. In fact, the feedback I received — when it was provided — helped me improve both my designs and my overall skills as a professional. So, in a way, I’m grateful for Framer’s high standards, even though it’s been tough to swallow at times 🙉.
The Razor Brothers: A New Direction
After Reliable Cars, I've designed The Razor Brothers, a barbershop template. For this one, I decided to break from convention and go for a design that was more unique compared to the other templates in the marketplace. Once again, my first submission was rejected, so I sought advice on Reddit’s Framer community. The feedback I received was invaluable and helped me view my design with fresh eyes. I realized that sometimes we get so caught up in the details that we lose sight of the bigger picture. With a few key adjustments, I was able to significantly improve the design.
I’m currently refining this template for re-submission, thanks to the Framer community, especially to Abhijit Haldar, who took time to provide constructive and valuable feedback.
Where I Am Now
This entire process led me to build this website you're at right now using Framer, and gave me the ability to handover complete websites to clients instead of only design them. Looking back, maybe I should have spent more time on design rather than rushing to get my hands on the software, but on the other hand, doing more templates helped me learn Framer better, and the time is limited!
But that’s all part of the journey. And for the next one, I have the necessary Framer knowledge to spent more time designing and be faster at implementing it on Framer.
need a trustworthy design partner?
Discover what JB Studio can do for you. Let's talk about what you're building and how we might be able to help.
More articles
The Importance of a Website for a Local Business
A website is a crucial element for generating results online. It serves as a destination for potential customers and offers complete control over the content, unlike social media platforms where businesses are dependent on external algorithms.
Sep 20, 2022
5 min read
The importance of typeface in design
A "simple" change in a typefce in a design project can result in two drastically different messages. Choosing the right typeface is less about finding the "best" type and more about finding the right one(s) for your specific context.
Sep 15, 2022
5 min read