1. Introduction
Dernière mise à jour : 21/09/2021
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.
Préparez-vous à découvrir les nouvelles fonctionnalités de couleurs dynamiques introduites avec Material You. Dans cet atelier, vous allez créer des palettes de couleurs dynamiques pour découvrir comment fonctionne le système de couleurs, les concepts qui permettent de créer des palettes de couleurs accessibles et les méthodes qui vous aident à visualiser votre application avec des couleurs dynamiques à l'aide des derniers outils de conception.
Points abordés
- Nouveautés concernant les couleurs Material Design
- Appliquer une couleur générée par l'utilisateur à votre application
- Outils d'aide
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
Prérequis
2. Premiers pas
Configuration
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 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 Visualizing dynamic color in your app with Material Design (Visualiser les couleurs dynamiques dans votre application avec Material Design) ou recherchez-le dans la communauté Figma. Cliquez sur Duplicate (Dupliquer) en haut à droite pour copier ce fichier dans vos dossiers.
Mettre en page le fichier
Explorez le fichier. Vous remarquerez que le fichier est exhaustif et 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. Ces sections et exercices sont séquentiels. Vous devez les effectuer les uns après les autres.
Cet atelier de programmation vous accompagnera tout au long de ces concepts et exercices avec des explications détaillées. Nous vous recommandons de suivre l'atelier en parallèle pour en savoir plus sur les nouvelles fonctionnalités Material You.
À partir du plan de travail Intro, des boutons relient les plans de travail dans l'ordre. Accédez au lien en cliquant 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. Concepts de couleur
Qu'est-ce que la couleur dynamique ?
Material You repense la couleur pour offrir une expérience plus individualisée. Grâce à l'extraction dynamique des couleurs, la gamme d'expériences de couleur possibles est beaucoup plus large.
La couleur dynamique est un élément clé de Material You. Un algorithme extrait des couleurs personnalisées à partir du fond d'écran d'un utilisateur pour les appliquer à ses applications et à l'UI du système.
Luminance
Le système d'extraction de couleur dynamique est conçu pour s'adapter aux contextes imprévisibles. Pour gérer les ratios de contraste dans différents contextes d'affichage, les niveaux de luminance sont les attributs clés qui permettent de combiner correctement les couleurs, même si l'équipe produit ne teste pas chaque combinaison spécifique.
Les éléments dont la luminance est similaire n'offrent pas un contraste suffisant pour garantir une bonne lisibilité, tandis que ceux qui présentent des valeurs de luminance différentes sont plus faciles à distinguer.
Palettes tonales
Une palette tonale est la traduction d'une teinte (une couleur dynamique extraite) en un spectre de tons associés. La traduction d'une couleur en treize tons permet d'appliquer un groupe de gammes tonales, appelé palette tonale, dans différents contextes, des éléments individuels d'un composant aux thèmes d'application entiers.
Couleur traduite en une gamme tonale.
4. Extraire des couleurs
Du seed au schéma
Voyons comment les couleurs dynamiques fonctionnent avec Material Theme Builder.
- Ouvrez Material Theme Builder. Si vous avez sélectionné Dynamique, déposez une image ou sélectionnez-en une dans l'explorateur de fichiers. Notez que la couleur de départ est mise à jour en fonction de l'image.
- Les valeurs de couleur sont extraites d'un fond d'écran et un "type" leur est attribué. Ce type détermine la relation entre la couleur et les autres couleurs d'un schéma. Ces "couleurs clés" (à droite) ont été mises à jour pour refléter ces valeurs.
- Elles sont ensuite traduites en palettes tonales basées sur la luminance, ce qui génère cinq gammes de couleurs avec des tons allant du clair au foncé. Les palettes tonales sont libellées comme telles dans la sortie de couleur.
- À partir des cinq plages tonales, des tons spécifiques (basés sur la luminance) sont insérés dans les rôles prédéfinis qui composent un schéma. Les couleurs sont associées à un schéma via des jetons de conception.
Rôles de couleur tertiaires créés à partir d'une gamme tonale tertiaire et mappés aux composants.
5. Thèmes et jetons
Les jetons de conception permettent de garantir la flexibilité et la cohérence d'un produit. Ils permettent, par exemple, aux concepteurs d'attribuer un rôle de couleur à un élément d'une UI, plutôt qu'une valeur définie. Les jetons servent de pont entre le rôle attribué à un élément et la valeur de couleur choisie pour un rôle. Avec l'introduction des couleurs dynamiques, il est plus fondamental de concevoir en fonction du rôle d'une couleur plutôt que de la couleur spécifique.
Les thèmes contiennent des jetons Material Design pour la couleur et la typographie. Ils permettent de s'assurer que les conceptions et le code ont une source unique de vérité pour représenter la référence, ainsi que des palettes générées par l'utilisateur et des valeurs personnalisées.
Dans Figma, le plug-in génère ces jetons en tant que styles. Cela signifie que si vous utilisez les styles générés, vous utiliserez les jetons MD.
Les couleurs d'une palette tonale sont mappées à un schéma clair ou sombre à l'aide de jetons de conception.
Le système de mappage attribue une tonalité à chaque élément d'un composant.
Jetons de configuration
Pour appliquer une couleur dynamique à vos conceptions, nous devons définir la maquette sur les jetons du thème Material existant.
- Définissons tous les jetons (styles Figma) de la mise en page à droite pour utiliser ce thème en sélectionnant le frame de la mise en page, puis en cliquant sur swap (Échanger). Le préfixe de style est mis à jour dans les couleurs de sélection.
Cliquez sur "Échanger" pour mettre à jour le thème connecté utilisé dans la conception sélectionnée.
- Déposez une image ou sélectionnez-en une dans l'explorateur de fichiers. Les valeurs de la maquette prendront la couleur dynamique extraite de l'image.
- Cliquez sur le bouton de lecture aléatoire pour randomiser la couleur de départ à partir de laquelle extrapoler au lieu de l'extraire de l'image. Il s'agit d'une autre façon de voir rapidement comment les couleurs dynamiques peuvent affecter vos maquettes.
Cliquez sur le bouton de lecture aléatoire pour randomiser la couleur de départ.
Si vous ouvrez le plug-in sans thème, un écran de configuration s'affiche pour vous aider à démarrer. L'option "Get started" (Commencer) génère la ligne de base par défaut "material-theme" en tant que groupe de styles Figma à connecter à vos maquettes ou à utiliser avec le kit Material Design.
6. Appliquer à l'UI
Les mises en page fournies ont été créées avec le kit Material Design qui utilise des jetons Material Design, mais il existe quelques éléments personnalisés qui ne sont pas mappés.
- Sélectionnez les fiches d'articles. Dans le remplissage, définissez le style (icône à quatre points) sur material-theme/surface. (Vous pouvez également rechercher une surface.)
- De la même manière, sélectionnez le type dans les cartes et définissez-le sur on-surface (sur la surface) et cochez les cases pour le primaire.
Styles Figma utilisés dans les cartes de la conception.
Nous allons maintenant créer des maquettes supplémentaires pour parcourir le reste des schémas.
Créer des thèmes et itérer
Nous avons maintenant entièrement connecté une maquette pour visualiser la couleur dynamique, mais nous pouvons également créer plusieurs thèmes et les échanger sur des maquettes distinctes pour visualiser une gamme de couleurs dynamiques à la fois.
- Dans la fenêtre modale du plug-in, cliquez sur le menu déroulant et sélectionnez Add new theme (Ajouter un thème).
- Créez un nom de thème unique, puis cliquez sur Créer un thème. De nouveaux diagrammes de couleurs seront également générés pour chaque thème créé.
Ajout d'un thème via le menu déroulant.
- Ajoutez une image ou mélangez la couleur de départ.
- Dans la fenêtre modale du plug-in, sélectionnez une maquette (composant de l'UI de l'application), puis cliquez sur swap (permuter). Les valeurs de style seront alors mises à jour pour correspondre au thème actuel affiché dans le menu déroulant.
- Dupliquez la maquette (CMD+D).
Cliquez sur "Échanger" pour mettre à jour le thème connecté utilisé dans la conception sélectionnée.
- Répétez les étapes 1 à 5.
Vous disposez maintenant de plusieurs conceptions avec différentes itérations de couleurs dynamiques.
7. Félicitations
Bravo pour avoir appris et appliqué la couleur dynamique ! Material Theme Builder est là pour vous aider à utiliser plus facilement les couleurs dans Material Design en visualisant les couleurs dynamiques, en créant des thèmes personnalisés et en exportant vers le code.
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.