Badge Webflow Award Winner 2023

Créer une maquette Figma Client First avec la Relume Library

Publié le 
23/3/2022
Modifié le 
27/3/2023
Temps de lecture : 5 min
logo relume figma et webflow avec des composants figma client first sur fond noir
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

Développez Client First dans Figma grâce à la Relume Library ! Le kit Relume vous met à disposition des dixaines de components que vous pourrez réutiliser dans vos maquettes web Figma. Dans cet article nous vous expliquons comment ajouter le kit Relume pour tous vos prochains projets Figma.

Points clés à retenir

La Relume Library, lancée par l’agence Webflow Relume, propose de nombreux modèles préconçus pour vous aider à construire votre maquette Figma et site Webflow avec la méthode Client First. Plus de 750 components, modèles, développés avec la méthode Client First de Finsweet, que vous pourrez réutiliser dans vos maquettes Figma et vos projets Webflow. Un gain de temps énorme pour les webdesigner !

  • Navbars
  • Hero Headers
  • Headers
  • Features
  • Careers
  • Gallery
  • Contact
  • FAQ
  • Pricing
  • Testimonials
  • Logos
  • Team
  • CTA
  • Blog Headers
  • Blog Sections
  • Blog Posts
  • Footer

L'idée est donc de pouvoir facilement réutiliser chacun de ces composant sur vos futures maquettes. Pour ne pas avoir à faire des copier / coller d'un onglet Figma à l'autre, nous vous montrons dans cet article comme utiliser la fonctionnalité Team Library de Figma. Cette librairie regroupe l'ensemble des components Figma que vous et votre équipe vous partagez. Vous pourrez ainsi facilement y accéder depuis votre maquette Figma, en faisant de simples drag and drop.

3 étapes pour commencer à développer Client First dans Figma 👇

Etape 1. Dupliquer le kit Figma Relume

Connectez-vous à votre compte Figma, et allez sur le Relume Library Figma Kit. Cliquez ensuite sur “Duplicate” pour copier tout le kit dans vos fichier Figma. Le kit va ainsi s'ajouter à tous vos projets Figma, et vous pourrez accéder à tous les components.

image du kit relume client first sur figma
Kit Relume Client First Figma

Etape 2. Partager le kit Relume dans votre Team library

Maintenant que vous avez accès au kit Relume, vous allez pouvoir l'ajouter à votre Team Library. 3 étapes à suivre :

  1. Ouvrez le projet Figma et allez dans vos “Assets”.
  2. En haut à droite, cliquez sur le l’icone livre pour ouvrir votre librairie Figma.
  3. Votre librairie figma s'ouvre avec le "Relume Library Figma Kit". Cliquez sur "Publish"
Etapes d'ajout d'un kit dans Figma
Partager le kit Relume sur Figma

Etape 3. Ajouter le kit Relume Client First à un projet Figma

Le kit Relume Client First est partagé avec toutes vos équipes et projets Figma, mais une dernière étape est nécessaire pour pouvoir l'utiliser : ajouter le kit à chaque nouveaux projets. Par défaut, les composants de votre librairie Figma ne sont pas activés sur vos nouveaux projets. Vous devrez donc les ajouter à chaque fois que vous en avez besoin. 

  1. Ouvrez le projet Figma et allez dans vos “Assets”.
  2. En haut à droite, cliquez sur le l’icone livre pour ouvrir votre librairie Figma.
  3. Votre librairie figma s'ouvre et vous devrez cocher le toggle / bouton, pour activer le kit Relume sur votre projet.
étape d'ajout du kit relume client first dans un projet figma
Ajouter le kit Relume à un projet

Etape 3. Utiliser les components Relume Client First sur Figma

Votre kit Relume Client First est ajouté à votre projet Figma, vous n'avez plus qu'à l'utiliser. A chaque fois que vous voudrez ajouter un component Relume à votre maquette web, vous devrez

  1. vous rendre dans vos "Assets",
  2. ouvrir la section qui vous intéresse,
  3. glisser déposer les éléments que vous souhaitez utiliser
image d'ajout d'un component de la relume library dans figma
Glisser déposer des éléments Relume dans Figma
projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop