Les icônes Figma ne changent pas de couleur ! Guide de résolution des problèmes de changement d'instance de composant

Lorsqu'on répartit la création d'éléments de design dans Figma entre plusieurs personnes, on peut rencontrer des problèmes inattendus. Avez-vous déjà eu du mal à faire changer la couleur d'une icône transformée en composant ?

Cet article explique de manière claire le problème « la couleur de l'instance d'icône ne se met pas à jour », rencontré par de nombreux utilisateurs de Figma, ainsi que ses causes et ses solutions.

Mon senpai a transformé en composant le bouton que j'avais créé ! En plus, on peut changer l'icône ! Super ! Mais il manque encore des icônes, alors je vais en enregistrer davantage comme composants pour en faire un composant plus pratique à utiliser !

J'ai créé des icônes sans relâche.

Tiens ? Le composant icône ne change pas correctement... Je fais exactement comme le senpai, pourtant... Pourquoi la couleur ne change-t-elle pas ?

C'est simple, c'est la façon dont tu as créé tes icônes qui pose problème !

Senpai ! Comment faire pour que la couleur change ?

Hmm, très bien ! Je vais te révéler le secret pour changer les icônes dans Figma. Note-le bien et grave-le dans ta mémoire !

Oui ! Je vais m'appliquer à bien retenir cela !

Pourquoi la couleur est-elle conservée ? Le fonctionnement des surcharges dans Figma

Lorsqu'on crée un bouton dans Figma, il est fréquent de configurer la partie icône pour qu'elle puisse être remplacée via une propriété d'instance. Pourtant, lors du changement d'icône, il arrive assez souvent que la couleur définie ne soit pas appliquée, ou qu'elle change d'elle-même.

Avez-vous déjà rencontré le problème suivant dans Figma : lorsqu'on remplace une icône, la couleur définie n'est pas appliquée ou ne change pas ? Cet article présente clairement les causes de ce problème ainsi que les solutions possibles.

Pour que la couleur change correctement lors du remplacement d'une icône, vérifiez attentivement les réglages de l'icône elle-même ainsi que ceux du bouton.

Examiner d'abord la structure du composant bouton

Commençons par examiner la situation dans laquelle la couleur est surchargée, avec la structure suivante.

1. Le composant icône d'origine est noir

2. Une instance copiée dans le bouton, dont seule la couleur est surchargée

3. Dans cet état, lorsqu'on remplace par une autre icône, la couleur de l'icône peut revenir à la couleur par défaut au lieu du blanc

tips : comprendre la relation entre le composant principal et les surcharges

La précaution la plus fondamentale est la suivante : une propriété surchargée ne reflète plus les modifications apportées au composant principal.

Partie surchargée : lorsque vous modifiez la couleur ou le texte d'une instance, cette partie devient indépendante. Si vous modifiez ensuite la même partie du composant principal, cette modification ne s'appliquera pas à cette instance. Les éléments surchargés (couleur de remplissage ou de contour, texte, etc.) sont prioritaires.

Partie non surchargée : les propriétés que vous n'avez pas modifiées (par exemple padding ou margin) reprennent directement les modifications apportées au composant principal.

Il faut être particulièrement vigilant lorsque vous modifiez la structure des calques du composant principal. Si vous renommez un calque ou si vous supprimez un calque pour en ajouter un nouveau, Figma peut le considérer comme un élément différent, et les surcharges de l'instance risquent alors d'être réinitialisées.

Partons de ces éléments pour identifier pourquoi la couleur de l'icône ne change pas.

Cause 1 : les réglages « Remplissage (Fill) » et « Contour (Stroke) » sont mélangés

Même si deux icônes ont le même aspect, « Remplissage (Fill) » et « Contour (Stroke) » sont traités dans Figma comme des propriétés totalement distinctes. Par conséquent, si vous passez d'une icône réalisée avec un remplissage à une icône dessinée avec l'épaisseur d'un contour, la surcharge de couleur peut ne pas s'appliquer correctement.

Exemple :

Icône A

Icône B

Icône A : icône contournée construite à partir de formes pleines (Fill)
Icône B : icône dont le contour est tracé avec des traits (Stroke)

