Zorgen voor onderling verbonden ontwerptokens met stijlwoordenboek

Beheersing van de kunst van onderling verbonden ontwerptokens

Bij het werken met ontwerpsystemen is het bereiken van een naadloze verbinding tussen ontwerptokens cruciaal voor consistentie tussen platforms. 🧩 Maar wat gebeurt er als je tokens hun hiërarchie verliezen tijdens het compileren? Dit is een uitdaging waar veel ontwikkelaars mee te maken hebben.

Stel je voor dat je je ontwerptokens minutieus structureert in drie niveaus (primitief, semantisch en specifiek) om er vervolgens achter te komen dat ze na verwerking met Style Dictionary hun onderlinge afhankelijkheid verliezen. Het resultaat? Je semantische en specifieke tokens eindigen met primitieve waarden, waardoor de beoogde hiërarchie wordt doorbroken.

Uit eigen ervaring kwam ik dit probleem tegen bij het voorbereiden van ontwerptokens voor meerdere besturingssystemen. Ik had een oplossing nodig die de onderling verbonden structuur van mijn JSON-bestanden behield en er tegelijkertijd voor zorgde dat de uitvoer geoptimaliseerd was voor implementatie. 🚀

In deze handleiding laat ik u zien hoe u Style Dictionary configureert om deze relaties te onderhouden, zodat u ervoor zorgt dat uw tokens zo onderling verbonden blijven als bedoeld. Of u nu nieuw bent bij het ontwerpen van tokens of het oplossen van een soortgelijk probleem, deze inzichten zullen van onschatbare waarde zijn. Laten we erin duiken! 😊

Beheersen van hiërarchische ontwerptokenexport

In de meegeleverde scripts is het primaire doel om de hiërarchische structuur van ontwerptokens op meerdere niveaus te behouden: primitief, semantisch en specifiek. Met behulp van Style Dictionary introduceren we aangepaste transformaties en formaten om ervoor te zorgen dat de relaties tussen tokens behouden blijven tijdens het exportproces. De methode 'registerTransform' past bijvoorbeeld aan hoe tokennamen worden gegenereerd, met behulp van een gestructureerd formaat op basis van hun categorie-, type- en itemkenmerken. Deze hiërarchische naamgeving zorgt voor duidelijkheid en consistentie bij tokencompilaties. 🛠️

Een ander belangrijk kenmerk is de `registerFormat`-methode, die de export van tokens naar een gestructureerd JSON-bestand mogelijk maakt. Dit formaat behoudt de tokenrelaties zoals gedefinieerd in de oorspronkelijke invoer, waardoor het eenvoudiger wordt om deze op verschillende platforms te implementeren. Stel je voor dat je aan een groot project werkt waarbij semantische tokens zoals 'primaire kleur' ​​verwijzen naar primitieve tokens zoals 'blue-500'. Het behouden van deze relatie tijdens het compileren is essentieel om implementatiefouten te voorkomen. Door gebruik te maken van deze functies wordt Style Dictionary een krachtig hulpmiddel voor het behouden van de tokenintegriteit.

In het op Python gebaseerde script gebruiken we een recursieve functie om door geneste woordenboeken te navigeren, waarbij de hiërarchie behouden blijft tijdens de transformatie van ontwerptokens. Als een "button.primary.background"-token bijvoorbeeld verwijst naar een "color.primary"-token, zorgt de functie ervoor dat deze relaties intact blijven. Deze methode is vooral handig voor teams die moeten werken met ontwerptokens buiten het JavaScript-ecosysteem, omdat Python grote flexibiliteit biedt voor het verwerken van JSON-bestanden. 🚀

Ten slotte voegt de integratie van unit-tests met behulp van Chai in het JavaScript-script een kritische verificatielaag toe. Deze tests zorgen ervoor dat tokens niet alleen correct worden samengesteld, maar ook hun beoogde relaties behouden. Eén test verifieert bijvoorbeeld dat semantische tokens naar primitieve waarden verwijzen zoals verwacht, terwijl een andere test ervoor zorgt dat alle drie de niveaus (primitief, semantisch en specifiek) aanwezig zijn in de gecompileerde uitvoer. Met deze scripts en werkwijzen kunnen ontwerpsystemen efficiënt worden geschaald, terwijl de consistentie tussen platforms behouden blijft, potentiële valkuilen worden vermeden en ontwikkeltijd wordt bespaard. 😊

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

Behoud van tokenrelaties op verschillende platforms

Een aspect dat over het hoofd wordt gezien bij het werken met ontwerptokens is het garanderen van hun compatibiliteit met verschillende platforms, zoals internet, iOS en Android. Hoewel tools als Style Dictionary krachtig zijn, vereisen ze een zorgvuldige configuratie om ervoor te zorgen dat tokens hun beoogde structuur behouden. Semantische tokens zoals "button.primary" moeten bijvoorbeeld verwijzen naar primitieve tokens zoals "color.blue" in plaats van hun waarden hard te coderen. Deze onderlinge verbondenheid stelt ontwikkelaars in staat wijzigingen op het primitieve niveau aan te brengen en updates weerspiegeld te zien op alle afhankelijke tokens. 🌐

Om platformspecifieke compatibiliteit te bereiken, kunnen aangepaste transformaties en formaten voor elke uitvoer worden aangepast. Dit zorgt ervoor dat de tokens niet alleen consistent zijn, maar ook geoptimaliseerd zijn voor de native stijlconventies van het platform. iOS heeft bijvoorbeeld tokens in een `.plist`-formaat nodig, terwijl webontwikkelaars de voorkeur geven aan JSON- of CSS-variabelen. Door deze gespecialiseerde output te gebruiken, blijft de tokenintegriteit behouden en wordt de implementatie voor diverse teams gestroomlijnd. Door zich op deze aspecten te concentreren, kunnen teams schaalbare, platformonafhankelijke ontwerpsystemen creëren. 🚀

Een andere belangrijke overweging is de integratie van versiebeheer en samenwerkingsworkflows. Door tokenbestanden op te slaan in een versiebeheerde repository en deze te combineren met CI/CD-pijplijnen, kunnen updates van tokens automatisch worden getest en geïmplementeerd. Dit zorgt ervoor dat tokens zonder handmatige tussenkomst up-to-date blijven op alle platforms, waardoor fouten worden geminimaliseerd en de integriteit van het ontwerpsysteem behouden blijft. Dergelijke automatisering bespaart niet alleen tijd, maar ondersteunt ook groeiende teams die omgaan met complexe tokenhiërarchieën. 😊