Comment ajouter des icônes dans Figma

Découvrez comment ajouter des icônes dans Figma à l’aide de plugins, d’importations SVG et de bibliothèques de design. Un guide étape par étape pour améliorer vos conceptions d’interface utilisateur avec des icônes personnalisées et prédéfinies.

Créez de superbes vidéos produit et des documents avec l’IA

Ce tutoriel a été créé avec Trupeer en moins de 5 minutes

Créez gratuitement

Utilisation des plugins d’icônes :

Installer un plugin : allez dans "Plugins" dans le menu Figma,
sélectionnez "Browse all plugins...", puis recherchez le plugin d’icônes souhaité (par exemple, Iconify, Material Design Icons, Font Awesome).
Installer le plugin : cliquez sur "Install" pour l’ajouter à votre fichier Figma.
Parcourir et ajouter : lancez le plugin (clic droit -> Plugins -> [Nom du plugin]), parcourez la bibliothèque d’icônes, puis cliquez pour importer ou faites glisser et déposez l’icône sur votre canevas.
Personnaliser : tout comme les SVG importés, vous pouvez personnaliser les icônes du plugin selon vos besoins.
Exemple : utiliser Material Design Icons : ouvrez le plugin Material Design Icons, recherchez une icône (par exemple, "home"), puis cliquez pour l’ajouter à votre design.

Guide étape par étape : comment ajouter des icônes dans Figma

Étape 1

Sélectionnez l'option "Actions".

Étape 2

Dans la console de recherche, saisissez "Iconify" pour trouver le plugin nécessaire.

In the search console, enter "Iconify" to find the necessary plugin.

Étape 3

Une fois les résultats de recherche affichés, cliquez sur l'option "Iconify".

After the search results appear, click on the "Iconify" option.

Étape 4

Puis sélectionnez l'icône,

Étape 5

Cliquez sur l'option "Importer en tant que composant".

Click the "Import as a component" option.

Étape 6

Vous verrez maintenant l'icône ajoutée à votre frame. Ajustez l'icône si nécessaire pour répondre aux spécifications de votre projet.

You will now see the icon added to your frame. Adjust the icon as necessary to meet your project specifications.

Conseils de pro pour ajouter des icônes dans Figma

Utiliser les plugins d'icônes intégrés
Figma propose plusieurs plugins gratuits comme “Iconify”, “Feather Icons” et “Material Design Icons”. Pour les utiliser, allez dans la barre de menu, cliquez sur “Resources”, sélectionnez l'onglet “Plugins” et recherchez le plugin d'icônes souhaité. Une fois installé, vous pouvez glisser-déposer des icônes directement dans votre design.
Copier des icônes depuis des bibliothèques externes
Vous pouvez visiter des bibliothèques d'icônes gratuites telles que Font Awesome ou Google Material Icons, puis copier les versions SVG des icônes et les coller dans votre fichier Figma. C'est utile lorsque vous avez besoin d'icônes spécifiques à une marque ou universellement reconnues.
Importer des fichiers SVG
Si vous avez des icônes enregistrées au format SVG sur votre ordinateur, vous pouvez les importer dans Figma en les faisant simplement glisser sur le canevas. Figma conservera la qualité vectorielle et permettra un redimensionnement ainsi que des ajustements de couleur faciles.
Utiliser des composants pour garantir la cohérence
Convertissez les icônes fréquemment utilisées en composants. Ainsi, si vous devez un jour en mettre à jour une, la modification se répercutera automatiquement sur toutes les instances de votre design.
Organiser les icônes dans une bibliothèque
Créez une bibliothèque partagée de composants d'icônes pour votre équipe. Cela favorise la cohérence et fait gagner du temps en rendant les icônes couramment utilisées accessibles depuis un emplacement central.

Pièges courants et comment les éviter

