Sikring af sammenkoblede designtokens med stilordbog

Mestring af kunsten med sammenkoblede designtokens

Når du arbejder med designsystemer, er det afgørende for ensartethed på tværs af platforme at opnå en sømløs forbindelse mellem designtokens. 🧩 Men hvad sker der, når dine tokens mister deres hierarki under kompilering? Dette er en udfordring mange udviklere står over for.

Forestil dig at strukturere dine design-tokens omhyggeligt i tre niveauer – primitiv, semantisk og specifik – kun for at finde ud af, at efter behandling med Style Dictionary mister de deres indbyrdes afhængighed. Resultatet? Dine semantiske og specifikke tokens ender med primitive værdier, der bryder det tilsigtede hierarki.

I min egen erfaring stødte jeg på netop dette problem, mens jeg forberedte designtokens til flere operativsystemer. Jeg havde brug for en løsning, der bibeholdt den indbyrdes forbundne struktur af mine JSON-filer, mens jeg sikrede, at outputtet var optimeret til implementering. 🚀

I denne vejledning vil jeg guide dig gennem, hvordan du konfigurerer Style Dictionary til at opretholde disse relationer og sikre, at dine tokens forbliver så indbyrdes forbundet som tilsigtet. Uanset om du er ny til at designe tokens eller fejlfinde et lignende problem, vil denne indsigt være uvurderlig. Lad os dykke ned! 😊

Mestring af hierarkisk designtokeneksport

I de leverede scripts er det primære mål at opretholde den hierarkiske struktur af designtokens på tværs af flere niveauer – primitive, semantiske og specifikke. Ved hjælp af Style Dictionary introducerer vi tilpassede transformationer og formater for at sikre, at relationer mellem tokens bevares under eksportprocessen. For eksempel tilpasser "registerTransform"-metoden, hvordan tokennavne genereres, ved hjælp af et struktureret format baseret på deres kategori-, type- og vareattributter. Denne hierarkiske navngivning sikrer klarhed og konsistens på tværs af token-kompilationer. 🛠️

En anden nøglefunktion er `registerFormat`-metoden, som muliggør eksport af tokens til en struktureret JSON-fil. Dette format bevarer token-relationerne som defineret i det originale input, hvilket gør det nemmere at implementere dem på forskellige platforme. Forestil dig at arbejde på et stort projekt, hvor semantiske tokens som "primær farve" refererer til primitive tokens som "blue-500" - at bevare dette forhold under kompilering er afgørende for at forhindre implementeringsfejl. Ved at udnytte disse funktioner bliver Style Dictionary et kraftfuldt værktøj til at bevare tokens integritet.

I det Python-baserede script bruger vi en rekursiv funktion til at navigere gennem indlejrede ordbøger, og bevarer hierarkiet under transformationen af ​​designtokens. For eksempel, hvis et "button.primary.background"-token refererer til et "color.primary"-token, sikrer funktionen, at disse relationer forbliver intakte. Denne metode er især nyttig for teams, der skal arbejde med designtokens uden for JavaScript-økosystemet, da Python tilbyder stor fleksibilitet til behandling af JSON-filer. 🚀

Endelig tilføjer integrationen af ​​enhedstests ved hjælp af Chai i JavaScript-scriptet et kritisk lag af verifikation. Disse tests sikrer, at tokens ikke kun kompileres korrekt, men også bevarer deres tilsigtede relationer. For eksempel verificerer en test, at semantiske tokens refererer til primitive værdier som forventet, mens en anden sikrer, at alle tre niveauer - primitive, semantiske og specifikke - er til stede i det kompilerede output. Med disse scripts og praksisser kan designsystemer skalere effektivt og samtidig bevare konsistens på tværs af platforme, undgå potentielle faldgruber og spare udviklingstid. 😊

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

Bevarelse af tokenrelationer på tværs af platforme

Et overset aspekt ved at arbejde med designtokens er at sikre deres kompatibilitet med forskellige platforme, såsom web, iOS og Android. Selvom værktøjer som Style Dictionary er kraftfulde, kræver de omhyggelig konfiguration for at sikre, at tokens bevarer deres tilsigtede struktur. For eksempel bør semantiske tokens som "button.primary" referere til primitive tokens som "color.blue" i stedet for at indkode deres værdier. Denne sammenkobling giver udviklere mulighed for at foretage ændringer på det primitive niveau og se opdateringer afspejlet på tværs af alle afhængige tokens. 🌐

For at opnå platformsspecifik kompatibilitet kan brugerdefinerede transformationer og formater skræddersyes til hvert output. Dette sikrer, at tokens ikke kun er konsistente, men også optimeret til platformens native stilkonventioner. For eksempel kan iOS kræve tokens i et `.plist`-format, mens webudviklere foretrækker JSON- eller CSS-variabler. Brug af disse specialiserede output bevarer token-integriteten, mens implementeringen strømlines for forskellige teams. Ved at fokusere på disse aspekter kan teams skabe skalerbare, platformagnostiske designsystemer. 🚀

En anden vigtig overvejelse er integration af versionskontrol og samarbejdsprocesser. Ved at gemme token-filer i et versionsstyret lager og kombinere dem med CI/CD-pipelines, kan opdateringer til tokens testes og implementeres automatisk. Dette sikrer, at tokens forbliver opdaterede på tværs af platforme uden manuel indgriben, minimerer fejl og bevarer integriteten af ​​designsystemet. En sådan automatisering sparer ikke kun tid, men understøtter også voksende teams, der håndterer komplekse token-hierarkier. 😊