Jetons de conception : éléments fondamentaux des systèmes de conception

Les jetons de conception sont les plus petits éléments d’un système de conception et contribuent à fournir des visuels et des expériences cohérents. Voici comment les utiliser de manière stratégique dans votre système de conception.

Dans le monde du développement d’interfaces utilisateur (UI), la cohérence est reine. Les utilisateurs s’attendent souvent à ce qu’un produit soit cohérent et familier, quelle que soit la partie avec laquelle ils interagissent. C’est là qu’interviennent les systèmes de conception : des ensembles de composants, de directives et d’actifs réutilisables qui vous aident à offrir une expérience utilisateur unifiée sur l’ensemble d’un produit ou d’une suite de produits.

Les jetons de conception sont des éléments fondamentaux pour concevoir des systèmes qui offrent une expérience utilisateur unifiée et cohérente dans les différentes parties d’un produit. Dans cet article, nous examinerons ce que sont les jetons de conception, pourquoi ils sont cruciaux et comment ils peuvent être efficacement mis en œuvre pour maintenir la cohérence dans l’ensemble d’un produit.

Que sont les jetons de conception ?

Les jetons de conception sont essentiellement les les plus petites parties d’un système de conception. Ce sont des entités nommées qui stockent des attributs de conception visuelle spécifiques (comme les couleurs, la typographie, l’espacement, etc.) dans un système de conception. Ces jetons agissent comme un pont entre la conception et le développement, fournissant une source unique de vérité pour ces attributs. Cela signifie qu’au lieu de coder en dur les valeurs directement dans notre code, nous référençons des jetons de conception, qui peuvent être mis à jour de manière centralisée.

Par exemple, un système de conception peut définir un ensemble de jetons de couleur :

// Colors
$kendo-color-primary: #ff6358;
$kendo-color-secondary: #666666;
$kendo-color-tertiary: #03a9f4;
$kendo-color-info: #0058e9;
$kendo-color-success: #37b400;
$kendo-color-warning: #ffc000;

En plus des couleurs, les jetons de conception peuvent également définir d’autres aspects de la conception, tels que la taille des polices, les familles de polices, la hauteur des lignes, l’espacement, etc.

// Font sizes
$kendo-font-size: 0.875rem;
$kendo-font-size-xxs: 0.5rem;
$kendo-font-size-xs: 0.625rem;
$kendo-font-size-sm: 0.75rem;
$kendo-font-size-md: $kendo-font-size;
$kendo-font-size-lg: 1rem;
$kendo-font-size-xl: 1.25rem;

Dans les exemples ci-dessus, nous définissons nos jetons de conception comme Variables insolentes en supposant que le préprocesseur Sass est utilisé dans le projet. Nous pourrions également utiliser Propriétés personnalisées CSSqui offrent des avantages similaires en termes de maintenabilité et d’évolutivité dans les projets Web modernes.

:root {
  --kendo-color-primary: #ff6358;
  --kendo-color-secondary: #666666;
  --kendo-color-tertiary: #03a9f4;
  --kendo-color-info: #0058e9;
  --kendo-color-success: #37b400;
  --kendo-color-warning: #ffc000;

  --kendo-font-size: 0.875rem;
  --kendo-font-size-xxs: 0.5rem;
  --kendo-font-size-xs: 0.625rem;
  --kendo-font-size-sm: 0.75rem;
  --kendo-font-size-md: 0.875rem;
  --kendo-font-size-lg: 1rem;
  --kendo-font-size-xl: 1.25rem;
}

Lorsqu’il s’agit d’utiliser ces jetons dans un projet, les développeurs disposent de différentes méthodes pour les référencer dans leur code. L’un des moyens les plus courants d’accéder à ces jetons de conception en CSS consiste à utiliser le était() fonction pour récupérer des propriétés personnalisées. Cette méthode est particulièrement bénéfique pour maintenir une conception cohérente dans une application à grande échelle et facilite la réalisation de modifications globales.

Par exemple, dans un fichier CSS, nous pouvons appliquer des jetons de conception à des éléments comme celui-ci :

.button {
  background-color: var(--kendo-color-primary);
  padding: var(--kendo-font-size-sm) var(--kendo-font-size-md);
  font-size: var(--kendo-font-size);
}

