Les icônes ne changent pas de couleur dans Figma ! Guide de résolution des problèmes de commutation d'instances de composants

Lorsque vous créez des éléments de conception en collaboration dans Figma, il arrive de rencontrer des problèmes inattendus. Avez-vous déjà eu du mal avec une icône componentisée dont la couleur ne bascule pas correctement ?

Cet article explique clairement les causes et solutions du problème fréquemment rencontré par les utilisateurs de Figma : « la couleur de l'instance d'icône ne s'affiche pas ».

Mon collègue a componentisé le bouton que j'ai créé ! Et en plus, il a pu basculer la partie icône ! C'est génial ! Mais il manque des icônes, alors je vais continuer à en enregistrer comme composants pour rendre le composant plus facile à utiliser !

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

Attendez ? Pourquoi le composant d'icône ne bascule pas correctement ? Je fais la même chose que mon collègue, pourtant… Pourquoi la couleur ne change-t-elle pas ?

Eh bien, c'est ta façon de créer l'icône qui en est la cause !

Collègue ! Comment faire pour que la couleur change ?

Hm hm, très bien ! Je vais te montrer le secret du basculement d'icônes dans Figma. Prends bien notes et grave-le dans ton esprit !

Oui ! Je vais bien étudier !

Pourquoi la couleur n'est-elle pas conservée ? Comment fonctionnent les remplacements dans Figma

Lors de la création d'un bouton dans Figma, il est courant de configurer la partie icône pour pouvoir la commuter via les propriétés d'instance. Cependant, lorsque vous changez l'icône, des problèmes peuvent survenir : les couleurs configurées ne s'appliquent pas ou changent de manière inattendue.

Avez-vous déjà rencontré un problème dans Figma où, en changeant une icône, la couleur définie ne s'applique pas ou ne change pas correctement ? Cet article vous présente les causes et les solutions de manière claire.

Vérifiez que les paramètres de l'icône et du bouton sont correctement configurés pour que la couleur se change bien lors du changement d'icône.

D'abord, vérifiez la structure du composant bouton

Commençons par examiner une structure comme celle-ci pour confirmer la situation où la couleur est remplacée.

① Le composant icône original est noir

② Copié en tant qu'instance dans le bouton avec la couleur uniquement remplacée

③ Si vous changez d'icône dans cet état, la couleur de l'icône peut revenir à la couleur par défaut au lieu de blanc

Conseils : Comprendre la relation entre les composants maîtres et les remplacements

Le point clé à retenir est que les propriétés remplacées ne reflètent plus les modifications du composant maître.

Parties remplacées : Lorsque vous modifiez la couleur ou le texte dans une instance, ces parties deviennent indépendantes. Même si vous modifiez ultérieurement la même partie du composant maître, cette instance ne sera pas affectée. Les éléments remplacés (couleur de remplissage, couleur de trait, texte, etc.) ont la priorité.

Parties non remplacées : Les propriétés que vous n'avez pas modifiées (par exemple, le padding ou la marge) reflètent directement les modifications du composant maître.

Soyez particulièrement attentif aux modifications de la structure des calques du composant maître. Si vous renommez un calque ou supprimez un calque pour en ajouter un nouveau, Figma peut le reconnaître comme un élément différent, ce qui entraîne la réinitialisation des remplacements de l'instance.

En gardant tout cela à l'esprit, cherchons à identifier pourquoi la couleur de l'icône ne change pas.

Cause 1 : Mélange des paramètres de « remplissage (Fill) » et de « trait (Stroke) »

Même si deux icônes ont une apparence similaire, le « remplissage (Fill) » et le « trait (Stroke) » sont traités comme des propriétés complètement distinctes dans Figma. Par conséquent, si vous basculez d'une icône créée avec un remplissage à une icône créée avec un trait épais, le remplacement de couleur peut ne pas s'appliquer correctement.

Exemple :

Icône A

Icône B

• Icône A : icône vectorisée composée de remplissage (Fill)
• Icône B : icône dont le contour est dessiné avec des traits (Stroke)

Comme vous pouvez le voir, si la méthode de dessin des icônes diffère, le résultat de l'application des couleurs change également. Par conséquent, il est important d'unifier la méthode de représentation. Lorsque vous cliquez sur l'icône B, un remplissage blanc est spécifié, mais comme ce composant d'icône est construit uniquement avec des traits, la couleur ne se remplace pas. Cependant, en réalité, le blanc s'affiche correctement dans la partie remplissage (le blanc n'a nulle part où aller puisqu'il n'y a pas d'élément de remplissage).

