Sicherstellung miteinander verbundener Design-Tokens mit Stilwörterbuch

Die Kunst miteinander verbundener Design-Token beherrschen

Bei der Arbeit mit Designsystemen ist das Erreichen einer nahtlosen Verbindung zwischen Design-Tokens für die plattformübergreifende Konsistenz von entscheidender Bedeutung. 🧩 Aber was passiert, wenn Ihre Token beim Kompilieren ihre Hierarchie verlieren? Dies ist eine Herausforderung, vor der viele Entwickler stehen.

Stellen Sie sich vor, Sie strukturieren Ihre Design-Tokens sorgfältig in drei Ebenen – primitiv, semantisch und spezifisch – und stellen dann fest, dass sie nach der Verarbeitung mit Style Dictionary ihre gegenseitige Abhängigkeit verlieren. Das Ergebnis? Ihre semantischen und spezifischen Token erhalten am Ende primitive Werte, wodurch die beabsichtigte Hierarchie durchbrochen wird.

Aus eigener Erfahrung bin ich bei der Vorbereitung von Design-Tokens für mehrere Betriebssysteme auf genau dieses Problem gestoßen. Ich brauchte eine Lösung, die die vernetzte Struktur meiner JSON-Dateien beibehält und gleichzeitig sicherstellt, dass die Ausgabe für die Implementierung optimiert ist. 🚀

In diesem Leitfaden erkläre ich Ihnen, wie Sie das Style Dictionary konfigurieren, um diese Beziehungen aufrechtzuerhalten und sicherzustellen, dass Ihre Token wie beabsichtigt miteinander verbunden bleiben. Unabhängig davon, ob Sie neu im Design von Token sind oder ein ähnliches Problem beheben möchten, sind diese Erkenntnisse von unschätzbarem Wert. Lass uns eintauchen! 😊

Beherrschung des hierarchischen Design-Token-Exports

In den bereitgestellten Skripten besteht das Hauptziel darin, die hierarchische Struktur von Design-Tokens über mehrere Ebenen hinweg aufrechtzuerhalten – primitiv, semantisch und spezifisch. Mithilfe des Style Dictionary führen wir benutzerdefinierte Transformationen und Formate ein, um sicherzustellen, dass die Beziehungen zwischen Token während des Exportvorgangs erhalten bleiben. Beispielsweise passt die Methode „registerTransform“ die Art und Weise an, wie Token-Namen generiert werden, indem sie ein strukturiertes Format verwendet, das auf ihren Kategorie-, Typ- und Elementattributen basiert. Diese hierarchische Benennung gewährleistet Klarheit und Konsistenz über alle Token-Zusammenstellungen hinweg. 🛠️

Ein weiteres wichtiges Feature ist die Methode „registerFormat“, die den Export von Tokens in eine strukturierte JSON-Datei ermöglicht. Dieses Format behält die in der ursprünglichen Eingabe definierten Token-Beziehungen bei und erleichtert so die Implementierung auf verschiedenen Plattformen. Stellen Sie sich vor, Sie arbeiten an einem großen Projekt, bei dem semantische Token wie „Primärfarbe“ auf primitive Token wie „blau-500“ verweisen – die Beibehaltung dieser Beziehung während der Kompilierung ist wichtig, um Implementierungsfehler zu vermeiden. Durch die Nutzung dieser Funktionen wird Style Dictionary zu einem leistungsstarken Tool zur Aufrechterhaltung der Token-Integrität.

Im Python-basierten Skript verwenden wir eine rekursive Funktion, um durch verschachtelte Wörterbücher zu navigieren und dabei die Hierarchie während der Transformation von Design-Tokens beizubehalten. Wenn beispielsweise ein „button.primary.background“-Token auf ein „color.primary“-Token verweist, stellt die Funktion sicher, dass diese Beziehungen intakt bleiben. Diese Methode ist besonders nützlich für Teams, die mit Design-Tokens außerhalb des JavaScript-Ökosystems arbeiten müssen, da Python große Flexibilität für die Verarbeitung von JSON-Dateien bietet. 🚀

Schließlich fügt die Integration von Unit-Tests mithilfe von Chai in das JavaScript-Skript eine wichtige Verifizierungsebene hinzu. Diese Tests stellen sicher, dass Token nicht nur korrekt kompiliert werden, sondern auch ihre beabsichtigten Beziehungen beibehalten. Beispielsweise überprüft ein Test, ob semantische Token wie erwartet auf primitive Werte verweisen, während ein anderer sicherstellt, dass alle drei Ebenen – primitiv, semantisch und spezifisch – in der kompilierten Ausgabe vorhanden sind. Mit diesen Skripten und Praktiken können Designsysteme effizient skaliert werden und gleichzeitig die Konsistenz über Plattformen hinweg gewahrt bleiben, wodurch potenzielle Fallstricke vermieden und Entwicklungszeit gespart werden. 😊

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

Bewahrung von Token-Beziehungen über Plattformen hinweg

Ein übersehener Aspekt bei der Arbeit mit Design-Tokens ist die Sicherstellung ihrer Kompatibilität mit verschiedenen Plattformen wie Web, iOS und Android. Obwohl Tools wie Style Dictionary leistungsstark sind, erfordern sie eine sorgfältige Konfiguration, um sicherzustellen, dass Token ihre beabsichtigte Struktur beibehalten. Semantische Token wie „button.primary“ sollten beispielsweise auf primitive Token wie „color.blue“ verweisen, anstatt deren Werte fest zu codieren. Diese Vernetzung ermöglicht es Entwicklern, Änderungen auf der primitiven Ebene vorzunehmen und zu sehen, dass sich Aktualisierungen auf alle abhängigen Token auswirken. 🌐

Um plattformspezifische Kompatibilität zu erreichen, können benutzerdefinierte Transformationen und Formate für jede Ausgabe angepasst werden. Dadurch wird sichergestellt, dass die Token nicht nur konsistent sind, sondern auch für die nativen Stilkonventionen der Plattform optimiert sind. iOS erfordert beispielsweise möglicherweise Token im „.plist“-Format, während Webentwickler JSON- oder CSS-Variablen bevorzugen. Durch die Verwendung dieser speziellen Ausgaben wird die Token-Integrität gewahrt und gleichzeitig die Implementierung für verschiedene Teams optimiert. Durch die Konzentration auf diese Aspekte können Teams skalierbare, plattformunabhängige Designsysteme erstellen. 🚀

Ein weiterer wichtiger Aspekt ist die Integration von Versionskontrolle und kollaborativen Arbeitsabläufen. Durch die Speicherung von Token-Dateien in einem versionierten Repository und deren Kombination mit CI/CD-Pipelines können Aktualisierungen von Tokens automatisch getestet und bereitgestellt werden. Dadurch wird sichergestellt, dass Token ohne manuelles Eingreifen plattformübergreifend auf dem neuesten Stand bleiben, wodurch Fehler minimiert und die Integrität des Designsystems gewahrt bleibt. Eine solche Automatisierung spart nicht nur Zeit, sondern unterstützt auch wachsende Teams beim Umgang mit komplexen Token-Hierarchien. 😊