Comment les icônes peuvent-elles être implémentées en tant que Design Tokens ?

Bien qu'ils reçoivent moins d'attention lorsqu'on parle de jetons de conception, les jetons d'icône peuvent être très puissants.

Comme tout autre type de jeton, les jetons d'icône doivent être de niveau 1 et de niveau 2, le niveau 3 étant facultatif.

Il y a au moins 2 avantages clés à mentionner en ce qui concerne les jetons d'icône :

1. Une réflexion plus rigoureuse sur le rôle de chaque icône.
2. Ensemble d'icônes plus structuré, évolutif et maintenable.

Imaginons que nous choisissions ces icônes pour le produit que nous développons actuellement.

Comment les nommeriez-vous ?

Je suppose qu'au moins certains d'entre vous choisiraient leur sémantique/rôle/fonction, donc : Accueil, Favoris/J'aime, Corbeille, Modifier et Notifications.

Bien que ce ne soit pas du tout faux, ce n'est pas la façon symbolique de le faire.

Examinons donc les premier et deuxième niveaux de Design Tokens :

1. Jetons de référence

Choisissez d'abord vos armes, les monstres viennent plus tard.

C'est ici que nous établissons nos choix, par exemple :

• Je choisis ce rouge #ff0044 et l'appellerai "color.chills".
• Je choisis Comic Sans et je l'appellerai "font.lovely".

• Je choisis cette maison et je l'appellerai "icon.100".

• Je choisis cette maison et je l'appellerai "icon.house".

Comme vous pouvez le constater, il existe deux "écoles*" pour nommer certains jetons de référence tels que les couleurs ou les icônes.

*En fait, il n'y a pas de telles écoles, je voulais juste donner une touche plus sophistiquée aux deux façons que j'utilise souvent pour nommer les icônes de référence.

L'école « sémantique » :

• Je choisis cette maison et je l'appellerai "icon.house".
• Je choisis ce coeur et je l'appellerai "icon.heart".
• Je choisis cette poubelle et je l'appellerai "icon.trash-can".
• Je choisis ce crayon et je l'appellerai "icon.pencil".
• Je choisis cette cloche et je l'appellerai "icon.bell".

• Je choisis cette maison et je l'appellerai "icon.100".
• Je choisis ce coeur et je l'appellerai "icon.120".
• Je choisis cette corbeille et je l'appellerai "icon.155".
• Je choisis ce crayon et je l'appellerai "icon.156".
• Je choisis cette cloche et je l'appellerai "icon.172".

Avantages et inconvénients

Si « agnostique » est trop abstrait pour communiquer et mémoriser, « sémantique » va à l'encontre de l'agnosticisme racine des jetons de référence (alias jetons de base, primitifs, jetons globaux).

Les jetons de référence sont généralement nommés "font-weight.100" ou "space.400". Nommer les couleurs et les icônes « color.blue » et « icon.house » ne rentrerait pas dans la taxonomie, n'est-ce pas ?

Alors que "icon.100" me permet de jeter n'importe quelle icône à l'intérieur, "icon.house" est 1000 fois plus intuitif à utiliser. Malgré tout, je préfère utiliser la première option, la « agnostique ». Voici pourquoi:

Je veux que mes jetons de référence soient des cases vides. Ce que je mets à l'intérieur ne doit pas façonner la boîte. Si je remplis une de ces cases avec une icône de cœur aujourd'hui, je veux pouvoir la changer en étoile demain sans aucun conflit de nom.

« Signification » commencera au deuxième niveau de jetons, les « jetons système ».

2. Jetons système

C'est ici que les choses deviennent plus intéressantes : les décisions.

Par décisions, j'entends :

