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

April 19, 2024
X
MINUTES
PARTAGER SUR
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

Guillaume Hambourger

UI Designer chez ATECNA
PLUS D'ARTICLES

Vous pourriez également être intéressé

Créez des expériences web révolutionnaires avec le duo dynamique de Webflow & SplineCréez des expériences web révolutionnaires avec le duo dynamique de Webflow & Spline
Explorez de nouvelles dimensions avec Webflow et Spline ! Cet article dévoile comment ces plateformes combinent design 2D et modélisation 3D pour des interactions utilisateurs captivantes. Découvrez comment cette synergie révolutionne le web design et libère votre créativité.
Spline, l'outil de conception 3D dans le navigateur avec collaboration en temps réelSpline, l'outil de conception 3D dans le navigateur avec collaboration en temps réel
Spline révolutionne la modélisation 3D avec sa simplicité, sa puissance et sa polyvalence. Cette plateforme intuitive permet à quiconque de créer des modèles 3D époustouflants, d'animer des scènes dynamiques et de développer des expériences interactives engageantes. Idéale pour les professionnels et les amateurs, Spline libère votre créativité 3D.
Introduction à Responsively, l’application pour optimiser le responsive de Votre Site WebIntroduction à Responsively, l’application pour optimiser le responsive de Votre Site Web
Découvrez Responsively, l'application révolutionnaire qui simplifie le développement web réactif. Testez et visualisez votre site web en temps réel sur plusieurs appareils simultanément, garantissant une expérience optimale pour tous les utilisateurs.