Synchroniser le design et le code avec les jetons de design (Design Tokens)

La création d'un système de design au sein d'une startup peut parfois ralentir la vitesse de production. Cela est dû aux tâches répétitives et fastidieuses que doivent effectuer les développeurs pour transcrire en code les modifications apportées par les designers. Automatiser ce processus est essentiel pour permettre à l'équipe de se concentrer sur les problématiques produit fondamentales.

Unifier le langage de design avec les jetons

Ne mappez pas manuellement chaque valeur de vos outils de design vers des variables de code. L'introduction de jetons de design (design tokens) transforme ce lien en données exploitables.

1. Jetons primitifs : définissent les valeurs de couleur brutes, comme blue-500.
2. Jetons sémantiques : précisent l'utilisation réelle, comme action.primary.bg, et font référence aux jetons primitifs ci-dessus.
3. Mapping de variables CSS : stockent les jetons sémantiques sous forme de variables CSS.

Avec cette configuration, si un designer modifie une valeur de couleur, le développeur n'a pas besoin d'intervenir sur le code. Le système met à jour automatiquement les fichiers CSS. Définissez également l'échelle des polices de manière mathématique en saisissant la base (Base) et le ratio (Ratio) dans le panneau de jetons de Penpot. L'utilisation de la formule $Size_{n} = Base \times Ratio^{n}$ permet de maintenir la cohérence du design de manière stricte.

Automatiser la liaison entre Penpot et GitHub

Il est inefficace pour les développeurs de vérifier manuellement les modifications de design. Penpot respecte le standard W3C pour les jetons de design, ce qui permet de mettre en place un pipeline.

1. Générez une clé API Penpot.
2. Créez un fichier penpot-export.config.js à la racine du projet. Configurez-y les jetons à extraire et le répertoire de destination.
3. Installez le paquet @penpot-export/cli puis exécutez la commande npx penpot-export.

Des centaines de valeurs de jetons sont intégrées instantanément dans la base de code, éliminant ainsi les erreurs humaines liées à la saisie manuelle. Des services à grande échelle comme Shopify utilisent ce type de flux de travail basé sur des jetons pour mettre à jour le design instantanément sans modification de code.

Comprendre l'intention des changements de design via les revues Git

Ne communiquez pas les changements de design via des messages Slack ou oralement. Gérez-les avec Git, l'outil le plus familier pour les développeurs.

1. Créez un fichier .github/workflows/design-sync.yml pour automatiser l'extraction des jetons de design.
2. Utilisez l'action peter-evans/create-pull-request pour générer automatiquement une PR incluant les modifications.
3. Lorsqu'une PR est ouverte, vérifiez le message de commit style(tokens) et examinez le diff pendant la revue de code.

Les développeurs comprennent immédiatement pourquoi une valeur a changé grâce à la PR, économisant ainsi le temps passé à demander des explications.

Coexister avec le code existant

Ne cherchez pas à tout remplacer d'un coup. La technique de repli (fallback), qui consiste à mélanger le CSS existant et les nouveaux jetons, est une approche réaliste.

1. Placez les fichiers de jetons générés automatiquement dans le répertoire src/styles/tokens.
2. Utilisez le format var(--new-token, #legacy-value) dans votre CSS actuel.

Les composants pour lesquels les jetons ne sont pas encore définis conservent leurs valeurs d'origine. Vous pouvez moderniser le système progressivement sans craindre de briser l'interface utilisateur. Commencez par connecter un seul petit jeton de couleur au pipeline. C'est la meilleure façon de prévenir dès maintenant une dette technique majeure à l'avenir.