Zagotavljanje medsebojno povezanih oblikovalskih žetonov s slogovnim slovarjem

Obvladovanje umetnosti medsebojno povezanih oblikovalskih žetonov

Pri delu z oblikovalskimi sistemi je doseganje brezhibne povezave med oblikovalskimi žetoni ključnega pomena za doslednost med platformami. 🧩 Toda kaj se zgodi, ko vaši žetoni izgubijo svojo hierarhijo med prevajanjem? To je izziv, s katerim se soočajo številni razvijalci.

Predstavljajte si, da svoje oblikovne žetone natančno strukturirate v tri ravni – primitivno, semantično in specifično – da bi ugotovili, da po obdelavi s Slovarjem stilov izgubijo soodvisnost. rezultat? Vaši semantični in specifični žetoni končajo s primitivnimi vrednostmi, ki porušijo predvideno hierarhijo.

Po lastnih izkušnjah sem naletel prav na to težavo, ko sem pripravljal oblikovne žetone za več operacijskih sistemov. Potreboval sem rešitev, ki je ohranila medsebojno povezano strukturo mojih datotek JSON in hkrati zagotovila, da je izhod optimiziran za izvedbo. 🚀

V tem priročniku vas bom vodil skozi način konfiguracije Slovarja stilov, da bo ohranil ta razmerja in zagotovil, da bodo vaši žetoni medsebojno povezani, kot je predvideno. Ne glede na to, ali ste novi pri oblikovanju žetonov ali pri odpravljanju podobne težave, bodo ti vpogledi neprecenljivi. Potopimo se! 😊

Obvladovanje izvoza žetonov hierarhične zasnove

V ponujenih skriptih je primarni cilj ohraniti hierarhično strukturo žetonov oblikovanja na več ravneh – primitivni, semantični in specifični. Z uporabo Slogovnega slovarja uvajamo transformacije in formate po meri, da zagotovimo ohranitev odnosov med žetoni med postopkom izvoza. Na primer, metoda `registerTransform` prilagodi način generiranja imen žetonov z uporabo strukturirane oblike, ki temelji na njihovi kategoriji, vrsti in atributih predmeta. To hierarhično poimenovanje zagotavlja jasnost in doslednost med kompilacijami žetonov. 🛠️

Druga ključna funkcija je metoda `registerFormat`, ki omogoča izvoz žetonov v strukturirano datoteko JSON. Ta oblika ohranja razmerja žetonov, kot so definirana v izvirnem vnosu, zaradi česar jih je lažje implementirati na različnih platformah. Predstavljajte si, da delate na velikem projektu, kjer se semantični žetoni, kot je "primarna barva", nanašajo na primitivne žetone, kot je "modra-500" – ohranjanje tega razmerja med prevajanjem je bistvenega pomena za preprečevanje napak pri izvajanju. Z izkoriščanjem teh funkcij postane Slovar sloga močno orodje za ohranjanje celovitosti žetona.

V skriptu, ki temelji na Pythonu, uporabljamo rekurzivno funkcijo za krmarjenje po ugnezdenih slovarjih, pri čemer ohranjamo hierarhijo med transformacijo oblikovalskih žetonov. Na primer, če se žeton "button.primary.background" sklicuje na žeton "color.primary", funkcija zagotovi, da ta razmerja ostanejo nedotaknjena. Ta metoda je še posebej uporabna za ekipe, ki morajo delati z žetoni oblikovanja zunaj ekosistema JavaScript, saj Python ponuja veliko prilagodljivost za obdelavo datotek JSON. 🚀

In končno, integracija testov enote z uporabo Chai v skriptu JavaScript doda kritično plast preverjanja. Ti testi zagotavljajo, da se žetoni ne samo pravilno prevedejo, ampak tudi ohranijo predvidena razmerja. Na primer, en test preveri, ali se semantični žetoni sklicujejo na primitivne vrednosti, kot je pričakovano, drugi pa zagotovi, da so vse tri ravni – primitivna, semantična in specifična – prisotne v prevedenem izhodu. S temi skripti in praksami se lahko sistemi načrtovanja učinkovito prilagajajo, hkrati pa ohranjajo doslednost med platformami, se izognejo morebitnim pastem in prihranijo razvojni čas. 😊

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

Ohranjanje odnosov žetonov med platformami

En spregledan vidik dela z žetoni oblikovanja je zagotavljanje njihove združljivosti z različnimi platformami, kot so splet, iOS in Android. Čeprav so orodja, kot je Slogovni slovar, zmogljiva, zahtevajo skrbno konfiguracijo, da se zagotovi, da žetoni ohranijo predvideno strukturo. Na primer, semantični žetoni, kot je "button.primary", bi se morali sklicevati na primitivne žetone, kot je "color.blue", namesto da bi njihove vrednosti trdo kodirali. Ta medsebojna povezanost omogoča razvijalcem, da naredijo spremembe na osnovni ravni in vidijo posodobitve, ki se odražajo v vseh odvisnih žetonih. 🌐

Za doseganje združljivosti, specifične za platformo, je mogoče transformacije in formate po meri prilagoditi za vsak izhod. To zagotavlja, da žetoni niso samo dosledni, ampak tudi optimizirani za konvencije izvornega sloga platforme. Na primer, iOS morda zahteva žetone v formatu `.plist`, medtem ko imajo spletni razvijalci raje spremenljivke JSON ali CSS. Uporaba teh specializiranih izhodov ohranja celovitost žetonov, hkrati pa racionalizira implementacijo za različne ekipe. Z osredotočanjem na te vidike lahko ekipe ustvarijo razširljive sisteme oblikovanja, ki niso odvisni od platforme. 🚀

Drugi ključni dejavnik je integracija nadzora različic in sodelovalnih delovnih tokov. S shranjevanjem datotek žetonov v repozitorij z nadzorovanimi različicami in njihovim združevanjem s cevovodi CI/CD je mogoče posodobitve žetonov testirati in samodejno uvesti. To zagotavlja, da žetoni ostanejo posodobljeni na vseh platformah brez ročnega posredovanja, kar zmanjšuje napake in ohranja celovitost sistema oblikovanja. Takšna avtomatizacija ne le prihrani čas, ampak tudi podpira rastoče ekipe, ki obravnavajo zapletene hierarhije žetonov. 😊