Stil Sözlüğü ile Tasarım Jetonlarının Birbirine Bağlantısının Sağlanması

Birbirine Bağlı Tasarım Jetonları Sanatında Ustalaşmak

Tasarım sistemleriyle çalışırken tasarım belirteçleri arasında kusursuz bir bağlantı sağlamak, platformlar arası tutarlılık açısından çok önemlidir. 🧩 Peki token'larınız derleme sırasında hiyerarşilerini kaybederse ne olur? Bu, birçok geliştiricinin karşılaştığı bir zorluktur.

Tasarım belirteçlerinizi titizlikle üç düzeyde (ilkel, anlamsal ve özel) yapılandırdığınızı ve ancak Stil Sözlüğü ile işlendikten sonra birbirlerine olan bağımlılıklarını kaybettiklerini gördüğünüzü hayal edin. Sonuç? Semantik ve spesifik belirteçleriniz, amaçlanan hiyerarşiyi bozan ilkel değerlerle sonuçlanır.

Kendi deneyimime göre, birden çok işletim sistemi için tasarım belirteçleri hazırlarken bu sorunla karşılaştım. Çıktının uygulama için optimize edilmesini sağlarken JSON dosyalarımın birbirine bağlı yapısını koruyan bir çözüme ihtiyacım vardı. 🚀

Bu kılavuzda, bu ilişkileri sürdürmek ve belirteçlerinizin amaçlandığı gibi birbirine bağlı kalmasını sağlamak için Stil Sözlüğünü nasıl yapılandıracağınız konusunda size yol göstereceğim. İster belirteç tasarımında yeni olun ister benzer bir sorunu gideriyor olun, bu bilgiler çok değerli olacaktır. Hadi dalalım! 😊

Hiyerarşik Tasarım Token Dışa Aktarmada Uzmanlaşma

Sağlanan komut dosyalarında birincil amaç, tasarım belirteçlerinin hiyerarşik yapısını birden fazla düzeyde (ilkel, anlamsal ve özel) korumaktır. Stil Sözlüğü'nü kullanarak, dışa aktarma işlemi sırasında belirteçler arasındaki ilişkilerin korunmasını sağlamak için özel dönüşümler ve formatlar sunuyoruz. Örneğin, 'registerTransform' yöntemi, kategori, tür ve öğe niteliklerine dayalı olarak yapılandırılmış bir format kullanarak belirteç adlarının nasıl oluşturulduğunu özelleştirir. Bu hiyerarşik adlandırma, belirteç derlemeleri arasında netlik ve tutarlılık sağlar. 🛠️

Bir diğer önemli özellik ise belirteçlerin yapılandırılmış bir JSON dosyasına aktarılmasını sağlayan 'registerFormat' yöntemidir. Bu format, orijinal girdide tanımlanan token ilişkilerini koruyarak bunların çeşitli platformlarda uygulanmasını kolaylaştırır. "Birincil renk" gibi anlamsal belirteçlerin "mavi-500" gibi ilkel belirteçlere referans verdiği büyük bir proje üzerinde çalıştığınızı hayal edin; derleme sırasında bu ilişkinin korunması, uygulama hatalarını önlemek için çok önemlidir. Bu özelliklerden yararlanan Stil Sözlüğü, simge bütünlüğünü korumak için güçlü bir araç haline gelir.

Python tabanlı komut dosyasında, iç içe geçmiş sözlükler arasında gezinmek için özyinelemeli bir işlev kullanıyoruz ve tasarım belirteçlerinin dönüşümü sırasında hiyerarşiyi koruyoruz. Örneğin, bir "button.primary.background" belirteci bir "color.primary" belirtecine başvuruyorsa, işlev bu ilişkilerin bozulmadan kalmasını sağlar. Python, JSON dosyalarının işlenmesinde büyük esneklik sunduğundan, bu yöntem özellikle JavaScript ekosistemi dışında tasarım belirteçleriyle çalışması gereken ekipler için kullanışlıdır. 🚀

Son olarak, JavaScript komut dosyasında Chai kullanan birim testlerinin entegrasyonu, kritik bir doğrulama katmanı ekler. Bu testler, belirteçlerin yalnızca doğru şekilde derlenmesini değil aynı zamanda amaçlanan ilişkileri de korumasını sağlar. Örneğin, bir test anlamsal belirteçlerin beklendiği gibi temel değerlere referans verdiğini doğrularken, bir diğeri derlenmiş çıktıda üç düzeyin (ilkel, anlamsal ve özel) mevcut olmasını sağlar. Bu komut dosyaları ve uygulamalarla tasarım sistemleri, platformlar arasında tutarlılığı korurken, potansiyel tuzaklardan kaçınarak ve geliştirme süresinden tasarruf ederken verimli bir şekilde ölçeklenebilir. 😊

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

Platformlar Arasında Token İlişkilerini Korumak

Tasarım belirteçleriyle çalışmanın gözden kaçan yönlerinden biri bunların web, iOS ve Android gibi çeşitli platformlarla uyumluluğunun sağlanmasıdır. Stil Sözlüğü gibi araçlar güçlü olsa da, belirteçlerin amaçlanan yapılarını korumasını sağlamak için dikkatli bir yapılandırma gerektirirler. Örneğin, "button.primary" gibi anlamsal belirteçler, değerlerini sabit kodlamak yerine "color.blue" gibi ilkel belirteçlere referans vermelidir. Bu birbirine bağlılık, geliştiricilerin ilkel düzeyde değişiklikler yapmasına ve güncellemelerin tüm bağımlı tokenlara yansıdığını görmesine olanak tanır. 🌐

Platforma özel uyumluluk elde etmek amacıyla her çıktıya özel dönüşümler ve formatlar uyarlanabilir. Bu, belirteçlerin yalnızca tutarlı olmasını değil aynı zamanda platformun yerel stil kurallarına göre optimize edilmesini de sağlar. Örneğin, iOS ".plist" biçiminde belirteçler gerektirebilirken web geliştiricileri JSON veya CSS değişkenlerini tercih edebilir. Bu özel çıktıların kullanılması, farklı ekipler için uygulamayı kolaylaştırırken token bütünlüğünü korur. Ekipler bu yönlere odaklanarak ölçeklenebilir, platformdan bağımsız tasarım sistemleri oluşturabilir. 🚀

Dikkate alınması gereken bir diğer önemli konu ise sürüm kontrolünü ve işbirlikçi iş akışlarını entegre etmektir. Belirteç dosyalarını sürüm kontrollü bir depoda depolayarak ve bunları CI/CD işlem hatlarıyla birleştirerek, belirteçlerdeki güncellemeler otomatik olarak test edilebilir ve dağıtılabilir. Bu, tokenlerin manuel müdahaleye gerek kalmadan platformlar arasında güncel kalmasını sağlar, hataları en aza indirir ve tasarım sisteminin bütünlüğünü korur. Bu otomasyon yalnızca zamandan tasarruf sağlamakla kalmıyor, aynı zamanda karmaşık token hiyerarşileriyle uğraşan büyüyen ekipleri de destekliyor. 😊