Comment générer les teintes d’une couleur avec le plugin Figma “Color Shades”

October 10, 2023
Comment générer les teintes d’une couleur avec le plugin Figma “Color Shades”

Introduction

Le plugin "Color Shades" pour Figma est un outil pratique pour les designers qui cherchent à explorer différentes options de couleurs pour leurs designs. Il permet de définir une couleur de base et de générer rapidement une palette de couleurs à partir de celle-ci, avec une fonction de contrôle de la qualité pour s'assurer que les couleurs générées sont suffisamment contrastées.

Le plugin "Color Shades" est facile à utiliser et peut vous faire gagner beaucoup de temps lors de la création de votre palette de couleurs pour votre projet, notamment si vous devez ajouter des déclinaisons de couleur à votre design system.

Comment l’utiliser

BASE COLOR

Pour définir la couleur de base, vous pouvez entrer le code hexadécimal de la couleur souhaitée. Vous pouvez également définir un coefficient de contraste allant de 0 à 100. Si le coefficient de contraste est trop bas, le plugin vous informera que certaines couleurs sont trop proches par rapport à celle par défaut.

SHADES

Le plugin générera 15 couleurs à partir de la couleur de base. Chaque couleur aura un coefficient de profondeur, allant de 0 (teinte la plus claire) à 10 (teinte la plus foncée). La couleur de base aura un coefficient de 5, ce qui la place au milieu de la palette. Il y aura 7 teintes plus claires et 7 plus foncées. Les codes hexadécimaux varieront en fonction du coefficient de contraste assigné à la couleur de base.

CREATE

Le plugin peut générer les teintes sous forme de calques, mais ne crée pas les styles. Vous devrez utiliser un autre plugin pour aider à la création de styles à partir de calques de couleurs, ou les créer manuellement.

Conclusion

En conclusion, le plugin "Color Shades" pour Figma est un outil pratique pour les designers qui cherchent à explorer différentes options de couleurs pour leurs designs. Il offre une solution rapide et simple pour générer une palette de couleurs à partir d'une couleur de base, avec une fonction de contrôle de la qualité pour s'assurer que les couleurs générées sont suffisamment contrastées. Le plugin peut être utilisé directement dans Figma pour une intégration facile et pratique.

LIENS PRATIQUES

Plugin Figma

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Utilisez le plugin "Insert Big Image" pour importer de grandes images depuis FigmaUtilisez le plugin "Insert Big Image" pour importer de grandes images depuis Figma
Le plugin Figma "Insert Big Image" permet d'importer des images de grande taille sans perte de qualité. Il découpe l'image en plusieurs images plus petites, chacune respectant la limite de 4096 pixels de Figma.
Lignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans FigmaLignes élégantes et connexions intelligentes, maîtrisez le plugin Autoflow dans Figma
Le plugin Autoflow pour Figma simplifie la création de connexions entre les frames, offrant des lignes intelligentes, esthétiques, et évitant intelligemment les obstacles. Il est idéal pour les concepteurs d'applications mobiles, d'interfaces web, et d'autres projets de conception.
Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”Utilisez l’ensemble des icons de Google grâce au Plugin Figma “Material Design Icon”
Le plugin Material Design Icon pour Figma vous permet d'intégrer facilement des icônes Material Design dans vos créations. Il propose une interface intuitive, une large sélection d'icônes, et des fonctionnalités de personnalisation avancées.