Figma - Les plug-ins à connaître

Dans cette quête, tu vas découvrir quelques plug-ins inhérents à Figma, qui pourront t'aider à gagner du temps dans la conception de tes maquettes et produits.

---

🤓 À la fin de cette quête tu sauras :

✅ Ce qu'est un plug-in ✅ Comment ajouter un ou plusieurs plug-ins à ton projet ✅ Quels sont les plug-ins à connaitre afin de t'aider dans la conception quotidienne de tes maquettes

---

Qu'est-ce qu'un plug-in?

Les plug-ins sont des fonctionnalités que nous allons pouvoir ajouter à nos projets. Ce sont des éléments qui ont été créé par d'autres contributeurs de la communauté Figma, et qui auront pour but de nous faire gagner du temps dans la conception de nos maquettes.

Il est par exemple possible d'utiliser des plug-ins d'icônes, mais aussi des plug-ins de texte qui vont remplir automatiquement nos blocs de textes, etc...

Tu verras qu'en fonction de tes besoins, de nombreuses possibilités s'offrent à toi, toujours dans un but de gain de temps.

---

Accéder aux plug-ins

Les plug-ins te seront accessibles lorsque tu seras en train de travailler un projet. Il est possible d'y accéder par deux moyens.

• Via le menu Figma, en haut à gauche de ton espace de travail.

• Depuis la barre flottante centrale dans ton fichier Figma, sur le bouton des actions :

• Via l'accueil, il t'es possible d'accéder à une liste de plug-ins beaucoup étendue en passant par Browse in Community.

---

Interface de la communauté Figma

Cette interface va te permettre de parcourir les différentes sections relatives au maquettage et au protypage. Tu retrouveras plusieurs grandes catégories mises en avant, qui pourront t'aiguiller dans le choix de tes plug-ins.

Si tu sais déjà quel type de plug-ins tu souhaites ajouter à ton projet, tu peux directement passer par la barre de recherche afin d'y renseigner avec des mots clés les plug-ins que tu souhaites cibler.

---

Utiliser un plug-in dans un projet

Lorsque ton choix s'est arrêté sur un plug-in, il te sera possible de l'essayer.

Enregistrement d'un plug-in

Pour ce faire, il te suffit de cliquer sur le bouton Try in.... Ce dernier va ouvrir dans un nouvel onglet un nouveau projet Figma, dans lequel tu pourras commencer à faire tes premières expérimentations.

Si tu souhaites que ce plug-in soit utilisable dans n'importe quel projet de ton compte, il t'es possible de repasser par la barre flottante centrale :

Choisis le plug-in que tu souhaites sauvegarder pour un ou plusieurs projets, en cliquant directement sur le bouton "save" à côté du bouton de lancement.

Utilisation dans un projet

Maintenant, choisis le projet de ton choix, et passe par le menu des plug-ins dans ta barre supérieure.

Tu constateras que par défaut, ce sont les derniers plug-ins que tu as utilisé qui s'afficheront, en plus de suggestions de la part de Figma.

---

Quelques plug-ins indispensables à connaitre

Content Reel

Content reel est un plug-in permettant de générer rapidement de la donnée : images d'avatars, noms d'utilisateurs, numéros de téléphone... Ce plug-in est très complet et te permettra par ailleurs de créer des types de données spécifiques pour tes maquettes, en lien avec certaines spécificités d'un pays ou d'une localité par exemple.

Unsplash

Tu es probablement familier des sites d'images libres de droit comme Unsplash. Afin de gagner du temps et utiliser des images directement dans ton interface sans passer par le site, tu peux donc utiliser le plug-in d'Unsplash pleinement prévu à cet effet.

Remove BG

Remove BG peut-être intéressant pour retirer le fond d'une image de manière rapide, sans passer par un logiciel de retouche, comme Photoshop.

Lottiefiles

Avec quelques lignes de code, le plug-in LottieFiles te permettra de réaliser plusieurs petits types d'animations. La bibliothèque comporte au moins 1000 animations gratuites, des animations de haute qualité en SVG, mais également des gifs. Tu pourras utiliser ce plug-in lorsque tu auras commencé à apprendre quelques bases de code.

Map Maker

Si tu souhaites intégrer des cartes sans pour autant utiliser des captures d'écran, le plug-in Map Maker te sera d'une grande aide.

Stark

Stark est un plug-in puissant qui te sera utile pour toutes les problématiques liées à l'accessibilité (lisbilité, contrastes...)

---

☝️Résumé

• Tu as vu dans cette quête que les plug-ins avaient des fonctionnalités que nous pouvions ajouter à nos projets, dans une question de gain de temps.

• Grâce à la communauté Figma, de nombreux éditeurs et contributeurs partagent des éléments réutilisables, dans le but que certains processus de création soient automatisés et évitent aux webdesigners et ui designers de concevoir tous les éléments de leurs maquettes, notamment lorsqu'il s'agit d'icônes simples, d'images d'illustration, etc...

• Tu as également eu un aperçu de certains plug-ins de base, qui sont couramment utilisés.

En fonction de tes besoins et de tes envies, il te sera toujours possible de chercher des plug-ins avec des fonctionnalités peut-être plus spécifiques.