.header {
  color: var(--kendo-color-info);
  font-size: var(--kendo-font-size-lg);
}

Ici le var() La fonction est utilisée pour insérer la valeur d’une propriété personnalisée là où elle est référencée. Cela nous permet de changer facilement de thème ou d’ajuster les styles en modifiant simplement les valeurs de ces jetons au niveau racine.

Différents types de jetons de conception

Les jetons de conception peuvent être étendus, englobant une variété de types qui répondent à différents aspects d’un système de conception. Le Système de conception de progrès présente une structure utile de jetons de conception allant des valeurs globales à des valeurs très spécifiques adaptées à des composants particuliers.

Jetons de conception globale

Les jetons de conception globale sont des valeurs fondamentales qui constituent la pierre angulaire d’un système de conception. Ils représentent des jetons qui sont :

• Indépendants du contexte, ce qui signifie qu’ils ne se rapportent pas à un composant ou à un contexte spécifique.
• Générique, permettant de les réutiliser dans différentes parties de la conception.

Par exemple, une palette de couleurs peut inclure des jetons tels que $purple-100, $purple-200, $purple-300, etc., établissant un système de couleurs évolutif et réutilisable. Bien que ces jetons puissent être utilisés directement, ils sont souvent utilisés comme éléments de base et sont référencés par d’autres jetons de conception.

Jetons de conception d’alias

Les jetons de conception d’alias sont une étape plus spécifique que les jetons globaux. Ils sont nommés de manière à suggérer leur utilisation prévue, ce qui permet d’appliquer un style cohérent aux différents éléments de l’interface utilisateur tout en conservant des liens clairs et significatifs avec leur fonction au sein du système de conception.

Par exemple, $kendo-color-info peut être spécifiquement utilisé pour des messages d’information ou des alertes, signalant son objectif par son nom.

Jetons de conception spécifiques aux composants

Les jetons de conception spécifiques aux composants vont encore plus loin dans la spécificité. Ces jetons sont directement liés à des composants particuliers au sein du système de conception, définissant des propriétés telles que les couleurs, les bordures et la typographie spécifiques à ce composant.

Par exemple, le $kendo-button-border peut définir le style de bordure pour tous les boutons d’un système. Ce niveau de détail permet à chaque composant de se comporter et d’apparaître comme prévu, quel que soit l’endroit où il est utilisé dans l’application.

Jetons de conception spécifiques à une application

Les jetons de conception spécifiques à une application sont conçus pour répondre aux besoins particuliers de projets individuels ou d’une série de projets connexes. Ils offrent la flexibilité nécessaire pour adapter le système de conception global aux exigences fonctionnelles spécifiques, aux préférences esthétiques ou aux directives de la marque. Ils englobent souvent plusieurs types de biens :

• Jetons de conception de couleur : Ceux-ci sont utilisés pour établir une identité de couleur spécifique à une application, en s’adaptant à divers éléments de l’interface utilisateur tels que les arrière-plans, le texte et les bordures pour assurer la cohérence visuelle et l’alignement de la marque.
• Jetons de conception de typographie : Ces jetons gèrent les détails typographiques adaptés à des applications spécifiques, équilibrant la lisibilité et le style, notamment en définissant les tailles, les poids et l’espacement du texte dans différents composants de l’interface utilisateur.
• Jetons de conception d’espace : Bien que de nombreux outils de conception ne prennent pas encore en charge les jetons d’espace directement dans leurs éditeurs d’interface utilisateur, ils sont cruciaux pour définir le rythme d’espacement au sein d’une application. Ces jetons aident à maintenir des marges et des remplissages cohérents qui s’alignent sur les principes de conception spatiale et structurelle.
• Jetons de conception d’effet : Utilisés pour ajouter de la profondeur et de la dynamique grâce à des effets visuels tels que des ombres, des flous et des superpositions, ces jetons contribuent à améliorer l’attrait esthétique et à permettre à l’utilisateur de se concentrer sur des éléments spécifiques de l’application.

Bonnes pratiques pour la mise en œuvre de jetons de conception