• Je décide d'utiliser " rt.icon.house " ou " rt.icon.100 " (rt = jetons de référence) comme icône pour Home , donc " st.icon.home " (st = jetons système).
• Je décide d'utiliser « rt.icon.heart » ou « rt.icon.120 » comme icône pour mes favoris , donc « st.icon.favorite ».
• Je décide d'utiliser " rt.icon.trash-can " ou " rt.icon.155 " comme icône pour Supprimer , donc " st.icon.delete ".
• Je décide d'utiliser " rt.icon.pencil " ou " rt.icon.156 " comme icône pour Edit , donc " st.icon.edit ".
• Je décide d'utiliser « rt.icon.bell » ou « rt.icon.182 » comme icône pour les notifications , donc « st.icon.notifications ».

Il y a de fortes chances que ce que vous utiliserez pour informer les développeurs ou d'autres concepteurs seront les jetons système, les décisions : "Hey John, veuillez utiliser st.icon.close pour le modal".

1. Une réflexion plus rigoureuse sur le rôle de chaque icône.

Maintenant, revenons à mes deux principaux avantages, et après ce petit exercice, vous pouvez voir que le choix et l'affectation des icônes sont passés par un processus extraordinairement précis et méticuleux.

Non seulement vous choisirez avec soin les icônes que vous souhaitez inclure dans votre ensemble, mais vous leur attribuerez également une fonction sémantique unique, réduisant ainsi les redondances et les incohérences et conduisant à des choix et des décisions plus efficaces.

2. Ensemble d'icônes plus structuré, évolutif et maintenable.

Pour expliquer cet avantage, rappelons quelques situations récurrentes :

Problème 1 : Vous n'aimez pas l'icône en forme de croix et vous souhaitez la remplacer par une plus fine.

Solution : Vous ouvrez votre jeton de référence et remplacez/ajustez la forme intérieure.

Résultat : tous les jetons système pointant vers ce jeton de référence seront désormais mis à jour, à savoir :

• Supprimer (pour l'action de supprimer un élément)
• Supprimer (pour l'action de supprimer un élément)
• Fermer (pour l'action de fermer un élément).
• Erreur (accompagnée d'un message d'erreur)

Solution : Vous créez un nouveau jeton de référence « icon.trash », puis mettez à jour le jeton système « icon.delete » pour cibler le nouveau « icon.trash » . Cela gardera Supprimer, Fermer et Erreur intacts.

Résultat 1 : Tout composant qui utilise « icon.delete » affichera désormais une corbeille.

Comme vous pouvez le constater, toute cette flexibilité potentielle vous sera utile à un moment donné. En revanche, le coût des travaux initiaux n'est pas significatif.

Récapituler…

Vous pouvez modifier un rt.icon et affecter tous les jetons du système et des composants ciblant cette icône. EG Je change une icône de cœur en étoile.

Vous pouvez modifier un st.icon et affecter tous les jetons de composant ciblant cet élément sémantique. EG Le "favori" est maintenant représenté par une étoile tandis que le coeur est utilisé pour "j'aime".

Vous pouvez modifier un ct.icon et n'affecter qu'un composant très spécifique. EG Le composant de la carte, en mode sombre, utilisera une étoile pleine au lieu de celle soulignée, utilisée en mode clair, pour "favori".

Jetons Figma

Le plugin Figma Tokens a récemment commencé à prendre en charge les "actifs". Avec lui, vous pouvez facilement stocker votre logo, vos images et votre iconographie dans un référentiel distant et y accéder via le plugin. Cela vous permettra d'ajouter une image à une forme dans Figma en un clic tout en vous assurant qu'un guide de style de vie renseigne son emplacement de stockage.

Pourtant, selon l'équipe Figma Tokens, il est peut-être trop tôt pour utiliser la fonctionnalité car il y a encore du travail en cours :

"Actuellement, la source d'image doit avoir sa propre validation CORS (Cross-Origin Resource Sharing). Certains sites Web l'ont déjà implémenté (par exemple, Unsplash), mais sinon, vous pouvez le mettre derrière un proxy CORS. Plus d'informations sur CORS peuvent être trouvées ici . Nous ajouterons un proxy CORS dans une prochaine version. Voici l'article complet.