✅ Solution :
établissons une règle selon laquelle toutes les icônes doivent être créées avec du « remplissage ». Les icônes dessinées avec des traits doivent être vectorisées (command+shift+O) et converties en objets « remplis ». Cela présente également l'avantage de faciliter la manipulation lors de l'implémentation.

Dans notre cas, lors de l'implémentation, nous plaçons les chemins SVG dans des variables CSS ou les intégrons avec Astro Icon, nous unifiions donc tout avec du remplissage.

Si vous laissez les traits en l'état, l'épaisseur des traits change lorsque vous agrandissez ou réduisez l'icône, ce qui peut dégrader la conception. À moins qu'il n'y ait une raison particulière, il est préférable de vectoriser et d'unifier le « remplissage ».

Si l'icône est construite uniquement avec des traits, l'épaisseur des traits reste inchangée lorsque vous agrandissez ou réduisez l'icône. Pour les chemins simples comme les flèches, il y a peu de problèmes, mais avec les icônes complexes, celles-ci peuvent devenir illisibles à 12px ou avoir un design disproportionné à 80px.

Les icônes construites avec des traits ne changent pas en épaisseur lorsque la taille change, donc la vectorisation est la meilleure solution. Si vous souhaitez conserver les données d'origine avant la vectorisation, placez-les à proximité du composant.

Même si les éléments construits avec des traits (Stroke) sont fusionnés et convertis en remplissage (Fill), cela entraîne souvent des problèmes tels que seule une partie ne change pas de taille.

Cause 2: Layer names don't match

Figma has a specification where when switching component instances, styles and properties are inherited for elements with the same layer name.

Exemple :

Icône A

Icône B

• Icon A vector layer name: Vector
• Icon B vector layer name: Vector2

When layer names differ like this, Figma treats them as "different things" and overridden styles won't apply correctly.

✅ Solution: Standardize layer names used in icons (example: all named Vector)

For now, make sure all the layer names for paths you want to color have the same name!

Cause 3: Layer structure (hierarchy) differs

Even when layer names are standardized, switching sometimes doesn't work correctly. In that case, differences in layer structure may be involved. When the number and structure of layers differ between the instance source and destination, properties may not map correctly. However, if layer names are the same, minor hierarchy differences may not cause issues in some cases.

Exemple :

Icône A

Icône B

Icon C

• L'icône A est « Vector (path) » converti en contours et regroupé en un seul vecteur (icône de base)
• L'icône B a la hiérarchie « Flame (Flame) > Vector (path) » → OK (la couleur est héritée par le chemin d'accès « Vector »)
• L'icône C a la structure « Vector (Flame) > Flame (path) » → NG (la variation de couleur définie pour « Vector » apparaît sous le nom « Flame »)

Comme cela, dans une structure où le nom de calque « Vector » contient un groupe, il faut être attentif à la façon dont les styles s'appliquent. De plus, même avec le même nom, la variation de couleur s'applique uniquement à la couche supérieure (voir icône C), et la variation de couleur n'est pas reflétée sur le Vector du deuxième niveau.

✅ Solution : En veillant non seulement au nom du calque, mais aussi à ce que la structure de chemin sur laquelle s'applique réellement le style soit cohérente, il devient plus facile d'éviter les problèmes.

Si le nom du vecteur correspond, ça marche souvent même si la structure est un peu différente. Mais dans les projets en équipe, c'est plus gentil pour ceux qui rejoignent le projet plus tard d'harmoniser autant que possible la structure interne.

Cause 4 : le composant d'origine et le nombre de remplissages « Remplissage (Fill) » ou de traits « Trait (Stroke) » sont différents

Dans le cas d'une couleur unique, il n'y a pas de souci si vous fusionnez les calques ou si vous unifiez la structure et le nom des calques. Cependant, lorsque vous basculez vers une icône dont le nombre de « Remplissages (Fill) » ou de « Traits (Stroke) » diffère du composant d'origine, il y a des cas où seule une partie des couleurs change et les autres restent inchangées, ce qui ne donne pas le résultat souhaité. En principe, les icônes doivent avoir une couleur unique. Ou s'il est nécessaire d'utiliser deux couleurs, il faut créer séparément une variable d'icône pour les icônes à deux couleurs.

