Asigurarea jetoanelor de design interconectate cu Dicționarul de stil

Stăpânirea artei jetoanelor de design interconectate

Atunci când lucrați cu sisteme de proiectare, obținerea unei conexiuni perfecte între jetoanele de proiectare este esențială pentru coerența între platforme. 🧩 Dar ce se întâmplă când jetoanele dvs. își pierd ierarhia în timpul compilării? Aceasta este o provocare cu care se confruntă mulți dezvoltatori.

Imaginați-vă că vă structurați cu meticulozitate jetoanele de design în trei niveluri – primitiv, semantic și specific – doar pentru a descoperi că, după procesarea cu Dicționarul de stil, își pierd interdependența. Rezultatul? Tokenurile dvs. semantice și specifice ajung cu valori primitive, rupând ierarhia dorită.

Din propria mea experiență, m-am confruntat cu această problemă în timp ce pregăteam jetoane de proiectare pentru mai multe sisteme de operare. Aveam nevoie de o soluție care să păstreze structura interconectată a fișierelor mele JSON, asigurându-mă în același timp că rezultatul este optimizat pentru implementare. 🚀

În acest ghid, vă voi explica cum să configurați Dicționarul de stil pentru a menține aceste relații, asigurându-vă că jetoanele dvs. rămân la fel de interconectate așa cum este prevăzut. Indiferent dacă sunteți nou în proiectarea de jetoane sau în depanarea unei probleme similare, aceste informații vor fi de neprețuit. Să ne scufundăm! 😊

Stăpânirea exportului de jetoane de design ierarhic

În scripturile furnizate, scopul principal este de a menține structura ierarhică a jetoanelor de proiectare pe mai multe niveluri - primitiv, semantic și specific. Folosind Dicționar de stil, introducem transformări și formate personalizate pentru a ne asigura că relațiile dintre jetoane sunt păstrate în timpul procesului de export. De exemplu, metoda `registerTransform` personalizează modul în care sunt generate numele jetonelor, folosind un format structurat bazat pe categoria, tipul și atributele articolului. Această denumire ierarhică asigură claritate și coerență în compilațiile de simboluri. 🛠️

O altă caracteristică cheie este metoda „registerFormat”, care permite exportul de jetoane într-un fișier JSON structurat. Acest format reține relațiile token-urilor așa cum sunt definite în intrarea originală, facilitând implementarea lor pe diferite platforme. Imaginați-vă că lucrați la un proiect mare în care jetoanele semantice precum „culoarea primară” fac referire la jetoane primitive precum „albastru-500” – păstrarea acestei relații în timpul compilării este esențială pentru a preveni erorile de implementare. Prin valorificarea acestor funcții, Style Dictionary devine un instrument puternic pentru menținerea integrității token-ului.

În scriptul bazat pe Python, folosim o funcție recursivă pentru a naviga prin dicționare imbricate, păstrând ierarhia în timpul transformării jetoanelor de proiectare. De exemplu, dacă un simbol „button.primary.background” face referire la un simbol „color.primary”, funcția asigură că aceste relații rămân intacte. Această metodă este deosebit de utilă pentru echipele care trebuie să lucreze cu token-uri de proiectare în afara ecosistemului JavaScript, deoarece Python oferă o mare flexibilitate pentru procesarea fișierelor JSON. 🚀

În cele din urmă, integrarea testelor unitare folosind Chai în scriptul JavaScript adaugă un nivel critic de verificare. Aceste teste asigură că token-urile nu numai că se compilează corect, ci și că își păstrează relațiile dorite. De exemplu, un test verifică că tokenurile semantice fac referire la valorile primitive așa cum era de așteptat, în timp ce altul asigură că toate cele trei niveluri — primitiv, semantic și specific — sunt prezente în rezultatul compilat. Cu aceste scripturi și practici, sistemele de proiectare se pot scala eficient, menținând în același timp coerența între platforme, evitând potențiale capcane și economisind timp de dezvoltare. 😊

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

Păstrarea relațiilor cu simboluri pe platforme

Un aspect trecut cu vederea în lucrul cu token-uri de design este asigurarea compatibilității acestora cu diverse platforme, cum ar fi web, iOS și Android. Deși instrumente precum Style Dictionary sunt puternice, ele necesită o configurare atentă pentru a se asigura că token-urile își păstrează structura dorită. De exemplu, jetoanele semantice precum „button.primary” ar trebui să facă referire la jetoane primitive precum „color.blue” în loc să le codifice valorile. Această interconectare permite dezvoltatorilor să facă modificări la nivel primitiv și să vadă actualizări reflectate în toate token-urile dependente. 🌐

Pentru a obține compatibilitatea specifică platformei, transformările și formatele personalizate pot fi adaptate pentru fiecare ieșire. Acest lucru asigură că jetoanele sunt nu numai consistente, ci și optimizate pentru convențiile de stil nativ ale platformei. De exemplu, iOS ar putea necesita jetoane într-un format `.plist`, în timp ce dezvoltatorii web preferă variabilele JSON sau CSS. Utilizarea acestor rezultate specializate menține integritatea token-ului în timp ce eficientizează implementarea pentru diverse echipe. Concentrându-se pe aceste aspecte, echipele pot crea sisteme de proiectare scalabile, independente de platformă. 🚀

Un alt aspect cheie este integrarea controlului versiunilor și a fluxurilor de lucru colaborative. Stocând fișierele token într-un depozit controlat de versiune și combinându-le cu conducte CI/CD, actualizările token-urilor pot fi testate și implementate automat. Acest lucru asigură că token-urile rămân actualizate pe platforme fără intervenție manuală, minimizând erorile și menținând integritatea sistemului de proiectare. O astfel de automatizare nu numai că economisește timp, dar sprijină și echipele în creștere care gestionează ierarhii complexe de token. 😊