How to develop with productivity on Webflow?

The way Iorganize my time has a directimpact on the speed at which I will develop my Webflow projects.

For an equivalent website in terms ofanimations, size of the cms and number of pages, the time spent to develop it can vary up to a coefficient 2.

This result is the factor of:

1. The quality of the preparation (upstream) of the model
2. My concentration during development
3. Already created resources available on the web
4. The difficulties I will encounter (have I already experienced them or not?)

Here is, to date, the method (which is still evolving daily) that I find the most effective, to develop, quickly and well, my webflow sites.

A good project preparation

As in sports, good preparation is a considerable advantage.

To develop a site with the no-code webflow tool, it is the same. It is essential to prepare your development well.

Following these steps will save you time:

1. Check with the designer that all the elements of the model are completed (design system, style guide, visuals, iconography, etc.)
2. Download all the fonts and visuals I'll need to create my site
3. Clone Finsweet's client-first style guide
4. Import all visuals, iconography and fonts in the appropriate formats
5. Customize the guide style with the client's graphic charter (button, colors, text, etc...)
6. Create global elements and transform them into symbols (navigation bar, footer, call to action sections, etc.)
7. Create collections and their fields
8. Fill in the collections with some examples

Once these 8 steps are done the hardest part is over (normally 😅 ). You now have a good base to develop the design and create with the no-code Webflow tool.

Improve your concentration!

This is the most important lever to develop faster. I need to be focused.

Carlson's Law: how to improve my productivity?

To create the groundwork for concentration in a world of distractions and to be in the famous and sought-after state of "flow", I choose strategic times, usually in the morning, when I cut :

• all my sound notifications (slack, phones, emails, networks...),
• is not my phone on me: there is a real difference when the phone is not accessible at hand (⚠️ for this method to be effective, it must require at least 20 seconds of effort to access your phone),
• does not accept calls or meetings during these times,
• don't look at my emails,
• launches and lets scroll a playlist of music in my airpods...

And I let the magic happen. If necessary, I take time for a coffee break, then I get back to work on my project.

Limit the number of simultaneous projects

If you haven't worked on this webflow project for a while, you need a few minutes or even a few hours to get back into the structure of this site.

So I try to limit the number of jumps between the different webflow projects I work on. Because when I work simultaneously on only one or two projects, I have in memory all the information of the global elements such as my ;

• Symbols
• Naming your CSS classes
• Naming of your CMS dynamic fields

And mechanically, I develop with automatism and productivity.

PRO TIPS: of course, the time to re-adapt a webflow project is reduced if you use the Client-First methodology methodology to create your web sites.

Resources that improve productivity on Webflow

1. Chrome extensions to use

I use 2 chrome extensions that unlock features that help me save time!

• Finsweet chrome extension
• Flowbase extension

Learn more by watching this video

2. Don't create from scratch: Save time with components

Stop building from scratch.

How do you do it? With the magic copy/paste feature. Many libraries now allow you to use pre-built elements. These libraries are very useful to quickly transform your Figma mockups into a Webflow site, in record time!

Here are some of the most famous bookstores;

• Flowbase
• Relume library (recommended by Digidop ✅)
• Finsweet client-first wireframe (recommended by Digidop ✅)

Learn how to create components in Webflow

Help from the no-code community

Sometimes you get stuck. A section, an animation... This blocking can last 10 minutes or 3 days. If I had to share with you only one advice :

Don't be afraid to ask for help!

Like you, we have all been in this situation on Webflow. And the community remembers it and will help you. That's what I call the no-code spirit.

Better call Thibz

If you are in an agency, don't hesitate to ask your team for help. This is my first reflex when I have a question.

"Hey Thibz, got any ideas? 👋"

(1+1 = 3.... and as a bonus it creates good memories, right Thibz? )

Ask for help to Thibaut on linkedin

Ask Flo for help on Linkedin

Slack channels (webflow, no-code ...)

There are many channel slacks with quality content

Discover in this article my selection of channels slacks to find help on Webflow

Last, but not least

Finally, before launching a new webflow project, I follow the webflow SEO checklist from Digidop, to be sure I didn't miss any point before the final rendering !

And the rest ... ?

I hope this article will, or has, helped you find your way around the webflow tool!

If you have any tips, which can help me to improve my method, I would love to hear them! Don't hesitate to send me a message on Linkedin. I am always looking for new ways to work.

Otherwise, you can find more tips on Webflow, by following our Youtube channel!

See you soon!