Ne pas convertir en contours
Certaines icônes collées depuis des sources externes peuvent ne pas être modifiables. Cliquez avec le bouton droit sur l'icône et sélectionnez “Outline Stroke” ou “Flatten” pour les convertir en formes modifiables.
Utiliser trop de styles
Évitez de mélanger différents styles d'icônes (par ex. rempli, contour, bichrome) dans un même design. Conservez un seul style tout au long du projet pour une cohérence visuelle.
Importer des images de faible qualité
Utilisez toujours des formats SVG ou vectoriels plutôt que des PNG ou JPG afin de conserver la netteté quelle que soit la taille.
Redimensionner sans maintenir Maj
Lorsque vous redimensionnez des icônes, maintenez la touche Maj pour conserver les proportions et éviter les déformations.
Oublier de nommer les calques
Nommez toujours clairement vos calques ou composants d'icônes. Cela aide à l'organisation et facilite la recherche, surtout dans les fichiers de design volumineux.

Questions fréquentes courantes sur l’ajout d’icônes dans Figma

Puis-je personnaliser la couleur des icônes dans Figma ?
Oui, si l’icône est un vecteur (SVG), vous pouvez facilement modifier sa couleur de remplissage et de contour dans le panneau des propriétés à droite.
Les plugins coûtent-ils de l’argent ?
La plupart des plugins d’icônes comme Iconify sont gratuits. Certains plugins avancés peuvent proposer des fonctionnalités payantes, mais les bibliothèques d’icônes de base sont généralement accessibles gratuitement.
Puis-je utiliser mes propres icônes personnalisées ?
Oui, vous pouvez importer vos propres créations d’icônes dans Figma en les téléversant ou en les faisant glisser dans votre fichier.
Comment maintenir la cohérence des icônes dans un projet ?
Utilisez des composants et des styles. Créez un système de design où toutes les icônes reposent sur les mêmes règles de taille, de poids et de couleur.
Puis-je animer des icônes dans Figma ?
Vous pouvez appliquer des transitions de base à l’aide des fonctionnalités de prototypage de Figma, mais pour des animations avancées, vous pourriez avoir besoin d’outils comme Figmotion ou d’exporter les icônes pour les utiliser dans des applications externes.
Comment enregistrer l’écran sur Mac ?
Pour enregistrer l’écran sur un Mac, vous pouvez utiliser Trupeer AI. Il vous permet de capturer l’intégralité de l’écran et offre des fonctionnalités d’IA telles que l’ajout d’avatars IA, l’ajout d’une voix off, et le zoom avant et arrière dans la vidéo. Grâce à la fonction de traduction vidéo par IA de Trupeer, vous pouvez traduire la vidéo dans plus de 30 langues.
Comment ajouter un avatar IA à un enregistrement d’écran ?
Pour ajouter un avatar IA à un enregistrement d’écran, vous devrez utiliser un outil d’enregistrement d’écran IA. Trupeer AI est un outil d’enregistrement d’écran IA, qui vous aide à créer des vidéos avec plusieurs avatars et vous aide également à créer votre propre avatar pour la vidéo.
Comment enregistrer l’écran sur Windows ?
Pour enregistrer l’écran sur Windows, vous pouvez utiliser la Game Bar intégrée (Windows + G) ou un outil IA avancé comme Trupeer AI pour des fonctionnalités plus avancées telles que des avatars IA, une voix off, la traduction, etc.
Comment ajouter une voix off à une vidéo ?
Pour ajouter une voix off aux vidéos, téléchargez l’extension Chrome trupeer ai. Une fois inscrit, téléversez votre vidéo avec voix, choisissez la voix off souhaitée sur Trupeer et exportez votre vidéo modifiée.
Comment zoomer dans un enregistrement d’écran ?
Pour zoomer pendant un enregistrement d’écran, utilisez les effets de zoom dans Trupeer AI, qui vous permettent de zoomer avant et arrière à des moments précis, renforçant ainsi l’impact visuel de votre contenu vidéo.