Garantire token di progettazione interconnessi con il dizionario di stile

Padroneggiare l'arte dei token di progettazione interconnessi

Quando si lavora con i sistemi di progettazione, ottenere una connessione perfetta tra i token di progettazione è fondamentale per la coerenza tra le piattaforme. 🧩 Ma cosa succede quando i tuoi token perdono la loro gerarchia durante la compilazione? Questa è una sfida che molti sviluppatori devono affrontare.

Immagina di strutturare meticolosamente i tuoi token di progettazione in tre livelli: primitivo, semantico e specifico, solo per scoprire che dopo l'elaborazione con Style Dictionary, perdono la loro interdipendenza. Il risultato? I tuoi token semantici e specifici finiscono con valori primitivi, rompendo la gerarchia prevista.

Nella mia esperienza, ho riscontrato proprio questo problema durante la preparazione dei token di progettazione per più sistemi operativi. Avevo bisogno di una soluzione che conservasse la struttura interconnessa dei miei file JSON garantendo al tempo stesso che l'output fosse ottimizzato per l'implementazione. 🚀

In questa guida ti spiegherò come configurare Style Dictionary per mantenere queste relazioni, assicurando che i tuoi token rimangano interconnessi come previsto. Che tu sia nuovo nella progettazione di token o nella risoluzione di un problema simile, queste informazioni saranno preziose. Immergiamoci! 😊

Padroneggiare l'esportazione di token di progettazione gerarchica

Negli script forniti, l'obiettivo principale è mantenere la struttura gerarchica dei token di progettazione su più livelli: primitivo, semantico e specifico. Utilizzando il Dizionario di stile, introduciamo trasformazioni e formati personalizzati per garantire che le relazioni tra i token vengano preservate durante il processo di esportazione. Ad esempio, il metodo "registerTransform" personalizza il modo in cui vengono generati i nomi dei token, utilizzando un formato strutturato basato sulla categoria, sul tipo e sugli attributi dell'articolo. Questa denominazione gerarchica garantisce chiarezza e coerenza tra le compilazioni di token. 🛠️

Un'altra caratteristica fondamentale è il metodo "registerFormat", che consente l'esportazione di token in un file JSON strutturato. Questo formato mantiene le relazioni tra token definite nell'input originale, semplificandone l'implementazione in varie piattaforme. Immagina di lavorare su un progetto di grandi dimensioni in cui token semantici come "colore primario" fanno riferimento a token primitivi come "blu-500": preservare questa relazione durante la compilazione è essenziale per prevenire errori di implementazione. Sfruttando queste funzionalità, Style Dictionary diventa un potente strumento per mantenere l'integrità dei token.

Nello script basato su Python, utilizziamo una funzione ricorsiva per navigare attraverso dizionari nidificati, preservando la gerarchia durante la trasformazione dei token di progettazione. Ad esempio, se un token "button.primary. background" fa riferimento a un token "color.primary", la funzione garantisce che queste relazioni rimangano intatte. Questo metodo è particolarmente utile per i team che devono lavorare con token di progettazione al di fuori dell'ecosistema JavaScript, poiché Python offre una grande flessibilità per l'elaborazione dei file JSON. 🚀

Infine, l'integrazione degli unit test utilizzando Chai nello script JavaScript aggiunge un livello critico di verifica. Questi test garantiscono che i token non solo vengano compilati correttamente ma mantengano anche le relazioni previste. Ad esempio, un test verifica che i token semantici facciano riferimento ai valori primitivi come previsto, mentre un altro garantisce che tutti e tre i livelli (primitivo, semantico e specifico) siano presenti nell'output compilato. Con questi script e pratiche, i sistemi di progettazione possono scalare in modo efficiente mantenendo la coerenza tra le piattaforme, evitando potenziali insidie ​​e risparmiando tempo di sviluppo. 😊

// 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');
  });
});

Preservare le relazioni tra token tra piattaforme

Un aspetto trascurato del lavorare con i design token è garantire la loro compatibilità con varie piattaforme, come web, iOS e Android. Sebbene strumenti come Style Dictionary siano potenti, richiedono un'attenta configurazione per garantire che i token mantengano la struttura prevista. Ad esempio, i token semantici come "button.primary" dovrebbero fare riferimento a token primitivi come "color.blue" anziché codificare i loro valori. Questa interconnessione consente agli sviluppatori di apportare modifiche al livello primitivo e di vedere gli aggiornamenti riflessi su tutti i token dipendenti. 🌐

Per ottenere la compatibilità specifica della piattaforma, è possibile personalizzare trasformazioni e formati personalizzati per ciascun output. Ciò garantisce che i token non solo siano coerenti ma anche ottimizzati per le convenzioni di stile nativo della piattaforma. Ad esempio, iOS potrebbe richiedere token in formato `.plist`, mentre gli sviluppatori web preferiscono variabili JSON o CSS. L'utilizzo di questi output specializzati mantiene l'integrità del token semplificando al tempo stesso l'implementazione per team diversi. Concentrandosi su questi aspetti, i team possono creare sistemi di progettazione scalabili e indipendenti dalla piattaforma. 🚀

Un'altra considerazione chiave è l'integrazione del controllo della versione e dei flussi di lavoro collaborativi. Archiviando i file token in un repository con controllo della versione e combinandoli con pipeline CI/CD, gli aggiornamenti ai token possono essere testati e distribuiti automaticamente. Ciò garantisce che i token rimangano aggiornati su tutte le piattaforme senza intervento manuale, riducendo al minimo gli errori e mantenendo l'integrità del sistema di progettazione. Tale automazione non solo fa risparmiare tempo, ma supporta anche i team in crescita che gestiscono complesse gerarchie di token. 😊