Osiguravanje međusobno povezanih tokena dizajna s rječnikom stila

Ovladavanje umijećem međusobno povezanih dizajnerskih tokena

Kada radite sa sustavima dizajna, postizanje besprijekorne veze između tokena dizajna ključno je za dosljednost među platformama. 🧩 Ali što se događa kada vaši tokeni izgube svoju hijerarhiju tijekom kompilacije? Ovo je izazov s kojim se suočavaju mnogi programeri.

Zamislite da pažljivo strukturirate svoje dizajnerske tokene u tri razine — primitivnu, semantičku i specifičnu — samo da biste otkrili da nakon obrade s Rječnikom stila gube svoju međuovisnost. Rezultat? Vaši semantički i specifični tokeni završavaju s primitivnim vrijednostima, razbijajući predviđenu hijerarhiju.

Iz vlastitog sam iskustva naišao upravo na ovaj problem dok sam pripremao tokene dizajna za više operativnih sustava. Trebalo mi je rješenje koje je zadržalo međusobno povezanu strukturu mojih JSON datoteka, dok je izlaz bio optimiziran za implementaciju. 🚀

U ovom vodiču provest ću vas kroz način konfiguriranja Rječnika stila za održavanje tih odnosa, osiguravajući da vaši tokeni ostanu međusobno povezani kao što je i predviđeno. Bez obzira na to jeste li tek počeli dizajnirati tokene ili se bavite rješavanjem sličnih problema, ovi će uvidi biti neprocjenjivi. Zaronimo! 😊

Ovladavanje izvozom tokena hijerarhijskog dizajna

U dostavljenim skriptama primarni cilj je održavanje hijerarhijske strukture tokena dizajna na više razina—primitivnih, semantičkih i specifičnih. Koristeći Stilski rječnik, uvodimo prilagođene transformacije i formate kako bismo osigurali očuvanje odnosa između tokena tijekom procesa izvoza. Na primjer, metoda `registerTransform` prilagođava način na koji se imena tokena generiraju, koristeći strukturirani format na temelju njihove kategorije, vrste i atributa stavke. Ovo hijerarhijsko imenovanje osigurava jasnoću i dosljednost u kompilacijama tokena. 🛠️

Još jedna ključna značajka je metoda `registerFormat` koja omogućuje izvoz tokena u strukturiranu JSON datoteku. Ovaj format zadržava odnose tokena kako je definirano u izvornom unosu, što olakšava njihovu implementaciju na različitim platformama. Zamislite da radite na velikom projektu u kojem se semantički tokeni poput "primarne boje" odnose na primitivne tokene poput "blue-500"—očuvanje ovog odnosa tijekom kompilacije bitno je za sprječavanje pogrešaka u implementaciji. Iskorištavanjem ovih značajki, Style Dictionary postaje moćan alat za održavanje integriteta tokena.

U skripti temeljenoj na Pythonu koristimo rekurzivnu funkciju za navigaciju kroz ugniježđene rječnike, čuvajući hijerarhiju tijekom transformacije tokena dizajna. Na primjer, ako token "button.primary.background" upućuje na token "color.primary", funkcija osigurava da ti odnosi ostanu netaknuti. Ova je metoda osobito korisna za timove koji trebaju raditi s tokenima dizajna izvan JavaScript ekosustava, jer Python nudi veliku fleksibilnost za obradu JSON datoteka. 🚀

Konačno, integracija jediničnih testova koji koriste Chai u JavaScript skripti dodaje kritični sloj provjere. Ovi testovi osiguravaju da se tokeni ne samo ispravno kompiliraju, već i da zadrže svoje predviđene odnose. Na primjer, jedan test provjerava da semantički tokeni referiraju na primitivne vrijednosti prema očekivanjima, dok drugi osigurava da su sve tri razine - primitivna, semantička i specifična - prisutne u kompajliranom izlazu. S ovim skriptama i praksama, sustavi dizajna mogu se učinkovito skalirati uz održavanje dosljednosti među platformama, izbjegavajući potencijalne zamke i štedeći vrijeme razvoja. 😊

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

Očuvanje odnosa tokena na svim platformama

Jedan zanemaren aspekt rada s tokenima za dizajn je osiguranje njihove kompatibilnosti s različitim platformama, kao što su web, iOS i Android. Iako su alati poput Rječnika stila moćni, zahtijevaju pažljivu konfiguraciju kako bi se osiguralo da tokeni zadrže namjeravanu strukturu. Na primjer, semantički tokeni kao što je "button.primary" trebali bi upućivati ​​na primitivne tokene kao što je "color.blue" umjesto tvrdog kodiranja njihovih vrijednosti. Ova međusobna povezanost omogućuje programerima da naprave promjene na primitivnoj razini i vide ažuriranja koja se odražavaju na svim zavisnim tokenima. 🌐

Kako bi se postigla kompatibilnost specifična za platformu, prilagođene transformacije i formati mogu se prilagoditi za svaki izlaz. To osigurava da su tokeni ne samo dosljedni, već i optimizirani za konvencije izvornog stila platforme. Na primjer, iOS može zahtijevati tokene u formatu `.plist`, dok web programeri preferiraju JSON ili CSS varijable. Korištenje ovih specijaliziranih izlaza održava integritet tokena dok pojednostavljuje implementaciju za različite timove. Usredotočujući se na ove aspekte, timovi mogu stvoriti skalabilne sustave dizajna koji ne ovise o platformi. 🚀

Drugo ključno razmatranje je integracija kontrole verzija i kolaborativnih radnih procesa. Pohranjivanjem datoteka tokena u repozitorij kontroliran verzijama i njihovim kombiniranjem s CI/CD cjevovodima, ažuriranja tokena mogu se testirati i automatski implementirati. To osigurava da tokeni ostanu ažurni na svim platformama bez ručne intervencije, minimizirajući pogreške i održavajući integritet sustava dizajna. Takva automatizacija ne samo da štedi vrijeme, već i podržava rastuće timove koji rukuju složenim hijerarhijama tokena. 😊