Säkerställa sammankopplade designtokens med stilordbok

Bemästra konsten med sammankopplade designtokens

När du arbetar med designsystem är det avgörande att uppnå en sömlös koppling mellan designtokens för konsekvens över plattformar. 🧩 Men vad händer när dina tokens tappar sin hierarki under kompileringen? Detta är en utmaning som många utvecklare står inför.

Föreställ dig att strukturera dina designsymboler noggrant i tre nivåer – primitiva, semantiska och specifika – bara för att upptäcka att efter bearbetning med Style Dictionary förlorar de sitt ömsesidiga beroende. Resultatet? Dina semantiska och specifika tokens slutar med primitiva värden, vilket bryter den avsedda hierarkin.

Enligt min egen erfarenhet stötte jag på just det här problemet när jag förberedde designtokens för flera operativsystem. Jag behövde en lösning som behöll den sammankopplade strukturen för mina JSON-filer samtidigt som jag säkerställde att utdata var optimerad för implementering. 🚀

I den här guiden kommer jag att gå igenom hur du konfigurerar Style Dictionary för att upprätthålla dessa relationer, och se till att dina tokens förblir så sammankopplade som avsett. Oavsett om du är ny på att designa tokens eller felsöka ett liknande problem, kommer dessa insikter att vara ovärderliga. Låt oss dyka in! 😊

Bemästra hierarchical Design Token Export

I de tillhandahållna skripten är det primära målet att bibehålla den hierarkiska strukturen för designtokens över flera nivåer – primitiva, semantiska och specifika. Med hjälp av Style Dictionary introducerar vi anpassade transformationer och format för att säkerställa att relationer mellan tokens bevaras under exportprocessen. Till exempel, "registerTransform"-metoden anpassar hur tokennamn genereras, med hjälp av ett strukturerat format baserat på deras kategori, typ och objektattribut. Denna hierarkiska namngivning säkerställer tydlighet och konsistens över token-sammanställningar. 🛠️

En annan nyckelfunktion är metoden `registerFormat`, som möjliggör export av tokens till en strukturerad JSON-fil. Det här formatet behåller tokenrelationerna som definierats i den ursprungliga inmatningen, vilket gör det lättare att implementera dem på olika plattformar. Föreställ dig att arbeta med ett stort projekt där semantiska tokens som "primär färg" refererar till primitiva tokens som "blue-500" – att bevara detta förhållande under kompileringen är viktigt för att förhindra implementeringsfel. Genom att utnyttja dessa funktioner blir Style Dictionary ett kraftfullt verktyg för att bibehålla tokens integritet.

I det Python-baserade skriptet använder vi en rekursiv funktion för att navigera genom kapslade ordböcker, vilket bevarar hierarkin under omvandlingen av designtokens. Till exempel, om en "button.primary.background"-token refererar till en "color.primary"-token, säkerställer funktionen att dessa relationer förblir intakta. Den här metoden är särskilt användbar för team som behöver arbeta med designtokens utanför JavaScript-ekosystemet, eftersom Python erbjuder stor flexibilitet för bearbetning av JSON-filer. 🚀

Slutligen, integrationen av enhetstester med Chai i JavaScript-skriptet lägger till ett kritiskt lager av verifiering. Dessa tester säkerställer att tokens inte bara kompileras korrekt utan också behåller sina avsedda relationer. Till exempel verifierar ett test att semantiska tokens refererar till primitiva värden som förväntat, medan ett annat säkerställer att alla tre nivåerna – primitiva, semantiska och specifika – finns i den kompilerade utdatan. Med dessa skript och tillvägagångssätt kan designsystem skalas effektivt samtidigt som de bibehåller konsistens över plattformarna, undviker potentiella fallgropar och sparar utvecklingstid. 😊

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

Bevara tokenrelationer över plattformar

En förbisedd aspekt av att arbeta med designtokens är att säkerställa deras kompatibilitet med olika plattformar, som webb, iOS och Android. Även om verktyg som Style Dictionary är kraftfulla, kräver de noggrann konfiguration för att säkerställa att tokens behåller sin avsedda struktur. Till exempel bör semantiska tokens som "button.primary" referera till primitiva tokens som "color.blue" istället för att hårdkoda deras värden. Denna sammanlänkning gör det möjligt för utvecklare att göra ändringar på den primitiva nivån och se uppdateringar reflekterade över alla beroende tokens. 🌐

För att uppnå plattformsspecifik kompatibilitet kan anpassade transformationer och format skräddarsys för varje utgång. Detta säkerställer att tokens inte bara är konsekventa utan också optimerade för plattformens inhemska stilkonventioner. Till exempel kan iOS kräva tokens i ett `.plist`-format, medan webbutvecklare föredrar JSON- eller CSS-variabler. Genom att använda dessa specialiserade utgångar bibehålls tokenintegriteten samtidigt som implementeringen för olika team effektiviseras. Genom att fokusera på dessa aspekter kan team skapa skalbara, plattforms-agnostiska designsystem. 🚀

En annan viktig faktor är att integrera versionskontroll och samarbetsflöden. Genom att lagra tokenfiler i ett versionskontrollerat arkiv och kombinera dem med CI/CD-pipelines, kan uppdateringar av tokens testas och distribueras automatiskt. Detta säkerställer att tokens förblir uppdaterade över plattformar utan manuella ingrepp, vilket minimerar fel och bibehåller integriteten hos designsystemet. Sådan automatisering sparar inte bara tid utan stöder också växande team som hanterar komplexa tokenhierarkier. 😊