Garantir des jetons de conception interconnectés avec le dictionnaire de styles

Maîtriser l'art des jetons de conception interconnectés

Lorsque vous travaillez avec des systèmes de conception, il est crucial d’établir une connexion transparente entre les jetons de conception pour assurer la cohérence entre les plates-formes. 🧩 Mais que se passe-t-il lorsque vos tokens perdent leur hiérarchie lors de la compilation ? C’est un défi auquel de nombreux développeurs sont confrontés.

Imaginez structurer méticuleusement vos jetons de conception en trois niveaux (primitif, sémantique et spécifique) pour constater qu'après traitement avec Style Dictionary, ils perdent leur interdépendance. Le résultat ? Vos jetons sémantiques et spécifiques se retrouvent avec des valeurs primitives, brisant la hiérarchie prévue.

D'après ma propre expérience, j'ai rencontré ce problème lors de la préparation de jetons de conception pour plusieurs systèmes d'exploitation. J'avais besoin d'une solution conservant la structure interconnectée de mes fichiers JSON tout en garantissant que la sortie était optimisée pour la mise en œuvre. 🚀

Dans ce guide, je vais vous expliquer comment configurer Style Dictionary pour maintenir ces relations, en garantissant que vos jetons restent aussi interconnectés que prévu. Que vous débutiez dans la conception de jetons ou que vous résolviez un problème similaire, ces informations seront inestimables. Allons-y ! 😊

Maîtriser l’exportation de jetons de conception hiérarchique

Dans les scripts fournis, l'objectif principal est de maintenir la structure hiérarchique des jetons de conception sur plusieurs niveaux : primitif, sémantique et spécifique. À l'aide du Style Dictionary, nous introduisons des transformations et des formats personnalisés pour garantir que les relations entre les jetons sont préservées pendant le processus d'exportation. Par exemple, la méthode `registerTransform` personnalise la façon dont les noms de jetons sont générés, en utilisant un format structuré basé sur leurs attributs de catégorie, de type et d'élément. Cette dénomination hiérarchique garantit la clarté et la cohérence entre les compilations de jetons. 🛠️

Une autre fonctionnalité clé est la méthode `registerFormat`, qui permet l'exportation de jetons dans un fichier JSON structuré. Ce format conserve les relations de jetons telles que définies dans l'entrée d'origine, ce qui facilite leur mise en œuvre sur diverses plates-formes. Imaginez travailler sur un grand projet dans lequel des jetons sémantiques comme « couleur primaire » font référence à des jetons primitifs comme « bleu-500 » : il est essentiel de préserver cette relation lors de la compilation pour éviter les erreurs d'implémentation. En tirant parti de ces fonctionnalités, Style Dictionary devient un outil puissant pour maintenir l’intégrité des jetons.

Dans le script basé sur Python, nous utilisons une fonction récursive pour naviguer dans les dictionnaires imbriqués, préservant ainsi la hiérarchie lors de la transformation des jetons de conception. Par exemple, si un jeton « button.primary.background » fait référence à un jeton « color.primary », la fonction garantit que ces relations restent intactes. Cette méthode est particulièrement utile pour les équipes qui doivent travailler avec des jetons de conception en dehors de l'écosystème JavaScript, car Python offre une grande flexibilité pour le traitement des fichiers JSON. 🚀

Enfin, l'intégration de tests unitaires utilisant Chai dans le script JavaScript ajoute une couche de vérification critique. Ces tests garantissent que les jetons non seulement se compilent correctement, mais conservent également leurs relations prévues. Par exemple, un test vérifie que les jetons sémantiques font référence à des valeurs primitives comme prévu, tandis qu'un autre garantit que les trois niveaux (primitif, sémantique et spécifique) sont présents dans la sortie compilée. Grâce à ces scripts et pratiques, les systèmes de conception peuvent évoluer efficacement tout en maintenant la cohérence entre les plates-formes, en évitant les pièges potentiels et en économisant du temps de développement. 😊

// Import the Style Dictionary package
const StyleDictionary = require('style-dictionary');

