Introduction
Dans la création et la documentation de design systems, la gestion des couleurs est l’une des tâches les plus récurrentes… et les plus chronophages. Entre variables, styles et codes hexadécimaux, il n’est pas rare de perdre du temps à jongler entre sélections, copier-coller et détachement de styles. C’est de ce constat qu’est né Copy Color Value, un plugin Figma minimaliste pensé pour répondre à un besoin simple : copier et exploiter rapidement les valeurs de couleur d’un calque, sous toutes leurs formes.
Une problématique bien connue des designers
Le casse-tête de la documentation des couleurs
Lors de la refonte d’une identité visuelle ou la mise en place d’un design system, il est indispensable de documenter avec précision toutes les couleurs utilisées. Cela passe souvent par la création de composants qui illustrent les codes hexadécimaux des couleurs, leur nommage, et leur classification (primitives, sémantiques, etc.).
Or, dans Figma, récupérer simplement la valeur hexadécimale d’une couleur associée à un style ou à une variable est loin d’être fluide. Il faut détacher le style, copier le code, le réappliquer… puis recommencer pour chaque couleur. Une méthode fastidieuse, surtout quand on travaille avec une palette riche (ex. Tailwind) ou un set de couleurs sémantiques complet.
Un besoin simple, mais non couvert
Beaucoup de plugins Figma existent pour explorer les styles ou générer des palettes, mais peu répondent exactement à ce besoin précis : copier directement la valeur d’une couleur, et si possible, le nom du style ou de la variable associé. C’est ce manque qui a inspiré la création de Copy Color Value.
Copy Color Value : simplicité et efficacité
Une interface pensée comme un nuancier
L’idée du plugin est simple : lorsqu’on sélectionne un calque, le plugin détecte toutes les couleurs utilisées (qu’elles soient appliquées directement, via un style ou une variable). Ces couleurs s’affichent dans une fenêtre minimaliste, conçue comme un petit nuancier.
S’il n’y a qu’une seule couleur, elle occupe toute la hauteur.
S’il y en a plusieurs (par ex. un dégradé ou plusieurs calques sélectionnés), elles se répartissent dans la fenêtre, jusqu’à 3 par ligne, avec la possibilité de défiler si besoin.
Copier et convertir les valeurs
Pour chaque couleur affichée, l’utilisateur peut :
- Copier la valeur hexadécimale
- Copier le nom du style ou de la variable associée
- Copier le nom du calque
- Changer le format de sortie : Hex, RGB, HSL, HSB ou CSS
Cette souplesse permet d’adapter la documentation selon le contexte (handoff vers des devs front-end, mise en forme d’un design system, ou simple usage interne).
Des gains de temps concrets
Exemple : la documentation Tailwind
Lors d’un projet basé sur Tailwind, avec une palette étendue, Copy Color Value permet de lister et documenter en quelques clics l’ensemble des couleurs utilisées sur les textes et autres éléments. Plus besoin de détacher/re-appliquer manuellement : les valeurs sont accessibles immédiatement.
Une brique pour tout un écosystème de design tools
Le plugin peut aussi être combiné à d’autres outils Figma : par exemple, sélectionner tous les textes d’un fichier via un plugin dédié, puis passer par Copy Color Value pour extraire directement les couleurs appliquées. On obtient en quelques secondes une vue exhaustive des variables utilisées dans le projet.
Conclusion
Copy Color Value est né d’un besoin très concret rencontré dans des projets de refonte et de design system : documenter plus vite et plus efficacement les couleurs. Minimaliste, intuitif et centré sur l’essentiel, il transforme une tâche répétitive et fastidieuse en une action fluide et immédiate.
C’est aussi l’exemple parfait de la philosophie qui guide l’usage des plugins dans Figma : investir un peu de temps pour résoudre un problème récurrent, et gagner du temps ensuite à chaque projet.
.avif)