✅ 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 en tant que variable et créez une version pour les icônes à deux couleurs.
• Lors de l'utilisation d'icônes multicolores, évitez généralement d'utiliser le remplacement de couleur.

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

Cause 5 : Effets de mode de fusion et de masque

Lorsqu'un masque ou un mode de fusion spécial (comme la multiplication) est appliqué à une icône, modifier la couleur peut ne pas produire le changement d'apparence attendu.

✅ Solution :
Si vous utilisez des masques ou des modes de fusion, fusionnez ou aplatissez les objets pour les convertir en objets de chemin simples et directs avant de les transformer en composant.

Dans ce cas également, il est préférable de convertir finalement en contours ou de simplifier les chemins. Si vous utilisez la multiplication, assurez-vous de bien vectoriser avec le suivi automatique pour plus de sécurité.

Résumé de la vérification

Comportement de réflexion des couleurs réellement confirmé

Voici le comportement de réflexion des couleurs confirmé lors du changement de diverses icônes dans les boutons (voir image).

Conseils opérationnels

Points clés identifiés lors de la vérification :

• La correspondance entre les noms de calques et la structure est extrêmement importante
• Il est prudent de gérer le remplissage via des Color Styles ou des Variables, mais ce n'est pas obligatoire
• Pour la création d'icônes, unifiez le remplissage en tenant compte de la facilité de mise en œuvre (les traits ont tendance à se décaler en taille lors du redimensionnement, il est donc recommandé de les convertir en contours)
• Si vous souhaitez ajouter des éléments à une icône existante, il est préférable d'éditer la variante actuellement reflétée et de créer une nouvelle icône en remplaçant chaque élément un par un, pour éviter les problèmes de couleur

Points clés pour un processus fluide de la conception à la mise en œuvre :

• Standardisez la taille des cadres (ne mélangez pas les tailles comme 24px, 40px, 80px)
• La partie icône se redimensionne correctement en fonction de la taille de l'icône lors du redimensionnement (le traitement des données devient considérablement plus facile, aussi bien dans la mise en œuvre qu'en conception)

Règles supplémentaires pour notre implémentation :

• Définir la couleur en noir pur #000 (Astro Icon ne peut pas modifier la couleur si les données d'origine ne sont pas noires)

Problèmes courants en phase opérationnelle :

• Soyez prudent lors de la modification d'icônes existantes : lors de la modification d'icônes existantes pendant l'exploitation, l'ajout ou la modification d'éléments peut involontairement altérer la structure et causer des problèmes de rendu de couleur. Dans ce cas, au lieu de modifier directement le composant existant, il est plus sûr de créer une nouvelle icône selon les règles et de la substituer.

Conclusion

Vous suivez ? Pour créer une icône, respectez simplement ces 3 règles ! 1. Utilisez le remplissage pour le dessin (convertissez les contours en courbes !) 2. Unifiez les « noms de calques » des chemins auxquels vous souhaitez appliquer une couleur 3. Gardez la « structure des calques » de l'icône aussi simple que possible Et en phase opérationnelle, le point sur lequel vous devez être particulièrement attentif est la modification d'icônes existantes. Pendant la modification, la structure change souvent et la couleur ne s'affiche plus correctement. Donc, au lieu de modifier directement une icône existante, créez un nouveau composant en respectant les règles et modifiez l'icône dans ce nouveau composant. Ensuite, remplacez l'ancienne icône par la nouvelle dans le composant de bouton, et les problèmes de couleur devraient être considérablement réduits.

Merci beaucoup ! Maintenant je maîtrise aussi les icônes ! Je vais créer des composants en utilisant la méthode que vous m'avez enseignée !

Lors du changement d'instance d'icône, même si l'apparence est identique, une structure interne différente empêche le rendu correct de la couleur.

En mettant l'accent sur les deux points que nous avons présentés, notamment « unifier le remplissage » et « unifier les noms de calques », vous devriez pouvoir éviter la plupart des problèmes.

Si le changement ne fonctionne toujours pas, il est généralement dû à des différences dans la structure interne ou à des calques parents portant le même nom.

J'espère que cet article vous aidera à rendre votre travail de conception dans Figma plus agréable.