Ainsi, lorsque la manière de dessiner les icônes diffère, le résultat des couleurs appliquées change également. Il est donc essentiel d'uniformiser la méthode de représentation. Lorsque l'on clique sur l'icône B, le Fill est défini en blanc, mais ce composant d'icône n'est construit qu'à partir de traits, de sorte que la couleur ne se remplace pas. En réalité, le blanc est bien appliqué à la partie pleine (comme il n'existe aucun élément plein, le blanc n'a nulle part où aller...).

✅ Solution :
adoptez la règle selon laquelle toutes les icônes sont créées en « pleine » forme. Les icônes dessinées avec des traits doivent impérativement être contournées (vectorisées via command + shift + O) pour être converties en objets pleins. Cela facilite également leur manipulation lors de l'implémentation.

Chez nous, lors de l'implémentation, nous insérons le path SVG dans une variable CSS ou intégrons les icônes avec Astro Icon. Nous uniformisons donc tout en formes pleines.

Si l'icône reste en trait (Stroke), l'épaisseur du trait change lorsqu'on l'agrandit ou la réduit, ce qui peut altérer le design. Sauf raison particulière, le mieux est de la contourner et d'uniformiser en formes pleines !

Lorsqu'une icône est construite uniquement à partir de traits, la taille du trait reste inchangée lors d'un redimensionnement. Pour des chemins simples, comme une flèche, cela pose peu de problème, mais pour des icônes complexes, le rendu peut être écrasé à 12px ou trop étiré à 80px, ce qui donne souvent un design déséquilibré.

Une icône construite avec des traits ne conserve pas l'épaisseur de son trait lors d'un redimensionnement ; la meilleure solution est donc de la contourner. Si vous souhaitez conserver la version non contournée, placez le fichier source à proximité du composant.

Même lorsqu'un élément construit avec des traits (Stroke) est fusionné, il devient une forme pleine (Fill), mais des défauts apparaissent souvent, comme une partie qui ne change pas de taille.

Cause 2 : les noms de calques ne correspondent pas

Dans Figma, lors du changement d'instance d'un composant, les styles et propriétés sont repris par les éléments portant le même nom de calque.

Exemple :

Icône A

Icône B

Nom du calque vectoriel de l'icône A : Vector
Nom du calque vectoriel de l'icône B : Vector2

Lorsque les noms de calques diffèrent ainsi, Figma considère qu'il s'agit d'« éléments distincts » et les styles remplacés ne s'appliquent pas correctement.

✅ Solution : uniformiser le nom des calques utilisés dans les icônes (par exemple, tous nommés Vector)

Pour commencer, donnez le même nom à tous les tracés auxquels vous souhaitez appliquer une couleur !

Cause 3 : la structure des calques (hiérarchie) est différente

Même après avoir uniformisé les noms de calques, le changement ne fonctionne parfois pas correctement. Dans ce cas, la différence de structure des calques peut en être la cause. Si l'instance d'origine et l'instance de destination ont un nombre ou une structure de calques différents, les propriétés risquent de ne pas être correctement mises en correspondance. Toutefois, si les noms de calques sont identiques, de légères différences de hiérarchie ne posent generally pas de problème dans certains cas.

Exemple :

Icône A

Icône B

Icône C

L'icône A est convertie en contours et regroupée en un seul vecteur (path) (icône de base).
L'icône B a la structure « Flame (Flame) > Vector (path) » → OK (la couleur est héritée par le nom de chemin « Vector »).
L'icône C a la structure « Vector (Flame) > Flame (path) » → NG (le changement de couleur défini sur le calque nommé « Vector » apparaît).

Ainsi, lorsqu'un calque nommé « Vector » contient un groupe imbriqué, il faut veiller à la manière dont les styles sont appliqués. De plus, même avec le même nom, la couleur ne change qu'au niveau le plus élevé (voir icône C) : la couleur n'est pas reportée au « Vector » du second niveau.

✅ Solution : en concevant la structure des chemins de manière à ce que les styles soient réellement appliqués de façon cohérente, on évite plus facilement les problèmes.

