UI et produits numériques · Guide pratique
Relier un export de design tokens à la version de la maquette
Délimitez le jeu de tokens réellement livré : couleurs, espacements ou autres valeurs utiles au produit.
Préparer les pièces et leurs relations
Attribuez des noms stables et explicitez les unités. Distinguez la valeur brute de son rôle, par exemple couleur de surface ou texte secondaire. Notez le format de l’export et l’outil qui le produit, sans supposer qu’un JSON issu d’un outil peut être importé tel quel partout.
Effectuer le contrôle ciblé
Pour chaque token, rattachez une valeur à un exemple dans la maquette de référence. Vérifiez les alias, les modes et les exceptions. Comparez une petite sélection avec le développeur avant d’étendre le contrôle au jeu complet. Une couleur identique peut avoir plusieurs rôles ; conservez cette distinction lorsque les rôles doivent ensuite évoluer séparément. Un changement de valeur doit pointer vers une nouvelle version de l’export.
Donner un contexte vérifiable à la revue
Délimitez les écrans et composants concernés par la remise, puis indiquez les contenus et environnements de comparaison. Gardez les décisions acceptées séparées des questions ouvertes. Une référence de design reste utile lorsqu’elle permet à l’équipe de reproduire un contrôle précis ; elle devient ambiguë si les données, les états ou le contexte changent sans être notés. Consignez ce périmètre dans la fiche jointe.
La table proposée est une convention de projet, sans prétention de conformité à un format universel. Aucun validateur, importateur ou connecteur de tokens DesignLockr n’est supposé.
| Pièce ou zone fictive | Rôle dans le dossier | Contrôle à effectuer |
|---|---|---|
| surface-default | Couleur fictive #F7F4ED | Écran accueil r07 |
| space-card | Espacement fictif 16 px | Carte standard r07 |
| text-muted | Couleur fictive #5C625E | Sous-titre r07 |
EXEMPLE FICTIF
Cas fictif : surface-default
Le produit fictif Aster reçoit un export où un espacement est exprimé en nombre sans unité. L’équipe ajoute l’unité convenue, vérifie une carte témoin et crée l’export r08 relié à la maquette correspondante.
- Créer une fiche de contrôle pour surface-default en conservant l’état de référence.
- Examiner space-card selon le contrôle indiqué, puis noter l’écart et la prochaine action.
- Rattacher text-muted à l’inventaire retenu et demander le retour précis du destinataire.
Avant de poursuivre
- Identifier surface-default et sa version sans écraser la référence précédente.
- Contrôler space-card selon la consigne notée dans le registre.
- Relier text-muted à l’usage et au destinataire prévus.
- Marquer les points ouverts et la personne chargée de les résoudre.
- Conserver le résultat observé et les limites du contrôle effectué.
Les questions utiles
Le fichier de tokens prouve-t-il l’implémentation ?
Il documente les valeurs remises. Vérifiez séparément leur consommation dans le code et le rendu du produit, avec son environnement de test.