Обезбеђивање међусобно повезаних дизајнерских токена са речником стила

Овладавање уметношћу међусобно повезаних дизајнерских токена

Када радите са системима дизајна, постизање беспрекорне везе између дизајнерских токена је кључно за доследност на платформама. 🧩 Али шта се дешава када ваши токени изгубе своју хијерархију током компилације? Ово је изазов са којим се многи програмери суочавају.

Замислите да пажљиво структурирате своје дизајнерске токене у три нивоа – примитивни, семантички и специфични – само да бисте открили да након обраде помоћу Речника стилова губе међузависност. Резултат? Ваши семантички и специфични токени завршавају са примитивним вредностима, разбијајући предвиђену хијерархију.

По сопственом искуству, наишао сам на овај проблем док сам припремао дизајнерске токене за више оперативних система. Требало ми је решење које је задржало међусобну структуру мојих ЈСОН датотека, истовремено осигуравајући да је излаз оптимизован за имплементацију. 🚀

У овом водичу ћу вас провести кроз како да конфигуришете речник стилова да одржавате ове односе, обезбеђујући да ваши токени остану међусобно повезани како је предвиђено. Било да сте нови у дизајнирању токена или решавате сличан проблем, ови увиди ће бити од непроцењиве вредности. Хајде да заронимо! 😊

Овладавање извозом токена хијерархијског дизајна

У датим скриптама, примарни циљ је одржавање хијерархијске структуре токена дизајна на више нивоа – примитивног, семантичког и специфичног. Користећи Речник стилова, уводимо прилагођене трансформације и формате како бисмо осигурали да се односи између токена очувају током процеса извоза. На пример, метода `регистерТрансформ` прилагођава начин на који се генеришу имена токена, користећи структурирани формат на основу њихове категорије, типа и атрибута ставке. Ово хијерархијско именовање обезбеђује јасноћу и доследност у компилацијама токена. 🛠

Још једна кључна карактеристика је метода `регистерФормат`, која омогућава извоз токена у структурирану ЈСОН датотеку. Овај формат задржава односе токена како је дефинисано у оригиналном уносу, што олакшава њихову примену на различитим платформама. Замислите да радите на великом пројекту где семантички токени попут „примарне боје“ упућују на примитивне токене попут „блуе-500“ — очување овог односа током компилације је од суштинског значаја за спречавање грешака у имплементацији. Користећи ове функције, Речник стилова постаје моћан алат за одржавање интегритета токена.

У скрипти заснованој на Питхон-у користимо рекурзивну функцију за навигацију кроз угнежђене речнике, чувајући хијерархију током трансформације токена дизајна. На пример, ако токен "буттон.примари.бацкгроунд" упућује на токен "цолор.примари", функција осигурава да ови односи остану нетакнути. Овај метод је посебно користан за тимове који треба да раде са дизајн токенима изван ЈаваСцрипт екосистема, пошто Питхон нуди велику флексибилност за обраду ЈСОН датотека. 🚀

Коначно, интеграција јединичних тестова који користе Цхаи у ЈаваСцрипт скрипту додаје критичан ниво верификације. Ови тестови обезбеђују да токени не само да се компилирају исправно, већ и да задрже своје предвиђене односе. На пример, један тест потврђује да семантички токени упућују на примитивне вредности како је очекивано, док други обезбеђује да су сва три нивоа – примитивни, семантички и специфични – присутна у преведеном излазу. Са овим скриптама и праксама, системи дизајна могу ефикасно да се скалирају уз одржавање конзистентности међу платформама, избегавајући потенцијалне замке и штедећи време развоја. 😊

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

Очување односа токена на различитим платформама

Један занемарен аспект рада са дизајн токенима је обезбеђивање њихове компатибилности са различитим платформама, као што су веб, иОС и Андроид. Иако су алати као што је Речник стилова моћни, захтевају пажљиву конфигурацију како би се осигурало да токени задрже своју предвиђену структуру. На пример, семантички токени као што је "буттон.примари" треба да упућују на примитивне токене као што је "цолор.блуе", а не да чврсто кодирају њихове вредности. Ова међусобна повезаност омогућава програмерима да изврше промене на примитивном нивоу и виде ажурирања која се одражавају на свим зависним токенима. 🌐

Да би се постигла компатибилност специфична за платформу, прилагођене трансформације и формати се могу прилагодити за сваки излаз. Ово осигурава да токени нису само доследни, већ и оптимизовани за конвенције матичног стила платформе. На пример, иОС може захтевати токене у `.плист` формату, док веб програмери преферирају ЈСОН или ЦСС променљиве. Коришћење ових специјализованих излаза одржава интегритет токена док поједностављује имплементацију за различите тимове. Фокусирајући се на ове аспекте, тимови могу да креирају скалабилне системе дизајна који не зависи од платформе. 🚀

Још једно кључно разматрање је интеграција контроле верзија и колаборативних токова рада. Чувањем датотека токена у спремишту које контролише верзије и комбиновањем са ЦИ/ЦД цевоводима, ажурирања токена се могу тестирати и аутоматски применити. Ово осигурава да токени остају ажурирани на свим платформама без ручне интервенције, минимизирајући грешке и одржавајући интегритет дизајн система. Таква аутоматизација не само да штеди време, већ и подржава растуће тимове који рукују сложеним хијерархијама токена. 😊