Dekolage Academy

Relume : de Figma à Webflow méthode de développement accélérée

Rhalid Hidoun

Rhalid Hidoun

Consultant et Formateur en Marketing Digital

Relume figma à webflow developpement accelerée

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. 

Relume composants marketing ecommerce

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.

Relume Library Style Guide

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.

Relume Figma Community installation

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.

Relume template Figma

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” :

Navbar element Relume

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 :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.