Introduction
Dans la gestion de maquettes Figma, l’utilisation de variables et de styles pour définir les couleurs est essentielle pour assurer la cohérence et la maintenabilité de vos projets.
Pourtant, lorsqu’on passe en revue toutes les couleurs d’un écran via l’outil Selection Colors, des éléments parasites peuvent brouiller l’analyse : icônes multicolores, logos ou widgets importés qui n’ont pas vocation à être intégrés dans votre palette. Voici une astuce partagée sous forme de vidéo pour contourner ce problème et optimiser votre chasse aux couleurs.
Variables et styles, clés d’une maintenance efficace
L'importance des variables et des styles
Pour assurer une maintenance efficace, la bonne pratique consiste à définir toutes vos couleurs dans des variables ou des styles. Cela permet de modifier une seule valeur pour mettre à jour automatiquement tous les éléments concernés dans votre projet. Pour vérifier que toutes les couleurs sont liées à des variables, on utilise l'outil Selection Colors de Figma, qui liste toutes les couleurs appliquées dans une sélection.
Un outil à affiner
L'outil Selection Colors est utile pour identifier les couleurs à lier à des variables, mais il peut afficher des éléments non pertinents comme les logos, widgets ou visuels importés. Ces derniers ne sont pas destinés à faire partie de votre design system, et leurs couleurs peuvent parasiter l'analyse.
L’astuce
Utiliser une image pour ignorer une couleur
L'astuce consiste à remplacer le remplissage de couleur d'un élément par un remplissage d'image pour qu'il n'apparaisse pas dans le panneau Selection Colors. Pour ce faire, vous devez créer un carré de la couleur souhaitée, le copier en tant que fichier PNG, puis importer cette image comme remplissage pour votre calque.
Fonctionnement de l'astuce
En utilisant un remplissage d'image, l'apparence visuelle de votre élément reste inchangée, mais sa couleur n'est plus prise en compte par l'outil Selection Colors. Cela vous permet de vous concentrer sur les couleurs pertinentes de votre maquette sans être distrait par celles des logos ou des icônes externes.
Pourquoi cette solution fonctionne
Figma différencie les remplissages de couleur et les remplissages d’image dans la liste Selection Colors. En convertissant un remplissage de couleur en image, vous évitez que cette teinte soit considérée comme une couleur à remplacer. Visuellement, rien ne change, mais l’outil de sélection des couleurs n’en fait plus état.
Utilisez cette technique avec parcimonie : elle est utile lorsque vous avez besoin d’isoler des éléments externes (logos, icônes multicolores…) et d’éviter qu’ils interfèrent avec votre palette de variables. Mais elle n’a pas vocation à masquer des couleurs qui devraient réellement être converties en variables.
Conclusion
Optimiser la maintenance de vos maquettes Figma passe par l’utilisation rigoureuse de variables et de styles pour les couleurs. En parallèle, quelques astuces, comme l’utilisation d’un remplissage d’image pour les éléments à exclure, peuvent rendre votre travail plus fluide.
Cette méthode vous permet de garder le contrôle sur votre palette sans être parasité par des couleurs externes. N’hésitez pas à explorer et à partager ce type de hack pour améliorer continuellement vos workflows — toujours dans le respect des bonnes pratiques et des conditions d’utilisation.
.avif)
