Personnalisation de la couleur Material

1. Introduction

Dernière mise à jour : 18/04/2022

Les applications peuvent adopter un éventail de couleurs à partir de schémas de base, de couleurs dynamiques générées par l'utilisateur ou de couleurs de marque.

Le précédent atelier sur les couleurs Material You a exploré la façon de visualiser les couleurs dynamiques dans les maquettes de conception. Toutefois, vous pouvez également utiliser la thématisation Material pour personnaliser votre application avec les couleurs de votre marque. En utilisant le nouveau système de couleurs avec les couleurs de votre marque, vous créerez un jeu de couleurs accessible qui pourra adopter des fonctionnalités plus dynamiques.

Points abordés

Découvrez comment créer un thème personnalisé avec Material Theme Builder.
Appliquer un thème personnalisé aux maquettes de conception.
Possibilité de combiner des couleurs dynamiques et personnalisées.

Prérequis

Connaissance des concepts fondamentaux liés à la conception d'applis.

Connaissance des concepts fondamentaux liés à la conception d'applis : palettes de couleurs
Connaissance des jeux de couleurs et des rôles de couleur Android actuels
Connaissance de Figma
Facultatif : suivre l'atelier Visualisation des couleurs dynamiques dans votre application

Prérequis

2. Premiers pas

Préparation

Pour commencer, vous devez accéder au fichier Figma de Designlab. Celui-ci contient tout ce dont vous avez besoin pour cet atelier. Vous pouvez télécharger et importer le fichier ou le dupliquer à partir du site de la communauté Figma.

Tout d'abord, connectez-vous à Figma ou créez un compte.

Dupliquer à partir de la communauté Figma

Accédez au fichier Customizing Material (Personnaliser Material) ou recherchez "Visualizing dynamic color in your app with Material Design" (Visualiser les couleurs dynamiques dans votre application avec Material Design) dans la communauté Figma. Cliquez sur Duplicate (Dupliquer) en haut à droite pour copier ce fichier dans vos dossiers.

Mettre en page le fichier

Vous remarquerez à l'ouverture qu'il s'agit d'un fichier autonome qui commence par une introduction. Chaque section se situe sur une ligne de plans de travail reliés entre eux et contient des concepts fondamentaux suivis d'exercices. Les sections et les exercices s'appuient les uns sur les autres et doivent être suivis dans l'ordre.

Cet atelier de programmation vous présente en détail ces concepts et exercices. Lisez la suite de cet atelier pour en savoir plus sur les nouvelles fonctionnalités Material You.

À partir du plan de travail Intro, des boutons permettent de relier les plans dans l'ordre. Pour accéder au lien, cliquez sur le bouton.

Installer le plug-in Figma

Cet atelier de programmation s'appuie en grande partie sur un nouveau plug-in Figma permettant de générer des jeux de couleurs et des jetons dynamiques. Installez le plug-in Figma directement depuis la page de la communauté Figma ou recherchez "Material Theme Builder" sur le site de la communauté Figma.

3. Palette de couleurs Material

Commençons par un aperçu de l'utilisation des couleurs dans Material et du fonctionnement du nouveau système de couleurs.

La couleur sert à exprimer le style recherché et à faire passer les messages importants pour l'utilisateur, la marque ou le contenu sémantique. Le système de couleur gère la variabilité des jeux de couleurs qui changent de façon dynamique en fonction des actions de l'utilisateur. La logique des relations tonales et des variations de teinte et de chroma constitue la base d'une application flexible des couleurs.

L'espace colorimétrique permet de générer des jeux de couleurs clairs et sombres accessibles à partir d'une couleur source en générant cinq couleurs clés, puis des palettes tonales, où certaines étapes tonales sont sélectionnées.

Cette technique de changement de couleur permet non seulement de créer un jeu de couleurs accessible, mais aussi de créer des jeux de couleurs de marque accessibles et cohérents avec les jeux de couleurs générés par les utilisateurs.

Les jeux de couleurs sont générés à partir de cinq couleurs clés dans des palettes tonales pour créer des jeux accessibles.

Thème avec mention de la marque

M3 permet d'appliquer systématiquement des paramètres personnalisés pour définir et conserver les styles qui communiquent votre marque.

Un schéma personnalisé est un jeu de couleurs qui ne provient pas du fond d'écran de l'appareil de l'utilisateur, mais plutôt du créateur de l'application. Le système de couleurs M3 et les schémas personnalisés sont à la base de l'activation des couleurs dynamiques dans les applications.

Le schéma personnalisé comblera le fossé entre M2 et M3 pour faciliter la migration en configurant les jetons nécessaires (emplacements de couleur) et en créant une expérience plus axée sur la marque.

Ajouter des couleurs de marque dans Material Theme Builder

4. Jeu de couleurs : couleurs d'accentuation