Si les noms des vecteurs correspondent, une légère différence de structure ne pose généralement pas de problème. Cependant, dans un développement en équipe, il est préférable d'uniformiser autant que possible la structure interne, afin de faciliter la tâche des personnes qui rejoignent le projet plus tard.

Cause 4 : le composant d'origine et le nombre de « Fills » ou de « Strokes » diffèrent

Pour une seule couleur, il n'y a pas de souci à fusionner les calques ou à uniformiser la structure et les noms des calques. En revanche, lorsqu'on passe à une icône dont le nombre de « Fills » ou de « Strokes » diffère du composant d'origine, il arrive que seules certaines couleurs changent tandis que d'autres restent inchangées, ce qui peut donner un résultat non conforme. En règle générale, il est recommandé d'utiliser des icônes monochromes. Si deux couleurs sont nécessaires, il faut prévoir une solution spécifique, par exemple en créant séparément une variable d'icône dédiée aux icônes bicolores.

✅ Solution :

Ne pas mélanger les icônes monochromes et multicolores.
Si vous avez besoin d'icônes multicolores, dupliquez le composant d'icône avec une variable et créez-en une version pour les icônes à deux couleurs.
Lorsque vous utilisez des icônes multicolores, il est en principe déconseillé de recourir à la substitution de couleur.

Attention : lorsque vous remplacez une icône monochrome, vous ne pouvez modifier qu'une seule couleur !

Cause 5 : effets des modes de fusion et des masques

Si une icône utilise un masque ou un mode de fusion spécial (comme le mode Multiplier), modifier la couleur peut ne produire aucun changement visible.

✅ Solution :
si vous utilisez un masque ou un mode de fusion, combinez ou aplatissez (Flatten) les objets pour les convertir en simples objets de tracé identiques à l'apparence visible, puis créez le composant.

Dans ce cas également, il est préférable de convertir le tracé final en contours simples. Si vous utilisez le mode Multiplier, un tracé obtenu par Live Trace permet de bien le convertir en chemin.

Récapitulatif de la vérification

Cause	Contenu	Solution
Incohérence des noms de calques	Les propriétés ne sont pas reprises lors du changement d'instance	Uniformiser les noms de calques pour toutes les icônes (ex. : Vector)
Incohérence de la structure des calques	Si la hiérarchie ou la structure des calques diffère, les styles peuvent ne pas être appliqués	Aligner la structure finale des objets de rendu
Le nombre de calques ne correspond pas à celui du composant d'origine	Le nombre de remplissages (fill) ne correspond pas à celui du composant d'origine	Appliquer le style, utiliser les chemins composés et la fusion pour résoudre
Mélange/Masque	La couleur n'a pas d'effet visuel	Revenir au mode de fusion `Normal`, annuler le masque

Comportement observé de la reprise des couleurs

