Stiilisõnastikuga omavahel ühendatud disainimärkide tagamine

Omavahel ühendatud disainimärkide kunsti valdamine

Disainisüsteemidega töötamisel on platvormidevahelise järjepidevuse jaoks ülioluline disainimärkide vahelise sujuva ühenduse saavutamine. 🧩 Aga mis juhtub siis, kui teie märgid kaotavad koostamise ajal oma hierarhia? See on väljakutse, millega paljud arendajad silmitsi seisavad.

Kujutage ette, et struktureerite oma kujundusmärgid hoolikalt kolmeks tasandiks – primitiivne, semantiline ja spetsiifiline –, et avastama, et pärast laadisõnastikuga töötlemist kaotavad nad oma vastastikuse sõltuvuse. Tulemus? Teie semantilised ja spetsiifilised märgid saavad primitiivsete väärtustega, rikkudes kavandatud hierarhia.

Oma kogemuse põhjal puutusin selle probleemiga kokku mitme operatsioonisüsteemi jaoks mõeldud disainilubade ettevalmistamisel. Vajasin lahendust, mis säilitaks minu JSON-failide omavahel ühendatud struktuuri, tagades samal ajal väljundi rakendamiseks optimeerimise. 🚀

Selles juhendis juhendan teid, kuidas konfigureerida stiilisõnastikku nende suhete säilitamiseks, tagades, et teie märgid jäävad nii nagu ette nähtud. Olenemata sellest, kas olete žetoonide kujundamise või sarnase probleemi tõrkeotsinguga uustulnuk, on need teadmised hindamatud. Sukeldume sisse! 😊

Hierarhilise disaini märgi ekspordi valdamine

Pakutavates skriptides on esmane eesmärk säilitada kujundusmärkide hierarhiline struktuur mitmel tasandil – primitiivne, semantiline ja spetsiifiline. Kasutades Style Dictionary, tutvustame kohandatud teisendusi ja vorminguid, et tagada märkide vaheliste suhete säilimine ekspordiprotsessi ajal. Näiteks meetod "registerTransform" kohandab lubade nimede genereerimist, kasutades nende kategooria, tüübi ja üksuse atribuutide alusel struktureeritud vormingut. See hierarhiline nimede määramine tagab kõigi märgikoosluste selguse ja järjepidevuse. 🛠️

Teine oluline funktsioon on meetod "registerFormat", mis võimaldab žetoonide eksportimist struktureeritud JSON-faili. See vorming säilitab algsisendis määratletud märgiseosed, muutes nende rakendamise erinevatel platvormidel lihtsamaks. Kujutage ette, et töötate suure projekti kallal, kus semantilised märgid, nagu "põhivärv", viitavad primitiivsetele märkidele, nagu "sinine-500" – selle seose säilitamine kompileerimise ajal on rakendusvigade vältimiseks hädavajalik. Neid funktsioone kasutades saab Style Dictionaryst võimas tööriist märgi terviklikkuse säilitamiseks.

Pythoni põhises skriptis kasutame pesastatud sõnaraamatutes navigeerimiseks rekursiivset funktsiooni, säilitades hierarhia kujundusmärkide teisendamise ajal. Näiteks kui tunnus "button.primary.background" viitab märgile "color.primary", tagab funktsioon, et need seosed jäävad puutumatuks. See meetod on eriti kasulik meeskondade jaoks, kes peavad töötama väljaspool JavaScripti ökosüsteemi kujunduslubadega, kuna Python pakub JSON-failide töötlemiseks suurt paindlikkust. 🚀

Lõpuks lisab üksusetestide integreerimine JavaScripti skripti Chai abil kriitilise kontrollikihi. Need testid tagavad, et märgid mitte ainult ei kompileeri õigesti, vaid säilitavad ka oma kavandatud seosed. Näiteks üks test kontrollib, et semantilised märgid viitavad ootuspärasele primitiivsetele väärtustele, samas kui teine ​​tagab, et kõik kolm taset – primitiivne, semantiline ja spetsiifiline – on kompileeritud väljundis olemas. Nende skriptide ja tavade abil saavad disainisüsteemid tõhusalt skaleerida, säilitades samal ajal platvormidevahelise järjepidevuse, vältides võimalikke lõkse ja säästes arendusaega. 😊

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

Token-suhete säilitamine platvormidel

Üks tähelepanuta jäetud aspekt disainimärkidega töötamisel on nende ühilduvuse tagamine erinevate platvormidega, nagu veeb, iOS ja Android. Kuigi tööriistad, nagu Style Dictionary, on võimsad, vajavad need hoolikat seadistamist, et tagada žetoonide kavandatud struktuuri säilimine. Näiteks semantilised märgid, nagu "button.primary", peaksid viitama primitiivsetele märkidele, nagu "color.blue", selle asemel, et nende väärtusi kõvasti kodeerida. See omavaheline seotus võimaldab arendajatel teha muudatusi primitiivsel tasemel ja näha värskendusi, mis kajastuvad kõigis sõltuvates märkides. 🌐

Platvormipõhise ühilduvuse saavutamiseks saab kohandatud teisendusi ja vorminguid kohandada iga väljundi jaoks. See tagab, et märgid pole mitte ainult järjepidevad, vaid ka optimeeritud platvormi loomulike stiilide jaoks. Näiteks võib iOS nõuda .plist-vormingus märke, samas kui veebiarendajad eelistavad JSON- või CSS-muutujaid. Nende spetsiaalsete väljundite kasutamine säilitab märgi terviklikkuse, lihtsustades samal ajal rakendamist erinevate meeskondade jaoks. Nendele aspektidele keskendudes saavad meeskonnad luua skaleeritavaid, platvormi agnostilisi disainisüsteeme. 🚀

Teine oluline kaalutlus on versioonikontrolli ja koostöö töövoogude integreerimine. Salvestades žetoonide faile versiooniga juhitavas hoidlas ja kombineerides need CI/CD torujuhtmetega, saab lubade värskendusi testida ja automaatselt juurutada. See tagab, et märgid püsivad ajakohasena kõigis platvormides ilma käsitsi sekkumiseta, minimeerides vigu ja säilitades disainisüsteemi terviklikkuse. Selline automatiseerimine ei säästa mitte ainult aega, vaid toetab ka kasvavaid meeskondi, kes tegelevad keerukate märgihierarhiatega. 😊