Chaque jeu de couleurs se base sur un ensemble de cinq couleurs clés associées chacune à une palette tonale distincte de 13 tons. Des tons spécifiques de chaque palette tonale sont attribués à des rôles de couleur dans une UI. Commençons par ouvrir le plug-in Material Theme Builder et à configurer notre première couleur d'accentuation : Primary.

Si vous n'indiquez que la couleur primaire, elle sera utilisée comme source pour générer un jeu de couleurs complet.

Dans la fenêtre modale du plug-in, cliquez sur "Custom" (Personnalisé). Le thème est remplacé par un thème personnalisé. Pour cet atelier, nous utiliserons le thème Material déjà généré, mais vous pouvez également créer un autre thème si vous le souhaitez. Pour en savoir plus, consultez Visualiser la couleur dynamique.
Définissez ensuite une couleur clé primaire. La couleur primaire peut être la couleur principale de votre marque ou la couleur primaire d'accentuation la plus utilisée. Les autres couleurs clés seront insérées en fonction de la couleur primaire. Il est donc inutile d'ajouter des couleurs si vous n'en avez pas besoin.

5. Créer le reste du thème

La couleur primaire est utilisée pour générer le thème, mais vous pouvez avoir des couleurs d'accentuation pour compléter la couleur principale de la marque.

Dans le modal du plug-in, ajoutez une couleur secondaire en cliquant sur le sélecteur de couleur secondaire. Les rôles secondaires sont utilisés pour les composants moins visibles de l'UI, tout en offrant plus de possibilités d'expression des couleurs. La couleur secondaire sera mise à jour dans le jeu de couleurs et dans l'UI de l'application.
Faites de même pour "Tertiary" (Tertiaire). Les rôles tertiaires sont utilisés pour accentuer le contraste des couleurs principales et secondaires, ou pour attirer davantage l'attention sur un élément. Le rôle de couleur tertiaire est laissé à la discrétion des créateurs et est destiné à permettre une expression plus large des couleurs dans les produits.
Les rôles neutres sont désormais utilisés pour les surfaces et les arrière-plans, ainsi que pour le texte et les icônes à forte emphase.

Fournissez des couleurs secondaires, tertiaires et neutres pour personnaliser entièrement votre palette de couleurs.

Les couleurs de votre marque seront désormais incluses dans le jeu de couleurs principal, qui sera adapté à l'espace colorimétrique M3. Elles seront entièrement accessibles et pourront être exportées et implémentées dans le code en tant que thème.

6. Appliquer votre thème

Rôles et jetons

Chaque couleur d'accentuation (primaire, secondaire et tertiaire) est déclinée en quatre couleurs compatibles de tons différents pour l'association, l'accentuation et l'expression visuelle. Le groupe est composé de la couleur d'accentuation, de la couleur sur, du conteneur et de la couleur sur le conteneur.

Les rôles neutres sont utilisés pour les surfaces, les arrière-plans, ainsi que le texte et les icônes à forte emphase.

Les jetons de conception représentent les petites décisions de conception répétées qui composent le style visuel d'un système de conception. Les jetons remplacent les valeurs statiques, telles que les codes hexadécimaux pour les couleurs, par des noms explicites. Les tokens de conception permettent de relier de manière pertinente des choix de style qui, autrement, n'auraient pas de lien clair.

Le plug-in Figma crée des jetons et saisit vos propres couleurs sources sous forme de styles Figma pour se connecter aux maquettes, aux guides de style de marque et même aux systèmes de conception existants.

Les jetons de conception créent un langage commun entre les rôles de couleur et l'implémentation.

Hiérarchie des couleurs

Lorsque vous appliquez des rôles de couleur à vos maquettes, réfléchissez à l'ordre d'importance ou à la hiérarchie de vos éléments. Ce concept vous aidera à attribuer les couleurs de votre marque à leur rôle respectif, mais également à les mapper dans l'interface utilisateur. En général, les couleurs plus saturées ou concentrées attirent d'abord l'attention de l'utilisateur. C'est pourquoi le rôle de couleur primaire est associé à des composants axés sur les incitations à l'action. Bien que Material Theme Builder utilise le système de couleurs M3 pour générer des couleurs appropriées, fournir des couleurs secondaires ou tertiaires avec une saturation plus élevée créera des couleurs qui éclipseront leur couleur primaire. Réfléchissez à l'ordre dans lequel vous souhaitez que vos utilisateurs interagissent avec l'UI et le contenu pour attribuer les rôles de couleur. Tous les composants ne doivent pas utiliser la couleur primaire.

Les couleurs unies et saturées attirent le plus l'attention.

7. Passer au thème

Pour appliquer le thème personnalisé que vous avez créé à vos conceptions, nous devons définir la maquette sur les jetons du thème Material existant.

Les composants Material sont fournis avec des rôles prémappés et fonctionnent automatiquement avec Material Theme Builder.

Passez au thème à partir du pop-up Material Theme Builder.

