Topics

Lorsque vous créez des éléments de design dans Figma et que vous partagez votre travail, vous pouvez rencontrer des problèmes inattendus. Avez-vous déjà eu des difficultés avec la couleur de l'icône d'un composant qui ne change pas correctement ?

Dans cet article, nous expliquerons clairement la cause et la solution du problème de non-affichage des couleurs des icônes, auquel de nombreux utilisateurs de Figma sont confrontés.

Mon collègue plus expérimenté a transformé le bouton que j'ai créé en composant ! Mieux encore, on peut même changer l'icône ! C'est génial ! Mais il n'y a pas assez d'icônes, alors je vais continuer à les enregistrer comme composants pour en faire un composant facile à utiliser.

J'ai discrètement créé un tas d'icônes.

Hein ? Les icônes ne changent pas correctement ? Je suis pourtant sûre de les créer de la même manière que mon aîné… Pourquoi les couleurs ne changent-elles pas correctement ?

C'est à cause de la façon dont vous créez vos icônes !

Senpai ! Comment faire pour que ça change de couleur ?

Génial ! Je vais vous montrer comment changer les icônes dans Figma. N'oubliez pas de prendre des notes et de les mémoriser !

Oui ! Je ferai de mon mieux pour m'en souvenir !

Pourquoi les couleurs sont-elles héritées ? Comment fonctionnent les substitutions dans Figma ?

Lors de la création d'un bouton dans Figma, il est courant de rendre l'icône modifiable via les propriétés d'instance. Cependant, lors du changement d'icône, des problèmes surviennent fréquemment, comme le fait que la couleur ne soit pas prise en compte ou ne change pas automatiquement.

Lorsque vous changez d'icônes dans Figma,La couleur que j'ai définie ne s'affiche pas/la couleur ne change pasAvez-vous déjà rencontré ce problème ? Dans cet article, nous vous expliquerons les causes et les solutions de manière simple et claire.

Vérifiez les paramètres des icônes et des boutons pour vous assurer que la couleur change correctement lorsque vous changez d'icône.

Vérifiez d'abord la structure du composant bouton.

Tout d'abord, examinons comment les couleurs sont remplacées à l'aide de la structure suivante :

① L'icône d'origine est noire.

2. Copiez-le comme instance dans le bouton et modifiez uniquement la couleur.

3. Si vous passez à une autre icône dans cet état, la couleur de l'icône peut revenir à sa couleur par défaut au lieu du blanc.

Conseil : Comprenez la relation entre les composants maîtres et les substitutions.

Le point le plus important à retenir est que toutes les propriétés que vous modifiez ne refléteront plus les changements apportés au composant principal.

La partie remplacéeSi vous modifiez la couleur ou le texte d'une instance, cette partie devient indépendante. Si vous modifiez ultérieurement cette même partie dans le composant principal, la modification ne sera pas appliquée à l'instance. Les modifications personnalisées (couleur de remplissage, de contour, texte, etc.) sont prioritaires.

Parties non remplacéesLes propriétés que vous n'avez pas modifiées (par exemple, le remplissage et la marge) refléteront les modifications apportées au composant principal.

Soyez particulièrement prudent si vous modifiez la structure des calques de votre composant principal : si vous renommez un calque ou supprimez un calque et en ajoutez un nouveau, Figma peut le reconnaître comme un élément différent et réinitialiser les substitutions d’instance.

Compte tenu de ce qui précède, examinons pourquoi la couleur de l'icône ne change pas.

Cause 1 : Les paramètres de remplissage et de contour sont mélangés.

Même si les icônes semblent identiques au premier abord, le remplissage et le contour sont traités comme des propriétés totalement distinctes dans Figma. Par conséquent, si vous passez d'une icône avec remplissage à une icône avec un contour, la modification de la couleur risque de ne pas être correctement prise en compte.

exemple:

Icône A

Icône B

• Icône A : Une icône avec contour et remplissage.
• Icône B : Une icône entourée d’un trait (Contour)