// Define the custom transform to maintain token hierarchy
StyleDictionary.registerTransform({
  name: 'custom/name-hierarchy',
  type: 'name',
  transformer: (token) => {
    return [token.attributes.category, token.attributes.type, token.attributes.item]
      .filter(Boolean)
      .join('.');
  }
});

// Define the custom format for interconnected design tokens
StyleDictionary.registerFormat({
  name: 'custom/json-structured',
  formatter: ({ dictionary }) => {
    return JSON.stringify(dictionary.tokens, null, 2);
  }
});

// Configure Style Dictionary with your custom settings
const StyleDictionaryConfig = {
  source: ['tokens//*.json'],
  platforms: {
    web: {
      transformGroup: 'custom/name-hierarchy',
      buildPath: 'build/web/',
      files: [{
        destination: 'tokens.json',
        format: 'custom/json-structured'
      }]
    }
  }
};

// Extend and build the Style Dictionary
const SD = StyleDictionary.extend(StyleDictionaryConfig);
SD.buildAllPlatforms();

import json

# Load design tokens from a JSON file
with open('tokens.json', 'r') as file:
    tokens = json.load(file)

# Function to recursively maintain hierarchy
def maintain_hierarchy(data):
    structured_tokens = {}
    for key, value in data.items():
        if isinstance(value, dict):
            structured_tokens[key] = maintain_hierarchy(value)
        else:
            structured_tokens[key] = value
    return structured_tokens

# Process tokens to maintain hierarchy
structured_tokens = maintain_hierarchy(tokens)

# Export processed tokens to a new JSON file
with open('structured_tokens.json', 'w') as file:
    json.dump(structured_tokens, file, indent=2)

const fs = require('fs');
const { expect } = require('chai');

// Load the compiled tokens
const tokens = JSON.parse(fs.readFileSync('build/web/tokens.json', 'utf-8'));

describe('Design Token Compilation', () => {
  it('should preserve the hierarchy in tokens', () => {
    expect(tokens.semantic).to.have.property('primary');
    expect(tokens.semantic.primary).to.equal(tokens.primitive.colorBlue);
  });

  it('should include all levels of tokens', () => {
    expect(tokens).to.have.property('primitive');
    expect(tokens).to.have.property('semantic');
    expect(tokens).to.have.property('specific');
  });
});

Préserver les relations de jetons sur les plates-formes

Un aspect négligé du travail avec les jetons de conception est de garantir leur compatibilité avec diverses plates-formes, telles que le Web, iOS et Android. Bien que des outils tels que Style Dictionary soient puissants, ils nécessitent une configuration minutieuse pour garantir que les jetons conservent leur structure prévue. Par exemple, les jetons sémantiques comme « button.primary » doivent faire référence à des jetons primitifs comme « color.blue » plutôt que de coder en dur leurs valeurs. Cette interconnectivité permet aux développeurs d'apporter des modifications au niveau primitif et de voir les mises à jour reflétées sur tous les jetons dépendants. 🌐

Pour obtenir une compatibilité spécifique à la plate-forme, des transformations et des formats personnalisés peuvent être adaptés à chaque sortie. Cela garantit que les jetons sont non seulement cohérents, mais également optimisés pour les conventions de style natif de la plateforme. Par exemple, iOS peut exiger des jetons au format « .plist », tandis que les développeurs Web préfèrent les variables JSON ou CSS. L’utilisation de ces sorties spécialisées maintient l’intégrité des jetons tout en rationalisant la mise en œuvre pour diverses équipes. En se concentrant sur ces aspects, les équipes peuvent créer des systèmes de conception évolutifs et indépendants de la plateforme. 🚀

Une autre considération clé consiste à intégrer le contrôle de version et les flux de travail collaboratifs. En stockant les fichiers de jetons dans un référentiel à version contrôlée et en les combinant avec des pipelines CI/CD, les mises à jour des jetons peuvent être testées et déployées automatiquement. Cela garantit que les jetons restent à jour sur toutes les plates-formes sans intervention manuelle, minimisant ainsi les erreurs et préservant l'intégrité du système de conception. Une telle automatisation permet non seulement de gagner du temps, mais prend également en charge la croissance des équipes gérant des hiérarchies de jetons complexes. 😊