Après des années à développer sur Webflow, j'ai testé une quinzaine d'extensions Chrome. Certaines promettent monts et merveilles mais ne tiennent pas leurs promesses, d'autres transforment littéralement votre workflow quotidien.
Aujourd'hui, je vous partage les 5 extensions que j'ai installées sur tous mes navigateurs et que j'utilise vraiment tous les jours chez Moumz. Pas de liste exhaustive ou de test superficiel : juste les outils qui ont réellement changé ma façon de travailler sur Webflow.
Ce que ça fait : Pipette universelle pour capturer n'importe quelle couleur sur n'importe quel site web.
Dans Webflow, on passe notre temps à s'inspirer d'autres sites ou à reprendre des couleurs exactes d'une maquette client. ColorZilla devient vite indispensable quand vous devez :
Mon usage concret : Quand un client me dit "je veux exactement cette nuance de bleu comme sur le site X", je n'ai plus à jouer aux devinettes. Un clic, j'ai le code hex exact, et je peux l'intégrer directement dans mon design system Webflow.
Petit plus : L'extension garde un historique de vos dernières couleurs capturées. Très pratique quand vous travaillez sur plusieurs déclinaisons d'une même palette.
Installer ColorZilla : Télécharger sur le Chrome Web Store
Ce que ça fait : Navigue directement dans la structure de vos éléments Webflow depuis la page publiée.
C'est l'extension qui m'a fait gagner le plus de temps cette année. Imaginez : vous regardez votre site publié, vous voyez un élément à modifier, et au lieu de retourner dans le Designer pour le chercher dans l'arbre des éléments, vous cliquez dessus et l'extension vous amène directement au bon endroit.
Mon usage concret : Particulièrement utile sur les sites complexes avec beaucoup de sections. Quand vous avez 50 éléments dans votre Navigator et que vous cherchez ce petit texte caché dans une section, Webflow Copilot vous fait économiser de précieuses minutes.
Installer Webflow Copilot : Télécharger sur le Chrome Web Store
💡 Conseil d'expert : Cette extension brille vraiment lors des phases de corrections clients. Fini de jouer à cache-cache avec les éléments dans l'arbre du Designer !
Ce que ça fait : Affiche les dimensions et espacements de n'importe quel élément sur une page web.
En tant que développeur Webflow, vous devez souvent reproduire fidèlement des espacements ou des dimensions depuis une maquette ou un site de référence. Dimensions vous donne les mesures exactes en pixels de tout élément sur lequel vous passez votre souris.
Mon usage concret : Indispensable lors de l'intégration de maquettes Figma. Le client vous dit "l'espacement ne correspond pas", vous vérifiez en un clic les marges réelles sur sa référence et vous ajustez au pixel près dans Webflow.
Astuce bonus : L'extension fonctionne aussi en mode responsive. Parfait pour analyser comment les sites concurrents gèrent leurs breakpoints mobiles.
Installer Dimensions : Télécharger sur le Chrome Web Store
Ce que ça fait : Révèle instantanément la police, la taille, la hauteur de ligne et le poids de n'importe quel texte.
La typographie, c'est souvent ce qui fait la différence entre un site amateur et un site professionnel. WhatFont vous permet d'analyser précisément les choix typographiques de sites que vous admirez.
Mon usage concret : Quand je vois une combinaison de polices qui fonctionne bien sur un site, je l'analyse avec WhatFont pour comprendre les proportions exactes. Taille du titre, espacement des paragraphes, poids de police... tout y est.
Pourquoi c'est crucial : Dans Webflow, bien paramétrer sa typographie dès le départ dans les styles globaux fait gagner un temps fou. WhatFont m'aide à partir sur de bonnes bases inspirées de sites qui marchent.
Installer WhatFont : Télécharger sur le Chrome Web Store
Ce que ça fait : Suite d'outils avancés directement intégrés dans le Designer Webflow pour optimiser votre workflow.
Si vous ne connaissez pas encore Finsweet Extension, vous passez à côté de l'extension la plus puissante pour Webflow. Elle ajoute une tonne de fonctionnalités directement dans votre Designer : copie d'animations, nettoyage de classes inutilisées, organisation automatique de votre Navigator...
Mon usage concret : L'outil que j'utilise le plus c'est "Clean up unused classes". Sur les gros projets, on accumule vite des dizaines de classes CSS orphelines. Finsweet Extension les détecte et les supprime en un clic. Un gain de temps énorme et un code plus propre.
Pourquoi c'est indispensable : L'extension ajoute aussi des raccourcis clavier personnalisés et des outils de duplication avancée. Une fois qu'on y a goûté, impossible de s'en passer.
Installer Finsweet Extension : Télécharger sur le Chrome Web Store
🎯 Point clé : Finsweet Extension est développée par l'équipe Finsweet, les mêmes qui créent les attributs Webflow les plus utilisés. La qualité est au rendez-vous.
En pratique, voici comment j'utilise ces 5 extensions dans mon travail quotidien :
Phase d'inspiration : ColorZilla + WhatFont pour analyser les sites de référence et constituer ma palette et ma hiérarchie typographique.
Phase d'intégration : Dimensions pour reproduire fidèlement les espacements et alignements de la maquette.
Phase de développement : Finsweet Extension pour optimiser mon code et garder un projet propre.
Phase de correction : Webflow Copilot pour naviguer rapidement dans les éléments à modifier suite aux retours clients.
Ces extensions sont toutes gratuites et s'installent en quelques secondes. Elles transforment vraiment l'expérience de développement sur Webflow en vous donnant accès à des informations précises que vous n'avez pas nativement dans le Designer.
La prochaine fois que vous vous demandez "mais comment ils ont fait cet espacement ?" ou "quelle est cette police exactement ?", vous aurez les réponses en un clic.
Quelles extensions utilisez-vous dans votre workflow Webflow ? Y a-t-il des outils indispensables que j'ai oubliés dans cette liste ?
