Présentation des jetons de conception
Que sont les jetons de conception ?
Les jetons de conception sont simplement des décisions de conception exprimées sous la forme de noms et de valeurs associés.
Il s'agit de toutes les valeurs nécessaires à la construction et à la maintenance d'un système de conception (espacement, couleur, typographie, animation, etc.) représentées sous forme de données. Ils sont utilisés à la place de valeurs codées en dur afin de garantir la flexibilité et l'unité de toutes les expériences produit.
Par exemple, un bouton qui utilise le jeton de couleur jds.color.background.brand sera cohérent avec tous les autres éléments qui utilisent ce jeton ou un jeton associé. Si vous modifiez le thème pour utiliser une couleur de marque différente, tous ces éléments seront automatiquement mis à jour.
Les jetons de conception sont un langage partagé et une source unique de vérité pour les thèmes d'un système de conception pour les concepteurs et les développeurs.
Que sont les thèmes ?
Les jetons de conception offrent une façon flexible de définir un thème pour notre système de conception. Un thème est un ensemble de jetons combinés pour un aspect ou un style spécifique, souvent à des fins de valorisation de la marque.
Un nouveau thème ou de nouveaux styles peuvent être créés en modifiant uniquement les valeurs d'une poignée (5 à 10) de jetons.
Pourquoi les jetons de conception sont-ils précieux ?
Collaboration. Les jetons de conception permettent aux concepteurs, aux développeurs et aux équipes multidisciplinaires de collaborer, de parler le même langage et de rester synchronisés entre les outils et les langues.
Contrôle. Les jetons de conception facilitent la modification d'éléments spécifiques de l'interface utilisateur, tels que des boutons, sans impact sur le reste de votre travail de conception. Avec les jetons de conception, vous pouvez modifier la valeur d'un jeton, et la mise à jour se propagera à toutes les instances du système.
Cohérence. Les jetons de conception permettent d'atteindre la parité entre les phases de conception et de développement. Les concepteurs n'ont pas à se soucier de concevoir deux fois. Les développeurs n'ont pas à se soucier d'implémenter deux fois.
Comment lire les noms des jetons de conception
Les noms des jetons sont constitués de descripteurs qui décrivent ensemble comment utiliser le jeton.
- Système : abréviation de Jutro Design System. Différencie nos jetons pour éviter les conflits avec les jetons existants des clients.
- Catégorie : type d'attribut de conception visuelle, tel que la couleur, la taille ou l'élévation.
- Propriété : partie de l'interface utilisateur à laquelle le jeton sera appliqué, telle que l'arrière-plan, la bordure ou le texte.
- Modificateur : détails supplémentaires sur la façon dont le jeton sera utilisé, tels que son rôle, sa proéminence ou son état d'interaction. Certains jetons ne nécessitent pas de modificateur.
Le format des noms de jeton peut varier en fonction de l'outil et de l'environnement. Toutefois, les descripteurs de jeton restent toujours les mêmes.
Dans la plupart des cas, les parties d'un nom de jeton sont séparées par une notation par points. La notation par points nous permet d'organiser les noms de jeton de conception pour faciliter l'utilisation dans une structure arborescente. Cela inclut l'utilisation d'outils de création tels que Tokens Studio pour Figma.
Les tirets sont utilisés pour les noms propres à mots multiples, tels que les composants, et sur les feuilles des arborescences lorsqu'il n'est pas logique d'ajouter un nouveau niveau d'imbrication. Le processus de transformation remplace tous les points par des tirets.
De la conception au code
Les jetons de conception sont créés à l’aide de la notation par points (par exemple, jds.color.background.brand). Au cours du processus de transformation, ils sont convertis en variables CSS (par exemple, --JDS-COLOR-BACKGROUND-BRAND) que l’application utilise pour afficher les styles.
Bien que la plupart des variables CSS commençant par --JDS- soient transformées directement à partir de jetons de conception, certaines peuvent exister dans la base de code en tant que variables « de couverture » ou « internes » à des fins de développement. Étant donné que la présence d’une variable dans l’inspecteur du navigateur ne garantit pas l'existence d'un jeton de conception correspondant dans les fichiers source, reportez-vous toujours à la liste des jetons de conception comme source de référence pour les propriétés personnalisables.
Comment trouver et utiliser des jetons de conception
Recherchez un sous-ensemble de jetons et la description de leur utilisation dans la liste des jetons.
Meilleures pratiques
Choisissez des jetons en fonction de la signification, du contexte et de l'intention, plutôt que de valeurs spécifiques.
