Zajištění propojených designových tokenů se slovníkem stylů

Zvládnutí umění vzájemně propojených designových tokenů

Při práci s návrhovými systémy je dosažení bezproblémového propojení mezi návrhovými tokeny zásadní pro konzistenci napříč platformami. 🧩 Co se ale stane, když vaše tokeny při kompilaci ztratí svou hierarchii? To je problém, kterému čelí mnoho vývojářů.

Představte si, že své tokeny návrhu pečlivě strukturujete do tří úrovní – primitivní, sémantické a specifické – jen abyste zjistili, že po zpracování pomocí Slovníku stylů ztratí vzájemnou závislost. Výsledek? Vaše sémantické a specifické tokeny skončí s primitivními hodnotami a naruší zamýšlenou hierarchii.

Z vlastní zkušenosti jsem se setkal právě s tímto problémem při přípravě návrhových tokenů pro více operačních systémů. Potřeboval jsem řešení, které by zachovalo propojenou strukturu mých souborů JSON a zároveň zajistilo, že výstup bude optimalizován pro implementaci. 🚀

V této příručce vás provedu tím, jak nakonfigurovat slovník stylů, aby se tyto vztahy udržely a zajistilo se, že vaše tokeny zůstanou tak propojené, jak bylo zamýšleno. Ať už jste v navrhování tokenů noví nebo s řešením podobného problému, tyto poznatky budou neocenitelné. Pojďme se ponořit! 😊

Zvládnutí exportu tokenu hierarchického návrhu

V poskytnutých skriptech je primárním cílem udržovat hierarchickou strukturu tokenů návrhu na více úrovních – primitivní, sémantické a specifické. Pomocí Style Dictionary zavádíme vlastní transformace a formáty, abychom zajistili zachování vztahů mezi tokeny během procesu exportu. Například metoda `registerTransform` přizpůsobuje způsob generování názvů tokenů pomocí strukturovaného formátu na základě jejich kategorie, typu a atributů položky. Toto hierarchické pojmenování zajišťuje přehlednost a konzistenci napříč kompilacemi tokenů. 🛠️

Další klíčovou funkcí je metoda `registerFormat`, která umožňuje export tokenů do strukturovaného souboru JSON. Tento formát zachovává vztahy tokenů, jak byly definovány v původním vstupu, což usnadňuje jejich implementaci na různých platformách. Představte si, že pracujete na velkém projektu, kde sémantické tokeny jako „primární barva“ odkazují na primitivní tokeny, jako je „modrá-500“ – zachování tohoto vztahu během kompilace je zásadní, aby se předešlo chybám při implementaci. Využitím těchto funkcí se Style Dictionary stává mocným nástrojem pro zachování integrity tokenu.

Ve skriptu založeném na Pythonu používáme rekurzivní funkci k procházení vnořenými slovníky, přičemž zachováváme hierarchii během transformace tokenů návrhu. Pokud například token „button.primary.background“ odkazuje na token „color.primary“, funkce zajistí, že tyto vztahy zůstanou nedotčeny. Tato metoda je užitečná zejména pro týmy, které potřebují pracovat s návrhovými tokeny mimo ekosystém JavaScriptu, protože Python nabízí velkou flexibilitu pro zpracování souborů JSON. 🚀

A konečně integrace testů jednotek pomocí Chai do skriptu JavaScript přidává kritickou vrstvu ověřování. Tyto testy zajišťují, že se tokeny nejen správně zkompilují, ale také si zachovají zamýšlené vztahy. Jeden test například ověřuje, že sémantické tokeny odkazují na primitivní hodnoty podle očekávání, zatímco jiný zajišťuje, že v kompilovaném výstupu jsou přítomny všechny tři úrovně – primitivní, sémantická a specifická. Pomocí těchto skriptů a postupů lze návrhové systémy efektivně škálovat při zachování konzistence napříč platformami, vyhnout se potenciálním nástrahám a ušetřit čas na vývoj. 😊

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

Zachování vztahů tokenů napříč platformami

Jedním přehlíženým aspektem práce s designovými tokeny je zajištění jejich kompatibility s různými platformami, jako je web, iOS a Android. I když jsou nástroje jako Style Dictionary výkonné, vyžadují pečlivou konfiguraci, aby bylo zajištěno, že si tokeny zachovají svou zamýšlenou strukturu. Například sémantické tokeny jako "button.primary" by měly odkazovat na primitivní tokeny jako "color.blue" spíše než napevno zakódovat jejich hodnoty. Tato propojenost umožňuje vývojářům provádět změny na primitivní úrovni a vidět aktualizace odrážející se ve všech závislých tokenech. 🌐

Pro dosažení kompatibility specifické pro platformu lze pro každý výstup přizpůsobit vlastní transformace a formáty. To zajišťuje, že tokeny jsou nejen konzistentní, ale také optimalizované pro konvence nativního stylu platformy. Například iOS může vyžadovat tokeny ve formátu `.plist`, zatímco weboví vývojáři dávají přednost proměnným JSON nebo CSS. Použití těchto specializovaných výstupů zachovává integritu tokenu a zároveň zjednodušuje implementaci pro různé týmy. Zaměřením se na tyto aspekty mohou týmy vytvářet škálovatelné návrhové systémy agnostické platformy. 🚀

Dalším klíčovým faktorem je integrace správy verzí a pracovních postupů pro spolupráci. Uložením souborů tokenů do úložiště s řízenou verzí a jejich zkombinováním s kanály CI/CD lze aktualizace tokenů testovat a nasazovat automaticky. To zajišťuje, že tokeny zůstanou aktuální na všech platformách bez ručního zásahu, minimalizují se chyby a zachovává se integrita návrhového systému. Taková automatizace nejen šetří čas, ale také podporuje rostoucí týmy, které zvládají složité hierarchie tokenů. 😊