Ainsi, si l'icône est dessinée différemment, le résultat de l'application de la couleur changera également.Il est important de maintenir une expression cohérente.Lorsque vous cliquez sur l'icône B, le remplissage est blanc, mais comme cette icône est uniquement composée de lignes, la couleur n'est pas modifiée. Pourtant, le remplissage est bien blanc (mais comme il n'y a pas d'élément de remplissage, le blanc ne peut pas s'afficher correctement...).

✅ Solution：
La règle consiste à créer toutes les icônes avec un effet de « remplissage ». Les icônes dessinées avec des lignes doivent être converties en contours (command+shift+O) pour le convertir en un objet « peinture ». Cela présente l’avantage de simplifier sa manipulation lors de l’implémentation.

Dans notre cas, lors de l'implémentation, nous plaçons le chemin SVG dans une variable CSS ou nous l'incorporons à Astro Icon, de sorte que tout soit peint de manière uniforme.

Si vous laissez le contour, l'épaisseur du trait changera lorsque vous redimensionnerez l'icône, ce qui risque de dénaturer le design. Sauf raison particulière, il est préférable de le vectoriser et d'utiliser un paramètre de remplissage uniforme.

Si vous créez une icône uniquement à l'aide de lignes, l'épaisseur de ces lignes restera inchangée même lorsque vous redimensionnerez l'icône. Cela ne pose pas de problème pour les tracés simples comme les flèches, mais pour les icônes plus complexes, une épaisseur de 12 px les rendra compressées, et une épaisseur de 80 px les étirera souvent.

Il est préférable de vectoriser les icônes composées de lignes, car l'épaisseur du trait reste constante même après redimensionnement. Si vous souhaitez conserver les données originales avant la vectorisation, placez-les à proximité du composant.

Lorsque vous combinez un élément créé avec un contour, il sera transformé en remplissage, mais même dans ce cas, des problèmes surviennent souvent, comme par exemple le fait qu'une seule partie de la forme ne change pas de taille.

Cause 2 : Les noms des calques ne correspondent pas.

Dans Figma, les composantsLors du changement d'instance, les styles et les propriétés sont hérités pour les éléments portant le même nom de calque.Il existe un cahier des charges qui stipule :

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

Si les noms des calques sont différents comme ceci, Figma les considérera comme « différents » et les styles surchargés ne seront pas appliqués correctement.

✅ Solution: Unifier les noms des calques utilisés dans les icônes (par exemple, TousVector）

Pour l'instant, assurons-nous que tous les noms de calques des tracés que vous souhaitez colorer sont identiques !

Cause 3 : Différentes structures de couches (hiérarchies)

Même en uniformisant les noms des calques, la commutation peut ne pas fonctionner correctement. Dans ce cas, cela peut être dû à des différences dans la structure des calques.Si le nombre de couches ou la structure diffèrent, les propriétés risquent de ne pas être correctement cartographiées..cependant,Dans certains cas, de légères différences de hiérarchie ne posent pas de problème si les noms des calques sont identiques.。

exemple:

Icône A

Icône B

Icône C

• L'icône A est « Vecteur »（path）" Contour et combinaison en un seul vecteur (icône de base)
• L'icône B est « Flamme »（Flame） > Vector（path）" → OK (La couleur est héritée du nom de chemin « Vector »)
• L'icône C est « Vecteur »（Flame） > Flame（path）" structure → NG (le changement de couleur défini dans le nom de la flamme « Vector » apparaît)

De cette manière, le nom de la couche «Dans une structure où « Vector » contient un groupe, il faut faire attention à la manière dont vous appliquez le style.De plus, même si le nom est le même, la couleur ne change que dans la couche supérieure (voir icône C), et le changement de couleur n'est pas reflété dans les vecteurs de la deuxième couche.

✅ Solution: Pas seulement le nom du calque,Concevez-le de manière à ce que la structure de chemin où les styles s'appliquent réellement corresponde.Cela permettra d'éviter plus facilement les problèmes.

Tant que les noms des vecteurs sont corrects, une légère différence de structure est généralement acceptable. Cependant, dans le cadre du développement en équipe, il est préférable de conserver une structure interne aussi cohérente que possible pour les nouveaux membres.

Cause 4 : Le nombre de remplissages ou de traits est différent de celui du composant d’origine

Si vous utilisez une seule couleur, vous n'avez pas à vous inquiéter, à condition de fusionner les calques ou d'uniformiser leur structure et leurs noms. Cependant, si vous choisissez une icône dont le nombre de couleurs de remplissage ou de contour diffère de celui de l'icône d'origine, seules certaines couleurs changeront, tandis que d'autres resteront inchangées, ce qui peut entraîner un résultat insatisfaisant. En règle générale, les icônes doivent être monochromes. Si vous devez absolument utiliser deux couleurs, vous devrez créer une variable d'icône distincte pour l'icône bicolore, ou trouver une autre solution.

✅ Solution：

• Ne mélangez pas les icônes monochromes et multicolores.
• Si vous avez besoin d'une icône multicolore, dupliquez le composant icône avec des variables et créez-en un pour une icône bicolore.
• Lorsqu'on utilise des icônes multicolores, il est généralement déconseillé d'utiliser des remplacements de couleur.

Attention, même si vous modifiez une seule icône de couleur, vous ne pouvez changer qu'une seule couleur !

Cause 5 : Modes de fusion et masques

Si l'icône utilise un masque ou un mode de fusion spécial (tel que multiplier),Changer la couleur peut ne pas entraîner de changement visible.。

✅ Solution：
Si vous utilisez des masques ou des modes de fusion, convertissez-les en objets de chemin simples qui aient l'apparence attendue en combinant ou en aplatissant les objets avant de créer les composants.

Dans ce cas également, il est possible de créer un tracé simple en le traçant à la fin. Si vous utilisez la multiplication, il est plus sûr de créer un tracé correct à l'aide de la fonction de traçage en direct ou d'un outil similaire.

Résumé de vérification

Le comportement réel de réflexion des couleurs a été confirmé.

Ci-dessous figure le comportement de réflexion des couleurs observé lors du passage d'une icône à l'autre au sein du bouton (voir image).

Conseils d'utilisation

Principaux enseignements tirés du test :

• Il est très important que les noms et la structure des couches correspondent.
• Il est possible de spécifier la couleur de remplissage à l'aide du style de couleur ou des variables, mais ce n'est pas obligatoire.
• Les icônes sont créées à l'aide de remplissages pour faciliter leur mise en œuvre (les lignes ont tendance à perdre de la taille lorsqu'elles sont agrandies ou réduites, il est donc recommandé d'utiliser des contours).
• Si vous souhaitez ajouter des éléments à une icône existante, il est plus facile d'éviter les problèmes de couleur en créant une nouvelle icône et en remplaçant chaque élément individuellement plutôt qu'en modifiant la variante actuellement affichée.

Conseils pour une transition en douceur de la conception à la mise en œuvre :

• Uniformisez la taille des cadres (n'utilisez pas de tailles différentes telles que 24px, 40px, 80px, etc.).
• Lorsque vous redimensionnez l'icône, elle s'adaptera automatiquement à sa taille d'origine (ce qui facilite grandement la gestion des données, tant au niveau de la conception que de l'implémentation).

De plus, nos règles de mise en œuvre :

• Définissez la couleur sur noir absolu #000 (La couleur de l'icône Astro ne peut être modifiée que si les données d'origine sont noires)

Problèmes courants pouvant survenir pendant la phase d'exploitation :

• Soyez prudent lorsque vous modifiez des icônes existantesSi vous ajoutez ou modifiez des éléments à une icône existante pendant son utilisation, sa structure peut se modifier involontairement, ce qui peut entraîner des problèmes de rendu des couleurs. Dans ce cas, ne modifiez pas directement le composant existant, mais respectez les règles.Créez un nouveau composant d'icône et remplacez-le.C'est plus sûr.

résumé

Vous avez compris ? En résumé, pour créer des icônes, il suffit de suivre ces trois règles ! 1. Utilisez une méthode de dessin de remplissage cohérente (traits de contour !). 2. Utilisez des noms de calques cohérents pour les tracés à colorer. 3. Simplifiez au maximum la structure des calques de l'icône. De plus, lors de la production, soyez particulièrement vigilant lorsque vous modifiez des icônes existantes. Leur structure change souvent, ce qui peut entraîner des problèmes de rendu des couleurs. Ainsi, au lieu de modifier directement les icônes existantes, créez un nouveau composant en respectant les règles et modifiez l'icône à cet endroit. Ensuite, remplacez l'ancienne icône par la nouvelle dans le composant bouton. Cela devrait considérablement réduire les problèmes de couleur.

Merci ! Je maîtrise maintenant la création d'icônes ! Je vais essayer de créer un composant en utilisant la méthode que mon aîné m'a enseignée !

Lorsqu'on passe d'une instance d'icône à une autre, même si elles semblent identiques, leur structure interne est différente et les couleurs ne s'affichent pas correctement.

Les points abordés cette fois-ci, en particulier« Unifier le remplissage » « Unifier le nom du calque »En suivant ces deux points, vous devriez pouvoir éviter la plupart des problèmes.

Si le basculement ne se fait toujours pas correctement, cela est probablement dû à des différences dans la structure interne ou dans les couches parentes portant le même nom.

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