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

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.

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"

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.

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