La mise en œuvre de jetons de conception de certaines manières peut être utile pour maximiser leurs avantages et garantir la cohérence et l’évolutivité d’un système de conception. S’appuyant sur les lignes directrices fournies par le Système de conception de progrèsvoici quelques choses pratiques à faire et à ne pas faire lorsque vous travaillez avec des jetons de conception.

Utilisez les jetons de conception globale avec prudence

Les jetons de conception globale servent de fondement à un langage de conception. Ils sont polyvalents et peuvent être appliqués à différentes parties de votre projet sans être liés à des composants spécifiques de l’interface utilisateur.

Faire:

• Utilisez les jetons de conception globale comme éléments fondamentaux de votre système de conception. Ils sont idéaux pour établir des couleurs, une typographie et un espacement de base communs à plusieurs composants.
• Tenez compte de la large applicabilité de ces jetons lorsque vous les intégrez dans vos conceptions. Ils devraient améliorer la cohérence sans restreindre la flexibilité.

Ne le faites pas:

• Surutilisez les jetons globaux pour des applications spécifiques où les jetons spécifiques aux composants sont plus appropriés. S’appuyer trop sur des jetons globaux peut conduire à un manque de spécialisation dans vos conceptions, qui pourrait ne pas répondre aux besoins nuancés de composants individuels.

Choisissez les bons jetons spécifiques aux composants

Les jetons de conception spécifiques aux composants sont adaptés à des éléments spécifiques de l’interface utilisateur, tels que des boutons, des champs de saisie ou des barres de navigation. Ils contribuent à donner aux composants une apparence et un comportement cohérents dans les différentes parties de votre application.

Faire:

• Utilisez des jetons spécifiques aux composants pour définir des propriétés uniques à des composants particuliers. Cela peut inclure l’épaisseur de la bordure des boutons, les couleurs de l’état de survol ou une typographie spécifique pour les titres d’un composant.
• Sélectionnez les jetons en fonction de leur utilisation prévue, car leurs noms fournissent souvent des indications claires sur leur application.

Ne le faites pas:

• Remplacez les jetons spécifiques aux composants par des jetons globaux si les jetons spécifiques offrent un meilleur ajustement. Une mauvaise application des jetons peut entraîner des incohérences et des comportements inattendus dans l’interface utilisateur.
• Utilisez des jetons destinés à un composant dans un autre, à moins qu’ils ne soient explicitement conçus pour être inter-composants. Cela permet de maintenir l’intégrité et le but de chaque décision de conception.

Implémenter stratégiquement des jetons de conception spécifiques à une application

Les jetons de conception spécifiques à une application sont conçus pour répondre aux exigences stylistiques uniques d’un projet ou d’une suite de projets particulier. Ces jetons permettent la personnalisation des conceptions pour s’aligner sur des directives de marque et des exigences fonctionnelles spécifiques.

Faire:

• Créez et utilisez des jetons spécifiques à une application pour répondre aux défis de conception et aux exigences uniques de votre projet. Ceux-ci peuvent inclure des schémas de couleurs spécifiques à des fins de marque, des paramètres de typographie personnalisés ou un espacement unique qui s’aligne sur la présentation globale de l’application.
• Assurez-vous que ces jetons sont clairement documentés et compris par les équipes de conception et de développement. Cette clarté facilitera les mises à jour et les modifications à mesure que les exigences du projet évoluent.

Ne le faites pas:

• Ignorez les directives plus larges du système de conception lors de la création de jetons spécifiques à une application. Bien qu’il soit important de personnaliser, cela ne doit pas se faire au détriment de la cohérence globale de la conception et des normes d’utilisation.

Conclure

En conclusion, les jetons de conception ne sont pas seulement des outils permettant de maintenir la cohérence visuelle : ils constituent des atouts stratégiques dans un système de conception qui améliorent la collaboration entre les équipes, alignent les éléments de conception détaillés avec des récits de marque plus larges et s’adaptent gracieusement aux exigences en constante évolution des projets numériques modernes. En tant que telle, une mise en œuvre et une gestion appropriées des jetons de conception sont essentielles pour toute organisation qui valorise la qualité et la cohérence de la conception dans l’ensemble de sa suite de produits.

Pour plus de détails, explorez les directives utiles fournies par le Progress Design System et leur documentation sur Jetons de conception.