Installer une librairie de composant dans un projet Webflow

Lors de la Webflow Conf' 2022, une des principales mises à jour a été l'ajout natif des librairies de composant dans Webflow.

Nous connaissions le Made In Webflow pour copier des composants d'autres projets ou encore la Relume Library où nous pouvons insérer dans notre projet différents types de composants (navbar, footer, hero, form, etc.) pour notre site web. Avec cette nouvelle fonctionnalité, Webflow met la barre encore plus haut. Nous pouvons directement depuis le Designer de Webflow, insérer des composants créés et mis à disposition par et pour la communauté ! Une démonstration de force, du pouvoir de la communauté Webflow.

Voici maintenant un résumé des étapes à suivre pour pouvoir utiliser des composants de la communauté depuis le Designer de Webflow.

Insérer des librairies dans un projet

Étape 1 : Créer un projet dans Webflow

Avant toute chose, il est recommandé d'avoir un projet déjà existant avant de vouloir ajouter des librairies dans son projet.

Les librairies sont propres à chaque projet.

Je peux ajouter dans un projet certaines librairies et dans un autre projet d'autres et ainsi de suite.

Si vous n'avez pas encore de projet, nous vous conseillons de cloner le projet Client-First pour développer des landings, des applications web ou des sites web optimisés pour le SEO et l'accessibilité web.

Découvrir la méthode Client-First de Finsweet.

Étape 2 : Ouvrir la marketplace des librairies

Une fois que votre projet est créé, vous devrez vous rendre dans le nouvel espace créé par Webflow (la nouvelle version), accessible depuis le Dashboard de chaque utilisateur ou autre depuis une autre page de l'outil. Dans le menu déroulant "Marketplace", il faudra cliquer sur "Librairies".

Voici le lien direct vers les librairies de composants Webflow.

Étape 3 : Choisir une librairie à installer

Une fois dans cet espace, vous verrez qu'il existe déjà plus une dizaine de bibliothèques existantes (Accessible components de Finsweet, Flow Library de Flow Ninja, Relume Library Lite de Relume, FlowUI Component Library de Flowbase, etc.).

Choisissez celle qui vous intéresse (vous pouvez voir le nombre de composants présents dans la bibliothèque en bas à gauche des cartes) en cliquant dessus.

Prenons l'exemple de Conversion Flow Library de Conversion Flow.

Étape 4 : Installer la bibliothèque de composants

Après avoir cliqué sur la librairie que vous souhaitez ajouter à votre projet, un peu à la manière des projets du Made In Webflow, vous avez une description et un lien pour ouvrir le projet en live.

Pour installer les composants de cette bibliothèque, il faudra tout simplement cliquer sur le bouton "Install library — Free". A l'heure actuelle, toutes les bibliothèques sont gratuites (elles sont pout tout type de public), mais à l'avenir (comme pour les templates), vous serez peut-être amené à devoir payer.

Étape 5 : Choisir un projet Webflow

Lorsque vous cliquez sur le bouton d'installation, un pop-up s'ouvre pour vous demander sur quel projet vous souhaitez installer la librairie. Vous pouvez sélectionner autant de projet que vous souhaitez dans un workspace spécifique.

Si vous souhaitez partir d'un projet vierge, vous pouvez cliquer sur "Create site and install library".

Sinon sélectionnez vos projets et cliquez sur "Install".

Étape 6 : Utiliser des composants

Si vous installez une bibliothèque sur plusieurs projets, un message de validation apparaîtra rapidement sinon vous serez directement redirigé dans le projet en question.

Pour utiliser les composants, il faudra se rendre dans le Designer de votre projet, puis :

• Cliquer sur le bouton "Add Element" (ou raccourci clavier A)
• Sélectionner l'onglet "Layout" plutôt que "Elements"
• Choisir une bibliothèque
• Glisser et déposer (drag and drop : Eh oui c'est du No Code !) un component sur votre page
• Modifier le composant / les éléments et les adapter à votre design

Rien de plus simple !

Attention, les composants que vous utiliserez n'utilisent pas forcément les mêmes conventions de nomination des classes ou de structure que vous. Veillez bien à personnaliser ces composants pour avoir un projet propre et optimisé (Plus besoin de développer ou presque).

Pour avoir un site Webflow optimisé, vous pouvez lire la documentation Client-First en version française.

Contribuer à l'ajout de nouvelles librairies Webflow

Les bibliothèques de composants sont un vrai plus dans Webflow, un vrai gain de temps dans le développement. On retrouve cette notion de partage pour aider la communauté. Il faut savoir que vous pouvez également tenter votre chance pour proposer votre bibliothèque de composant dans cette marketplace et gagner en visibilité.

Pour ce faire, vous pouvez remplir le formulaire pour rejoindre la liste d'attente des créateurs de librairie de composant.

Voilà pour ce petit tutoriel pour pouvoir utiliser les ressources de la communauté pour ses projets et développer plus rapidement. Si vous souhaitez découvrir les autres fonctionnalités de Webflow, je vous invite à lire notre article sur les annonces du premier jour de la Webflow Conf' 2022 !