Sujungtų dizaino žetonų užtikrinimas naudojant stiliaus žodyną

Susietų dizaino žetonų meno įvaldymas

Dirbant su projektavimo sistemomis, norint užtikrinti nuoseklumą visose platformose, labai svarbu pasiekti sklandų dizaino žetonų ryšį. 🧩 Bet kas atsitinka, kai kompiliavimo metu jūsų žetonai praranda savo hierarchiją? Tai iššūkis, su kuriuo susiduria daugelis kūrėjų.

Įsivaizduokite, kad savo dizaino žetonus kruopščiai suskirstote į tris lygius – primityvų, semantinį ir specifinį – ir pamatysite, kad po apdorojimo naudojant Stilių žodyną jie praranda tarpusavio priklausomybę. Rezultatas? Jūsų semantiniai ir specifiniai žetonai baigiasi primityviomis reikšmėmis, sulaužydami numatytą hierarchiją.

Remdamasis savo patirtimi, aš susidūriau su šia problema rengdamas kelių operacinių sistemų dizaino žetonus. Man reikėjo sprendimo, kuris išlaikytų sujungtą mano JSON failų struktūrą ir užtikrintų, kad išvestis būtų optimizuota diegimui. 🚀

Šiame vadove paaiškinsiu, kaip sukonfigūruoti Stilių žodyną, kad išlaikytumėte šiuos ryšius ir užtikrintumėte, kad jūsų žetonai išliktų taip, kaip numatyta. Nesvarbu, ar esate naujokas kuriant žetonus ar šalinant panašią problemą, šios įžvalgos bus neįkainojamos. Pasinerkime! 😊

Hierarchinio dizaino žetonų eksporto įvaldymas

Pateiktuose scenarijuose pagrindinis tikslas yra išlaikyti hierarchinę dizaino žetonų struktūrą keliuose lygmenyse – primityviame, semantiniame ir specifiniame. Naudodami Stiliaus žodyną, pristatome pasirinktines transformacijas ir formatus, kad užtikrintume, jog ryšiai tarp žetonų būtų išsaugoti eksportuojant. Pavyzdžiui, metodas „registerTransform“ tinkina, kaip generuojami prieigos raktų pavadinimai, naudojant struktūrinį formatą, pagrįstą kategorijų, tipo ir elementų atributais. Šis hierarchinis pavadinimų suteikimas užtikrina žetonų kompiliacijų aiškumą ir nuoseklumą. 🛠️

Kita svarbi funkcija yra „registerFormat“ metodas, leidžiantis eksportuoti žetonus į struktūrinį JSON failą. Šis formatas išlaiko žetonų ryšius, apibrėžtus pradinėje įvestyje, todėl juos lengviau įdiegti įvairiose platformose. Įsivaizduokite, kad dirbate su dideliu projektu, kuriame semantiniai žetonai, pvz., „pagrindinė spalva“, nurodo primityvius žetonus, tokius kaip „mėlyna-500“, – norint išvengti diegimo klaidų, būtina išsaugoti šį ryšį kompiliavimo metu. Išnaudojus šias funkcijas, Style Dictionary tampa galingu įrankiu žetonų vientisumui palaikyti.

Python pagrindu sukurtame scenarijuje naudojame rekursinę funkciją, kad galėtume naršyti įdėtuose žodynuose, išsaugodami hierarchiją transformuojant dizaino žetonus. Pavyzdžiui, jei atpažinimo ženklas „button.primary.background“ nurodo „color.primary“ prieigos raktą, funkcija užtikrina, kad šie ryšiai išliks nepažeisti. Šis metodas ypač naudingas komandoms, kurioms reikia dirbti su dizaino prieigos raktais už „JavaScript“ ekosistemos ribų, nes „Python“ siūlo didelį JSON failų apdorojimo lankstumą. 🚀

Galiausiai, vienetų testų integravimas naudojant Chai JavaScript scenarijuje prideda kritinį patikrinimo lygį. Šie testai užtikrina, kad žetonai ne tik teisingai kompiliuojami, bet ir išlaikytų numatytus ryšius. Pavyzdžiui, vienas testas patikrina, ar semantiniai žetonai nurodo primityvias reikšmes, kaip tikėtasi, o kitas užtikrina, kad sudarytoje išvestyje yra visi trys lygiai – primityvus, semantinis ir specifinis. Naudojant šiuos scenarijus ir praktiką, projektavimo sistemos gali efektyviai išplėsti mastelį, išlaikant nuoseklumą visose platformose, išvengiant galimų spąstų ir taupant kūrimo laiką. 😊

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

Žetoninių ryšių išsaugojimas įvairiose platformose

Vienas nepastebėtas darbo su dizaino žetonais aspektas yra jų suderinamumo su įvairiomis platformomis, pvz., žiniatinklio, iOS ir Android, užtikrinimas. Nors įrankiai, tokie kaip Stiliaus žodynas, yra galingi, juos reikia kruopščiai konfigūruoti, kad žetonai išlaikytų numatytą struktūrą. Pavyzdžiui, semantiniai prieigos raktai, tokie kaip „button.primary“, turėtų nurodyti primityvius prieigos raktus, tokius kaip „spalva.mėlyna“, o ne koduoti jų reikšmes. Šis tarpusavio ryšys leidžia kūrėjams atlikti pakeitimus primityviu lygiu ir matyti naujinimus, atsispindinčius visuose priklausomuose prieigos raktuose. 🌐

Norint pasiekti konkrečios platformos suderinamumą, kiekvienam išėjimui galima pritaikyti pasirinktines transformacijas ir formatus. Tai užtikrina, kad žetonai būtų ne tik nuoseklūs, bet ir optimizuoti pagal platformos vietinio stiliaus nuostatas. Pavyzdžiui, „iOS“ gali reikalauti žetonų „.plist“ formatu, o žiniatinklio kūrėjai teikia pirmenybę JSON arba CSS kintamiesiems. Naudojant šiuos specializuotus išėjimus išlaikomas žetonų vientisumas ir supaprastinamas diegimas įvairioms komandoms. Sutelkdamos dėmesį į šiuos aspektus, komandos gali sukurti keičiamo dydžio, platformą agnostiškas projektavimo sistemas. 🚀

Kitas svarbus aspektas yra versijos valdymo ir bendradarbiavimo darbo eigos integravimas. Saugant žetonų failus versijos valdomoje saugykloje ir derinant juos su CI / CD konvejeriais, žetonų naujinimai gali būti išbandyti ir įdiegti automatiškai. Tai užtikrina, kad žetonai išliks atnaujinti visose platformose be rankinio įsikišimo, sumažinant klaidų skaičių ir išlaikant dizaino sistemos vientisumą. Toks automatizavimas ne tik taupo laiką, bet ir palaiko augančias komandas, tvarkančias sudėtingas žetonų hierarchijas. 😊