Les 7 meilleurs outils du développeur Webflow (No-code, IA, SEO, ...)

Il existe des centaines d'outils no-code, mais en tant que développeur Webflow, si je ne devais choisir que 7 outils pour ma stack en 2024, ce seraient les suivants :

Short version ↓

Relume Library (IA) : Accélération de votre processus de développement
Finsweet Chrome Extension : +80 fonctionnalités tech spécialement conçues pour repousser les limites de Webflow.
Midjourney (IA) : Utilisation de l'IA pour générer des images comme alternative aux banques d'images traditionnelles.
ChatGPT (IA) : Ai-je vraiment besoin d'expliquer ? 😉
Figma : L'outil parfait pour allier design et collaboration.
Squoosh.app : Outil gratuit et efficace pour reformater vos images.
Detailed SEO extension : Un outil utile et tout-en-un qui permet d'auditer facilement le SEO d'un site.

Long version ↓

1 — Relume Library (IA)

Avec ses nombreuses fonctionnalités ;

Bibliothèque de composants responsives à copier/coller pour Figma et Webflow
Génération de sitemaps et/ou de wireframes via l'intelligence artificielle
Génération de copywriting via IA sur wireframe web
Bibliothèque d'icônes SVG
Extension Chrome pour l'interface Webflow

La Relume Library est l'outil qui accélère le plus considérablement mon processus de développement.

💶 Prix : À partir de 38$ par mois

💡 Il est important pour vous de voir ce prix comme un investissement : si cet outil vous permet de développer 2x plus de sites par an, les 38$ par mois seront très très vite rentabilisés.

J'essaie la Relume Library →

2 — Finsweet Chrome Extension

Exemple de la fonctionnalité Unbind CMS de Finsweet Extension

Avec plus de 80 fonctionnalités développées spécialement pour améliorer votre workflow, Finsweet Chrome Extension est de loin la meilleure extension technique pour Webflow.

Mise à part les attributs Finsweet, qui ne sont plus à présenter, la fonctionnalité ‘Unbind CMS’ permettant de déconnecter une collection CMS d'un ensemble d'éléments, est probablement ma fonctionnalité préférée.

💶 Prix : Gratuit

J'essaie l'extension Chrome de Finsweet →

3 — Midjourney (IA)

Génération d'une image de Paris ensoleillé sur Midjourney (IA)

Midjourney est une intelligence artificielle qui vous permet de générer de superbes images, uniques et personnalisables, en quelques minutes seulement, sur la base d'un prompt.

C'est une alternative idéale pour remplacer les placeholders vides lors de la livraison d'un projet (si le contenu du client n'est pas prêt) ou pour ajouter une touche plus personnalisée que les images bien connues et beaucoup trop vues des banques d'images gratuites comme Pexels ou Unsplash.

💶 Prix : À partir de 8$ par mois

J'apprends à utiliser Midjourney gratuitement sur la Digidop Académie →

4 — ChatGPT (IA)

Ai-je vraiment besoin d'expliquer ? 😉 Les cas d'utilisation de cette intelligence artificielle sont nombreux :

Correction de code erroné,
Génération de code JavaScript,
Édition rapide de code CSS personnalisé,
Copywriting pour le site internet du client (Ex : Titles et Meta Tags, remplacement de Lorem Ipsum, etc.)

💶 Prix : Gratuit

J'essaie ChatGPT →

5 — Figma

Exemple d'une maquette Figma pour un site web artistique

Figma est un puissant outil de design à la fois intuitif et collaboratif. C'est un outil no-code indispensable à maîtriser pour tout développeur Webflow, afin de :

Créer des formes en SVG à intégrer dans le développement de son site,
Recadrer des visuels à intégrer dans un projet ou layout spécifique,
Échanger avec les clients ou les designers en charge du projet (Test & itérations, feedbacks, questions ?) depuis une interface unique,

et dans bien d'autres cas d'utilisation...

💶 Prix : Gratuit

Je me forme gratuitement à Figma avec la Digidop Académie →

6 — Squoosh.app

Exemple d'utilisation du convertisseur d'image Squoosh

Squoosh est un outil simple et intuitif, développé par Google, qui vous permet de redimensionner et de compresser vos images dans différents formats : WebP, MozJpeg, etc. Il suffit de glisser-déposer vos visuels et de choisir les transformations que vous souhaitez leur apporter dans le panneau de fonctionnalités.

C'est un véritable plus, pour intégrer les images dans votre site Webflow en suivant les meilleures pratiques. Cela permet d'assurer un chargement rapide de l'ensemble du site une fois mis en ligne.

Bonus : Vous pouvez gérer le niveau de qualité et de compression, afin de conserver un rendu net.

💶 Prix : Gratuit

J'essaie Squoosh.app →

7 — Detailed SEO extension

Exemple d'utilisation de l'extension chrome detailed SEO sur le site de l'agence Webflow Digidop

Cette extension Chrome gratuite vous permet d'auditer, en quelques clics et depuis une seule interface, le respect des bonnes pratiques SEO des pages du site une fois mises en ligne (fonctionne aussi sur la version webflow.io) :