Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

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

Thomas Labonne
Thomas Labonne
March 23, 2022
logo relume figma et webflow avec des composants figma client first sur fond noir

Tables des matières

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

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions