Zabezpečenie vzájomne prepojených dizajnových tokenov so štýlovým slovníkom

Zvládnutie umenia vzájomne prepojených dizajnových tokenov

Pri práci s návrhovými systémami je dosiahnutie bezproblémového prepojenia medzi návrhovými tokenmi kľúčové pre konzistentnosť medzi platformami. 🧩 Čo sa však stane, keď vaše tokeny počas kompilácie stratia svoju hierarchiu? Toto je výzva, ktorej čelí mnoho vývojárov.

Predstavte si, že svoje žetóny dizajnu starostlivo štruktúrujete do troch úrovní – primitívne, sémantické a špecifické – len aby ste zistili, že po spracovaní pomocou slovníka štýlov stratia svoju vzájomnú závislosť. Výsledok? Vaše sémantické a špecifické tokeny skončia s primitívnymi hodnotami, ktoré narušia zamýšľanú hierarchiu.

Z vlastnej skúsenosti som sa stretol práve s týmto problémom pri príprave návrhových tokenov pre viacero operačných systémov. Potreboval som riešenie, ktoré by zachovalo prepojenú štruktúru mojich súborov JSON a zároveň zabezpečilo, že výstup bude optimalizovaný na implementáciu. 🚀

V tejto príručke vás prevediem, ako nakonfigurovať slovník štýlov, aby ste udržali tieto vzťahy a zabezpečili, že vaše tokeny zostanú prepojené tak, ako bolo zamýšľané. Či už ste novým dizajnom tokenov alebo riešením podobného problému, tieto poznatky budú neoceniteľné. Poďme sa ponoriť! 😊

Zvládnutie exportu tokenov hierarchického dizajnu

V poskytnutých skriptoch je primárnym cieľom zachovať hierarchickú štruktúru tokenov dizajnu na viacerých úrovniach – primitívnej, sémantickej a špecifickej. Pomocou Style Dictionary predstavujeme vlastné transformácie a formáty, aby sme zaistili zachovanie vzťahov medzi tokenmi počas procesu exportu. Napríklad metóda „registerTransform“ prispôsobuje spôsob generovania názvov tokenov pomocou štruktúrovaného formátu na základe ich kategórie, typu a atribútov položky. Toto hierarchické pomenovanie zaisťuje prehľadnosť a konzistentnosť medzi kompiláciami tokenov. 🛠️

Ďalšou kľúčovou funkciou je metóda `registerFormat`, ktorá umožňuje export tokenov do štruktúrovaného súboru JSON. Tento formát zachováva vzťahy tokenov definované v pôvodnom vstupe, čo uľahčuje ich implementáciu na rôznych platformách. Predstavte si prácu na veľkom projekte, kde sémantické tokeny ako „primárna farba“ odkazujú na primitívne tokeny ako „modrá-500“ – zachovanie tohto vzťahu počas kompilácie je nevyhnutné, aby sa predišlo chybám pri implementácii. Využitím týchto funkcií sa slovník štýlov stáva silným nástrojom na udržanie integrity tokenu.

V skripte založenom na Pythone používame rekurzívnu funkciu na navigáciu cez vnorené slovníky, pričom zachovávame hierarchiu počas transformácie tokenov dizajnu. Napríklad, ak token „button.primary.background“ odkazuje na token „color.primary“, funkcia zabezpečí, že tieto vzťahy zostanú nedotknuté. Táto metóda je užitočná najmä pre tímy, ktoré potrebujú pracovať s návrhovými tokenmi mimo ekosystém JavaScriptu, pretože Python ponúka veľkú flexibilitu pri spracovaní súborov JSON. 🚀

Nakoniec integrácia testov jednotiek pomocou Chai v skripte JavaScript pridáva kritickú vrstvu overovania. Tieto testy zabezpečujú, že tokeny sa nielen správne skompilujú, ale že si aj zachovajú svoje zamýšľané vzťahy. Jeden test napríklad overuje, že sémantické tokeny odkazujú na primitívne hodnoty podľa očakávania, zatiaľ čo iný zaisťuje, že v zostavenom výstupe sú prítomné všetky tri úrovne – primitívna, sémantická a špecifická. Pomocou týchto skriptov a postupov môžu návrhové systémy efektívne škálovať pri zachovaní konzistencie naprieč platformami, čím sa vyhnete potenciálnym nástrahám a šetríte č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');
  });
});

Zachovanie vzťahov tokenov naprieč platformami

Jedným prehliadaným aspektom práce s návrhovými tokenmi je zabezpečenie ich kompatibility s rôznymi platformami, ako sú web, iOS a Android. Zatiaľ čo nástroje ako Style Dictionary sú výkonné, vyžadujú starostlivú konfiguráciu, aby sa zabezpečilo, že si tokeny zachovajú svoju zamýšľanú štruktúru. Napríklad sémantické tokeny ako „button.primary“ by mali odkazovať na primitívne tokeny ako „color.blue“, a nie napevno zakódovať ich hodnoty. Táto prepojenosť umožňuje vývojárom vykonávať zmeny na primitívnej úrovni a vidieť aktualizácie odrážajúce sa vo všetkých závislých tokenoch. 🌐

Na dosiahnutie kompatibility špecifickej pre platformu je možné pre každý výstup prispôsobiť vlastné transformácie a formáty. To zaisťuje, že tokeny sú nielen konzistentné, ale aj optimalizované pre konvencie natívneho štýlu platformy. Napríklad systém iOS môže vyžadovať tokeny vo formáte „.plist“, zatiaľ čo weboví vývojári uprednostňujú premenné JSON alebo CSS. Používanie týchto špecializovaných výstupov zachováva integritu tokenov a zároveň zjednodušuje implementáciu pre rôzne tímy. Zameraním sa na tieto aspekty môžu tímy vytvárať škálovateľné, platformovo agnostické dizajnové systémy. 🚀

Ďalším kľúčovým faktorom je integrácia riadenia verzií a pracovných postupov spolupráce. Uložením súborov tokenov do úložiska riadeného verziou a ich kombináciou s kanálmi CI/CD možno aktualizácie tokenov testovať a nasadzovať automaticky. To zaisťuje, že tokeny zostanú aktuálne naprieč platformami bez manuálneho zásahu, čím sa minimalizujú chyby a zachováva sa integrita návrhového systému. Takáto automatizácia nielen šetrí čas, ale podporuje aj rastúce tímy, ktoré sa zaoberajú komplexnými hierarchiami tokenov. 😊