-25% sur toutes les formations avec le code : 
Relume : désigner sur Figma et développer sur Webflow
Dans cette vidéo nous allons voir comment accélérer considérablement le process de développement de votre site internet.
L’une des pratiques intéressantes que les développeurs expérimentés utilisent est de partir d’une base de travail. On ne va pas construire son site web de 0, mais on va plutôt utiliser des ressources qui vont nous aider à travailler intelligemment.
On a déjà eu l’occasion d’en discuter dans une autre vidéo mais Figma a lancé le Community à travers lequel on va pouvoir exploiter des plugins, des widgets, des icones, des typographies, des designs web… ou encore le showcase de Webflow où va allez pouvoir cloner des sites web et les réadapter « à notre sauce » avec notre identité graphique.
Dans cette vidéo, il sera davantage question de travailler plus rapidement en désignant son site web sur Figma avec des composants déjà existants. Une fois le web design finalisé, on va pouvoir rapidement le développer sur Webflow, on va voir ça dans le détail. C’est parti !
Plan de la vidéo :
00:00 Introduction
01:50 Présentation de la bibliothèque d’éléments de Relume
02:50 Création compte Relume et installation du kit sur Figma
04:30 Création de votre web design avec la librairie d’éléments Relume
10:55 Dupliquer le Style Guide sur Webflow
12:50 Reconstituer votre site web sur Webflow
Relume Library : la bibliothèque d'éléments par excellence
Relume possède une incroyable librairie de plus de 800+ composants et ils en ajoutent régulièrement d’autres.
Parmi ces composants, on peut distinguer les composants relatifs au marketing de ceux relatifs au ecommerce.
On peut citer par exemple :
Marketing :
Ecommerce:
Création de votre compte Relume
Avant toute chose, je vous invite à vous rendre sur le site internet de Relume Library : https://library.relume.io et de créer un compte. La version d’essai est gratuite et vous permet d’utiliser l’outil pendant 7 jours.
Dupliquer le Style Guide de Relume sur Webflow
Il faudra ensuite dupliquer le Style Guide de Relume directement sur votre compte Webflow en cliquant sur “Clone Now” à la fin du processus d’inscription. Cette étape est nécessaire pour garder les éléments de style de Relume sur votre propre site web.
Installer le plugin de Relume sur Figma
Maintenant, nous allons pouvoir designer simplement notre site web en installant le plugin de Relume sur Figma.
Allez dans le Figma Community, cherchez “Relume Library” et installez le kit.
Vous allez pouvoir profiter de toute la librairie que Relume propose. Choisissez les différentes éléments qui vous intéresse dans la sidebar de gauche “Components” et designer la structure de votre site web simplement en copiant/collant les éléments dans votre plan de travail.
Reconstituer votre site web sur Webflow
Une fois votre site internet désigné sur Figma à travers les composants de Relume, il ne vous reste plus qu’à le développer sur Webflow. Pour ce faire, copier/coller tous les éléments présents utilisés sur Figma en les récupérant “développés” sur le site de Relume Library https://library.relume.io/dashboard. Cherchez le nom de l’élément utilisé sur Figma et cliquez sur le bouton “Copy”.
Par exemple pour la Navbar, le nom de l’élément correspond à “Navbar / 1” :
Renouvelez l’opération avec tous les éléments pour développer entièrement votre site web. La dernière étape sera de re-styliser les éléments avec votre propre identité graphique.
Vous voulez aller plus loin dans la prise en main de Webflow ?
Je vous propose une formation complète de 5h qui va vous permettre de devenir complètement autonome sur l’outil :