Définissons tous les jetons (styles Figma) dans la mise en page à droite pour utiliser ce thème en sélectionnant le frame de la mise en page et en cliquant sur "Swap" (Échanger). Le préfixe de style est mis à jour dans les couleurs de sélection.
Toutes les informations ne sont pas mises à jour ? Les composants personnalisés, comme la fiche de conseils sur l'entretien des plantes, devront d'abord appliquer le style Figma. Sélectionnez le conteneur de conseils, puis cliquez sur l'icône à quatre points pour attribuer un style et choisissez Conteneur tertiaire. Procédez de la même manière avec le contenu de la carte de conseils, sauf que vous devez attribuer un conteneur tertiaire. Les petits libellés de la liste sont également des composants personnalisés, mais nous y reviendrons plus tard.
Les composants Material Design utilisent des mappages par défaut, mais vous pouvez tester les affectations de style pour mieux adapter l'UI. Prenez le temps de jouer avec différentes hiérarchies de couleurs et expressions de marque.

(Seul le thème est inclus dans le fichier d'exportation pour le code. Si vous travaillez avec un ingénieur, partagez des maquettes pour communiquer les mappages de jetons, car ils ne seront pas inclus dans l'exportation.

Si vous ouvrez le plug-in sans thème, un écran de configuration s'affiche pour vous aider à démarrer. L'option "Commencer" génère la baseline par défaut "material-theme" en tant que groupe de styles Figma à connecter à vos maquettes ou à utiliser avec le kit Material Design.

8. Étendre le schéma de base

Vous disposez maintenant d'un thème de couleur personnalisé mappé aux composants et à la maquette de conception, mais vous pouvez avoir des couleurs supplémentaires à inclure. C'est là qu'un schéma étendu entre en jeu pour permettre l'ajout de couleurs personnalisées.

Il peut s'agir de couleurs sémantiques, spécifiques à la marque ou même à un produit. Elles doivent se voir attribuer des rôles et être modifiées par l'algorithme de couleur ou rester telles qu'elles ont été saisies.

Le jeu de couleurs étendu permet également de combiner des couleurs dynamiques (générées par l'utilisateur) avec les couleurs de votre marque. Permettez au schéma de base d'avoir une influence personnalisée de l'utilisateur, tandis que les couleurs de la marque sont définies dans le schéma étendu. Cela signifie que les éléments d'interface utilisateur peuvent être plus personnels pour vos utilisateurs et que les couleurs de votre marque peuvent avoir des moments d'impact plus précis dans l'application.

Le schéma de base peut être étendu pour inclure des couleurs personnalisées.

9. Étendre et personnaliser

L'extension du schéma avec des couleurs personnalisées permet d'ajouter des couleurs telles que des couleurs sémantiques ou de branding supplémentaires.

Schéma personnalisé avec des couleurs personnalisées ajoutées.

Dans la fenêtre modale du plug-in, sous les couleurs clés, cliquez sur Add a Color (Ajouter une couleur).
Le thème actuel sera mis à jour avec une nouvelle ligne "Custom0". Pour modifier cette couleur, cliquez sur le sélecteur de couleur et sélectionnez-en une autre.
Ces couleurs étendues sont disponibles en tant que style dans les styles en lecture seule sous Custom0. Leur palette et leur jeu de couleurs tonales sont tous deux présents. Associons certains libellés de la liste à la nouvelle couleur en sélectionnant l'arrière-plan du libellé et en attribuant l'un des rôles de la couleur ajoutée (conteneur "on-custom0").

Définition d'une couleur personnalisée dans les couleurs sélectionnées.

Material Theme Builder génère automatiquement les couleurs sous la forme "Personnalisée#". Pour renommer une couleur personnalisée ajoutée, développez le groupe de styles du thème dans le panneau de style (il s'affiche lorsque rien n'est sélectionné). Recherchez ensuite "Custom0" dans le sous-groupe source. Si vous renommez la source ici, la couleur sera renommée dans le modal du plug-in.

Les styles de couleurs personnalisés se trouvent dans le panneau des styles.

Pour supprimer la couleur ajoutée, vous pouvez procéder de la même manière en effectuant un clic droit et en supprimant le style. La prochaine fois que le plug-in sera ouvert, la couleur ajoutée sera supprimée. Il est possible que les changements de nom et les suppressions ne soient pas reflétés dans le diagramme de couleurs.

10. Félicitations

Vous avez réussi à créer un thème de couleurs personnalisé à l'aide de Material Theme Builder, à l'appliquer à des maquettes de conception et à ajouter des couleurs au jeu de couleurs. Le nouveau système de couleurs Material 3 apporte des couleurs accessibles, flexibles et cohérentes aux conceptions. Nous avons hâte de voir comment vous les utiliserez !

Si vous avez des questions, n'hésitez pas à nous contacter à tout moment à l'adresse @MaterialDesign sur Twitter.

Suivez-nous pour d'autres contenus et tutoriels de conception sur youtube.com/MaterialDesign.