Ci-dessous, le comportement de la reprise des couleurs constaté lors du changement de différentes icônes dans le bouton (voir l'image).

Motif de test	Résultat	Remarques
Contour des tracés	✅ Reprise des couleurs effective	Structure simplifiée et stable. En revanche, la réédition est peu pratique.
Lorsqu'on applique une opération booléenne sur des tracés (par exemple une union)	✅ Reprise des couleurs effective	Il n'y a pas de problème particulier si le nom du calque de niveau supérieur est identique. Si le nombre de calques directs est le même que celui de l'instance d'origine, le basculement se fait correctement.
La structure hiérarchique du vecteur est différente (Group > Vector)	✅ Reprise des couleurs effective	Tout va bien si les noms de calques correspondants sont identiques. En revanche, si la structure diffère ou si des noms sont dupliqués, l'affichage peut ne pas fonctionner correctement.
Pour les formes plus complexes (mélanges ou fusion de tracés)	✅ Reprise des couleurs effective	Regrouper les tracés assure une meilleure stabilité
Lorsque le vecteur source est placé dans un groupe ou un cadre, ou que sa structure est modifiée	🔺 Il arrive aussi que la couleur ne soit pas appliquée	Comme il est probable qu'ils soient reconnus comme des calques distincts, si vous souhaitez ajouter du contenu, il est plus fiable de dupliquer le composant et de modifier la copie.
Les noms de vecteurs diffèrent	❌ La couleur ne se reflète pas	Une différence de nom de calque est considérée comme un élément distinct
La structure interne est plus complexe que celle des données d'origine, avec de nombreuses différences	❌ La couleur n'est pas appliquée	Lorsque le nombre de calques augmente ou que le nombre de cadres devient élevé, seules certaines couleurs sont reflétées. Les écarts sont importants et il est très probable qu'ils soient considérés comme des calques distincts
Remplacement après suppression de la source de copie	❌ La couleur ne se reflète pas	Les éléments portant le même nom sont tout de même traités séparément
Lorsque le cadre parent du tracé d'icône contient un cadre du même nom	❌ La couleur s'applique au cadre parent	La modification de couleur est appliquée à un cadre portant le même nom dans le parent, de sorte que le style ne s'applique pas au tracé.

Astuces d'exploitation

Points clés issus de la vérification :

La concordance entre les noms de calque et la structure est particulièrement importante.
Il est plus sûr de gérer les remplissages via Color Styles ou Variables, mais cela n'est pas obligatoire.
Pour faciliter l'implémentation, créez les icônes en remplissage uniforme plutôt qu'en trait, car les traits ont tendance à se déformer lors du redimensionnement ; la mise en contour est recommandée.
Si vous souhaitez ajouter des éléments à une icône existante, évitez de modifier la variante actuellement en place : créez plutôt une nouvelle icône et remplacez-les un par un, ce qui limite les problèmes de couleur.

Points clés pour passer de la conception à l'implémentation en douceur :

Harmonisez les dimensions des cadres (évitez des tailles disparates comme 24px, 40px, 80px).
Pour les parties icônes, utilisez le redimensionnement : elles s'adaptent automatiquement à la taille de l'icône, ce qui simplifie nettement la gestion des données, tant à l'implémentation que dans la conception.

De plus, nos règles d'implémentation internes :

Définir la couleur sur noir pur #000 (Astro Icon ne prend en compte le changement de couleur que si les données d'origine sont noires).

Problèmes fréquents en phase d'exploitation :

Modifier les icônes existantes avec prudence : pendant l'exploitation, ajouter ou modifier des éléments dans une icône existante peut modifier involontairement sa structure et provoquer des problèmes de reflet des couleurs. Dans ce cas, il est plus sûr de ne pas modifier directement le composant existant, mais de créer un nouveau composant d'icône en respectant les règles, puis de le remplacer.

Conclusion

Vous avez bien compris ? Pour créer une icône, il suffit en principe de respecter ces trois règles ! 1. Utiliser uniquement des zones de remplissage (convertir les traits en contours !) 2. Uniformiser le « nom de calque » des tracés auxquels vous souhaitez appliquer une couleur 3. Garder la « structure de calques » de l'icône aussi simple que possible Et un point particulier à surveiller en phase d'exploitation : la modification des icônes existantes. Il arrive souvent que la structure change pendant la modification, ce qui empêche la couleur de s'appliquer. Il ne faut donc pas modifier directement l'icône existante, mais créer un nouveau composant en respectant les règles, puis y apporter les modifications. Ensuite, il suffit de remplacer l'ancienne icône par la nouvelle dans le composant bouton : les problèmes de couleur devraient alors être nettement moins fréquents.

Merci beaucoup ! Me voilà maintenant un expert des icônes ! Je vais essayer de créer le composant en suivant la méthode que vous m'avez expliquée.

Lorsqu'on change d'instance d'icône, même si l'apparence est identique, une différence de structure interne empêche la couleur de se répercuter correctement.

Pour les points présentés dans cet article, il suffit surtout de respecter rigoureusement « utiliser uniquement des zones de remplissage » et « uniformiser les noms de calques » pour éviter la plupart des problèmes.

Si le changement ne s'effectue toujours pas correctement, c'est souvent dû à une différence de structure interne ou à un calque parent portant le même nom.

J'espère que cet article vous aidera à rendre votre travail de design sur Figma plus confortable.