Badge Webflow Award Winner 2023

The 7 essential tools for Webflow developers in 2024

Published on 
28/8/2023
-
Amended on 
28/8/2023
Reading time: 5 min
Photo of Florian with Webflow logo in hand and è other tools (Relume Library, Figma, ChatGPT, Midjourney, Detailed SEO extension, Squoosh, Finsweet extension)
Written by
Florian Bodelot with a T-shirt Digidop

Florian Bodelot

Co-founder

Discover the 7 (no-code) must-have tools for Webflow developers in 2024. Boost your workflow with AI, design and SEO solutions

Key points to remember

There are hundreds of no-code tools out there, but as a Webflow developer, if I had to choose just 7 tools for my stack in 2024, they'd be the following:

Short version ↓

  1. Relume Library (IA): Accelerate your development process
  2. Finsweet Chrome Extension: +80 tech features specially designed to push the limits of Webflow.
  3. Midjourney (AI): Using AI to generate images as an alternative to traditional image banks.
  4. ChatGPT (IA ): Do I really need to explain? 😉
  5. Figma: the perfect tool for combining design and collaboration.
  6. Squoosh.app: Free, efficient tool for reformatting your images.
  7. Detailed SEO extension: A useful all-in-one tool that makes it easy to audit a site's SEO.

Long version ↓

1 - Relume Library (IA)

With its many features ;

  • Copy/paste library of responsive components for Figma and Webflow
  • Artificial intelligence generation of sitemaps and/or wireframes
  • Copywriting generation via AI on web wireframe
  • SVG icon library
  • Chrome extension for the Webflow interface

The Relume Library is the tool that speeds up my development process the most.

💶 Price: From $38 per month

💡 It's important for you to see this price as an investment: if this tool enables you to develop 2x as many sites per year, the $38 per month will pay for itself very, very quickly.

I'll try the Relume Library →

2 - Finsweet Chrome Extension

Example of Finsweet Extension's Unbind CMS functionality

With over 80 features specially developed to enhance your workflow, Finsweet Chrome Extension is by far the best technical extension for Webflow.

Apart from the Finsweet attributes, which need no introduction, the 'Unbind CMS' feature, which disconnects a CMS collection from a set of elements, is probably my favorite.

💶 Price: Free

I'm trying the Finsweet Chrome extension →

3 - Midjourney (IA)

Generate an image of sunny Paris on Midjourney (AI)

Midjourney is an artificial intelligence that allows you to generate beautiful, unique and customizable images in just a few minutes, based on a prompt.

It's an ideal alternative for replacing empty placeholders when delivering a project (if the client's content isn't ready), or for adding a more personalized touch than the well-known and over-seen images from free image banks like Pexels or Unsplash.

💶 Price: From $8 per month

I'm learning to use Midjourney for free at Digidop Académie →

4 - ChatGPT (AI)

Do I really need to explain? 😉 The use cases for this artificial intelligence are numerous:

  • Correction of erroneous code,
  • JavaScript code generation,
  • Quick editing of custom CSS code,
  • Copywriting for the customer's website (e.g. Titles and Meta Tags, replacement of Lorem Ipsum, etc.).

💶 Price: Free

I try ChatGPT →

5 - Figma

Example of a Figma layout for an artistic website

Figma is a powerful design tool that is both intuitive and collaborative. It's a no-code tool that every Webflow developer needs to master, in order to :

  • Create SVG shapes to integrate into site development,
  • Crop visuals for integration into a specific project or layout,
  • Interact with customers or designers in charge of the project (tests & iterations, feedback, questions, etc.) from a single interface,

and many other applications...

💶 Price: Free

Get free Figma training at Digidop Académie →

6 - Squoosh.app

Example of use of Squoosh image converter

Squoosh is a simple, intuitive tool developed by Google that lets you resize and compress your images in a variety of formats: WebP, MozJpeg and more. Simply drag and drop your visuals and choose the transformations you wish to apply in the functionality panel.

This is a real plus, for integrating images into your Webflow site according to best practices. This ensures fast loading of the entire site once it's online.

Bonus: You can manage the level of quality and compression, to keep the rendering sharp.

💶 Price: Free

I try Squoosh.app →

7 - Detailed SEO extension

Example of use of the chrome detailed SEO extension on the Webflow agency site Digidop

This free Chrome extension allows you to audit, in just a few clicks and from a single interface, whether your site's pages comply with SEO best practices once they've been put online (also works on the webflow.io version):

  • Title Tag SEO
  • Meta Tag SEO
  • Alt Text
  • Heading structure (H1, H2, H3, etc.)
  • Structured data
  • Etc...

💶 Price: Free

I try Detailed SEO extension for free →

🎁 Bonus - The Webflow developer T-shirt

Webflow builder T-shirt worn on the beach by Florian Bodelot

The Webflow Builder T-shirt is the essential piece of equipment for any good Webflow developer. With its various features :

  • 100% cotton
  • 240 g
  • Oversize
  • Identity flocking

Wearing this t-shirt puts you in ideal conditions for creating websites with the no-code Webflow tool 💜

I'm buying my Webflow Builder t-shirt →

Want to learn more about using no-code tools?

Discover a variety of free resources about Webflow, Webdesign and no-code in general at :

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop