The way I organize my time has a direct impact on how quickly I will develop my Webflow projects.
For a website that is equivalent in terms of animations, CMS size, and number of pages, the time spent developing it can vary by a factor of up to 2.
This outcome is influenced by:
- The quality of preparation (upfront) of the mockup
- My concentration during development
- The resources already created and available on the web
- The challenges I will encounter (have I faced them before or not?)
Here is, as of now, the method (which is still evolving daily) that I find most effective for developing quickly and efficiently my Webflow sites.
Effective Project Preparation
Just like in sports, good preparation is a significant advantage.
The same goes for developing a site using the no-code tool Webflow. It is essential to prepare for the development thoroughly.
Following these steps will help you save time :
- Check with the designer that all elements of the mockup are complete (design system, style guide, visuals, iconography, etc.)
- Download all the fonts and visuals I will need for creating my site
- Clone Finsweet's Client-First style guide
- Import all visuals, iconography, and fonts in the appropriate formats
- Customize the style guide with the client's graphical charter (buttons, colors, text, etc.)
- Create global elements and turn them into symbols (navigation bar, footer, call-to-action sections, etc.)
- Create collections and their fields
- Fill in the collections with some examples
Once these 8 steps are completed, the hardest part is usually over 😅. You now have a solid foundation to develop the design and create with the no-code tool Webflow.
Enhancing Your Focus!
This is the most important lever for faster development. I need to be focused.
Carlson's Law: How to Improve My Productivity?
To create a conducive environment for concentration in a world of distractions and reach the so-called and sought-after state of “flow”, I choose strategic hours, usually in the morning, when I cut off:
- all my sound notifications (slack, phone calls, emails, social networks...),
- my phone: there is a real difference when the phone is not accessible at arm's reach (⚠️ for this method to be effective, accessing your phone should require an effort of at least 20 seconds),
- no accepting calls or meetings during these time slots,
- definitely avoiding checking my emails,
- playing and letting a music playlist run on my airpods...
And I let the magic happen. If necessary, I take a coffee break, then I dive back into my project.
Limiting the Number of Simultaneous Projects
If you haven't worked on this Webflow project for a while, you need a few minutes or even hours to reacquaint yourself with the site's structure.
Therefore, I try to limit the number of transitions between different Webflow projects I’m working on. Because when I'm simultaneously working on just one or two projects, I have all the information of the global elements in my memory, such as my;
- Symbols
- CSS class naming
- CMS dynamic field naming
And automatically, I develop with efficiency and productivity.
PRO TIPS: Of course, the re-adaptation time for a Webflow project is reduced if you use the Client-First methodology for creating your websites.
Resources That Boost Productivity on Webflow
1. Chrome Extensions to Use
I use 2 Chrome extensions that unlock features to help me save time!
- Finsweet Chrome extension
- Flowbase extension
Learn more by watching this video
2. Don’t Start from Scratch: Save Time with Components
Stop building "from scratch."
How? By using the magical feature of copy/paste. Many libraries now allow you to use pre-built elements. These libraries are incredibly helpful for quickly transforming your Figma mockups into Webflow sites, in record time!
Here are some of the most well-known libraries;
- Flowbase
- Relume library (recommended by Digidop ✅)
- Finsweet client-first wireframe (recommended by Digidop ✅)
Learn how to create components in Webflow
Support from the No-Code Community
Sometimes you get stuck. A section, an animation... This blockage can last 10 minutes or even 3 days. If I had to share just one piece of advice:
Don’t be afraid to ask for help!
Like you, we’ve all been in this situation on Webflow. And the community remembers and will help you. This is what I call the no-code spirit.
Better Call Thibz
If you're in an agency, don’t hesitate to ask your team for help. Personally, it’s my first instinct when I have a question.
“Hey Thibz, any ideas? 👋”
(1+1 = 3.... and as a bonus, it creates great memories. Right, Thibz?)
Ask Thibaut for help on LinkedIn
Slack Channels (Webflow, No-Code...)
There are many Slack channels with quality content.
Check out my selection of Slack channels to find help on Webflow in this article.
Last, but not least
Lastly, before launching your new Webflow project online, I follow the Digidop SEO checklist for Webflow, to ensure I haven’t missed any points before the final output!
And what’s next...?
I hope this article helps you to find your workflow method for using the Webflow tool!
If you have any tips that could help me improve my method, I’d love to hear them! Don’t hesitate to message me on LinkedIn. I am always looking for new working methods.
Otherwise, you can find more tips on Webflow by following our YouTube channel!
See you soon!
