Webflow est un outil exceptionnel pour développer des sites web personnalisés. A contrario d'outils comme Wordpress ou Wix, Webflow ne propose pas la possibilité d'installer des plugins sur son projet. Un point différenciant qui permet d'avoir des projets optimisés et sans failles de sécurité.

Pour ajouter des fonctionnalités aux projets Webflow, certaines agences ont développé des extensions Chrome. Aujourd'hui, nous allons vous présenter 5 d'entre elles qui présentent de réels avantages pour optimiser son temps de développement.

1. Finsweet Extension for Webflow

L'extension Finsweet permet d'avoir des fonctionnalités en plus bien sympathique dans son Webflow.

On y retrouve les bonus "candies" :

• Redirections 301 en gros
• Supprimer des breakpoints
• Réorganiser les couleurs
• Insérer une bannière de cookies
• Réorganiser les styles CSS (pour le principe de spécificité CSS)
• Ajouter du custom code globale sans aller dans les paramètres généraux du projet
• Réorganiser les interactions
• Fusionner des combo class pour n'en créer qu'une
• Avoir accès directement à l'historique des pages
• Supprimer des classes
• Supprimer des styles
• Déconnecter le CMS d'une page ou section
• Redimensionner son projet webflow verticalement

On a aussi beaucoup de fonctionnalité pour Client-First :

• Ajouter la structure de base sur une page
• Ajouter le système d'espacement
• Générer un responsive fluide pour notre projet
• Accéder au système des dossiers (Folders) de la V2
• Calculateur de pixel en REM
• Convertisseur de PX en REM

Nous avons également accès à tous les scripts des attributes pour les intégrer en 2 clics sur notre projet. On retrouve enfin des liens utiles vers les documentations de l'agence Webflow et les dernières modifications.

2. Relume Chrome Extension for Webflow

L'extension de Relume pour Webflow peut paraître simple, mais elle reste néanmoins très utile. La Relume Library est devenue une référence pour développer des projets plus rapidement en évitant les tâches répétitives.

Cependant, sans l'extension lorsque vous copiez-collez un élément de cette bibliothèque de composant, il se peut que certaines classes se dupliquent. Un composant qui comporte un bouton peut voir celui-ci avoir une classe "button 2" par exemple. Pour éviter cela, Relume a sorti une extension, qui nous permet d'activer le "Sync Mode".

Ce mode de synchronisation permet aux éléments que vous copiez de prendre les styles que vous avez déjà créés dans votre projet. Ainsi, nous n'avons plus le problème d'avoir des "button 2".

3. Flowbase Chrome Extension

L'extension Webflow de Flowbase apporte elle aussi des fonctionnalités intéressantes pour développer plus efficacement.

Nous retrouvons à l'intérieur de notre Designer :

• une bibliothèque de composants
• une bibliothèque d'icons
• Gestionnaire de raccourci clavier
• La possibilité de réorganiser ses couleurs
• La possibilité d'importer des couleurs depuis un fichier JSON (Importer ses couleurs de Figma vers Webflow)

4. AI Alt Text for Webflow by Web Bae

L'extension AI Alt Text de Web Bae est une petite pépite pour optimiser son projet Webflow en matière de SEO et d'accessibilité web.

Comme son nom l'indique, cette extension permet de générer automatiquement (grâce à l'intelligence artificielle) des textes alternatifs à nos images dans le Designer. L'outil fonctionne parfaitement pour les png, webp, jpeg, mais pas encore pour les SVG. Votre site web sera grâce à cette extension SEO-friendly.

Voici un tutoriel YouTube pour vous expliquer comment utiliser l'outil :

5. GPT-3 Meta Descriptions

Les intelligences artificielles sont très tendances aujourd'hui. Leur utilisation permet d'améliorer notre productivité. Ces derniers temps, ChatGPT fait du bruit. L'extension Webflow GPT-3 Meta description utilise l'IA pour générer des title et meta-description SEO automatiquement.

Il vous suffit de vous rendre dans les paramètres de votre page, cliquer sur generate Title (ou Meta), d'ajouter vos mots-clés et une description de votre page pour que l'outil vous propose un titre ou une description optimisée pour le référencement naturel.

Un beau gain de temps, même si nous vous conseillons quand même de bien vérifier ce que l'outil vous propose !

Voilà pour cette liste d'extensions utiles pour Webflow ! Avec l'annonce lors de la Webflow Conf' 2022 des apps dans Webflow, est-ce que nous allons voir des outils similaires directement intégrés à nos projets ? Le futur nous le dira !