How to build Webflow websites in hours, not days or weeks.
The first few paragraphs here are just filler. I went on a little rant about Webflow and my studio and my story with development. Skip to the numbered list for my process and tips on how to speed up dev process.
I’ve been using Webflow for my business (both on client and internal web projects) for as long as I can remember. Even before as a freelancer, I would only do any sorts of development on Webflow. Never had to touch another platform, except Elementor (shit was traumatic) once back in 2019.
At this point, I feel like my Webflow skills are in the top 0.05%. Creating new layouts (simple and complex) feels like second nature. Classes, interactions, variables, CSS properties, code add-ons, and other Webflow native features are intuitive to the point of muscle memory. I remember doing a client project for a finance startup back in 2022, and was able to finish the core development for a 4 page website with relatively complex layouts in less than 6 hours.
Of course, the site wasn’t perfect. There were unpopulated CMS collections, poor SEO settings, unresponsive layouts in some places and a plethora of small and critical unchecked boxes. Those took time to finish off, but the core development was incredibly fast.
With tools like Relume and Finsweet, it’s incredibly easy to get a site translated from Figma in a matter of hours. All you essentially do is copy and paste Webflow sections from Relume’s pre-designed gallery of sample layouts that look similar to your designs (and trust me, there’s no layout too complex or unorthodox to find a version of on this app), and style them until they’re pixel perfect. Sounds simple, but needs great practise.
My best approach to getting something like a large build knocked out in 10–15 hours of deep work is by rolling down the blinds, putting on sound cancelling headphones, playing some background podcast and getting into it for sprints of 3–4 hours before taking a break and doing it all again. I’ve done this practise for at least 15 projects by now, and while its a lot of effort it does get the work done.
But, it’s boring work. Last year, I had to reflect on what was eating away time and energy from my creative process. I wanted to work on improving the studio’s quality by brining on motion designers, interaction designers, 3D designers and illustrators, but my timelines were always crunched. It was too packed for me to think about this expansion, and I really needed to take some steps to cut down and delegate some of the easy, repeatable, boring stuff. Webflow. Although I’d gotten fast and efficient with my Webflow builds, I realized that it was taking away from the goals I had set for myself. The goal to gorw and do better on each project. The goals to really invest my time on the creative parts of the process and less on the technical. I knew that I had to figure out a way to cut some burdens to put myself back in a place of free creative thought and open collaboration. And so I did.
What’s good about looking for freelancers and agencies for a skill that you’ve mastered is that you can see the signs of a productive / non-productive worked pretty early on. I could simply take a look at people’s Webflow read only links and see if they were any good. There are some common tells — poor class naming, uncleared styles, poor pagesite performance, uncompressed images, uncommon paddings / margins. All of those little things. It all gotta be perfect.
Few months in, I found a good fit and have been relying on them ever since. Been great so far — quick, efficient, not-too-expensive, decent communication, gets the work done, but most importantly they save me about 15–20 hours per project.
As I write this, I realise I haven’t really addressed the topic here. I just talked about my journey with Webflow dev haha. Here’s a list of things I did to reduce my dev time from weeks to hours:
- Get the environment right. This was big for me. Set up a place where you can sit for hours. No distractions, no social media, none of that bullshit.
- Listen to something that makes you braindead. Weird one, but a lot of Webflow development is really just doing the same things again and again. You’re not really building layouts, you’re typing words (classes) on boxes to make them look like Figma. It’s boring work, and it’s a lot less painful and faster if you do it while listening to a podcast.
- Design with development in mind. The journey really starts on Figma (unless you use AdobeXD). Make sure you’re reusing the same font styles across your web screens and all paddings, margins, spacings, font sizes, button widths, and other stuff is consistent. Here’s an example of my text styles organized on Figma:
4. Once the design is fully done and all the layouts are consistent, sign up for Relume. I’m not sponsored by them or have any affiliation, but it the only thing out there that can take you from a blank screen to a full structure in less than 2 minutes.
The goal here is to not perfectly develop your screens. No, we’re trying to be fast and effecient. The pixel perfect shit comes later. Right now, just copy and paste layouts from their component library on the website. Here’s an example from one of my sites:
This was the design for a section on Figma
This is what I copy-pasted onto Webflow.
5. Style everything. Once the entire site or an entire page is full of these wireframe-looking sections, you gotta start styling. Use Finsweet’s Client First naming system to add on classes (it will already be setup with your Relume project; it’s great). Make sure all the details are perfect.
That’s my whole process. It’s not too complex, and its hard to put into words or a list you can hack. But that’s my entire process. I design something on Figma and make sure all the styles are easy to develop. Then I find layouts that correspond to those designs and style them.
As of right now, I got 2 back to back dev projects and my current dev has his hands full on another one of my projects, so I’m back on Webflow for this week. It’s fun and I’m happy to be back. It’s a lot of practise, and I don’t know if it’s truly worth it (anymore) to learn Webflow but if you’re using Webflow already and want to get your builds done faster, it may be helpful to use the 5 steps that have worked best for me. The environment is really a big factor for me.
We’ve got some super interested projects coming up at the studio (+ a new website!), and I’ll announce everything here on Medium as well as on my Twitter.
See ya next week, same time.
