اسٹائل ڈکشنری کے ساتھ باہم مربوط ڈیزائن ٹوکن کو یقینی بنانا

باہم منسلک ڈیزائن ٹوکن کے فن میں مہارت حاصل کرنا

ڈیزائن سسٹمز کے ساتھ کام کرتے وقت، ڈیزائن ٹوکنز کے درمیان ہموار کنکشن حاصل کرنا پلیٹ فارمز میں مستقل مزاجی کے لیے بہت ضروری ہے۔ 🧩 لیکن کیا ہوتا ہے جب آپ کے ٹوکن تالیف کے دوران اپنا درجہ بندی کھو دیتے ہیں؟ یہ ایک چیلنج ہے جس کا بہت سے ڈویلپرز کو سامنا ہے۔

تصور کریں کہ آپ کے ڈیزائن ٹوکنز کو احتیاط سے تین سطحوں میں ترتیب دیں — قدیم، سیمنٹک، اور مخصوص — صرف یہ جاننے کے لیے کہ اسٹائل ڈکشنری کے ساتھ کارروائی کرنے کے بعد، وہ اپنا باہمی انحصار کھو دیتے ہیں۔ نتیجہ؟ آپ کے معنوی اور مخصوص ٹوکنز ابتدائی اقدار کے ساتھ ختم ہوتے ہیں، مطلوبہ درجہ بندی کو توڑتے ہیں۔

میرے اپنے تجربے میں، مجھے ایک سے زیادہ آپریٹنگ سسٹمز کے لیے ڈیزائن ٹوکن تیار کرتے وقت اس مسئلے کا سامنا کرنا پڑا۔ مجھے ایک ایسے حل کی ضرورت ہے جو میری JSON فائلوں کے باہم منسلک ڈھانچے کو برقرار رکھے جبکہ اس بات کو یقینی بنائے کہ آؤٹ پٹ کو نفاذ کے لیے بہتر بنایا گیا ہو۔ 🚀

اس گائیڈ میں، میں آپ کو ان رشتوں کو برقرار رکھنے کے لیے اسٹائل ڈکشنری کو ترتیب دینے کے طریقہ کے بارے میں بتاؤں گا، اس بات کو یقینی بناتے ہوئے کہ آپ کے ٹوکن حسب منشا ایک دوسرے سے جڑے رہیں۔ چاہے آپ ٹوکن ڈیزائن کرنے کے لیے نئے ہوں یا اسی طرح کے مسئلے کو حل کرنے کے لیے، یہ بصیرتیں انمول ہوں گی۔ آئیے اندر غوطہ لگائیں! 😊

درجہ بندی کے ڈیزائن ٹوکن ایکسپورٹ میں مہارت حاصل کرنا

فراہم کردہ اسکرپٹس میں، بنیادی مقصد متعدد سطحوں پر ڈیزائن ٹوکنز کے درجہ بندی کے ڈھانچے کو برقرار رکھنا ہے۔ اسٹائل ڈکشنری کا استعمال کرتے ہوئے، ہم اپنی مرضی کے مطابق تبدیلیاں اور فارمیٹس متعارف کراتے ہیں تاکہ یہ یقینی بنایا جا سکے کہ برآمدی عمل کے دوران ٹوکنز کے درمیان تعلقات محفوظ ہیں۔ مثال کے طور پر، 'registerTransform' طریقہ اپنی مرضی کے مطابق بناتا ہے کہ ٹوکن کے نام کیسے بنائے جاتے ہیں، ان کے زمرے، قسم اور آئٹم کی خصوصیات کی بنیاد پر ایک ساختی شکل کا استعمال کرتے ہوئے۔ یہ درجہ بندی کا نام ٹوکن تالیفات میں واضح اور مستقل مزاجی کو یقینی بناتا ہے۔ 🛠️

ایک اور کلیدی خصوصیت 'رجسٹر فارمیٹ' طریقہ ہے، جو ٹوکنز کو ایک ساختی JSON فائل میں برآمد کرنے کے قابل بناتا ہے۔ یہ فارمیٹ ٹوکن تعلقات کو برقرار رکھتا ہے جیسا کہ اصل ان پٹ میں بیان کیا گیا ہے، جس سے انہیں مختلف پلیٹ فارمز میں لاگو کرنا آسان ہو جاتا ہے۔ ایک بڑے پروجیکٹ پر کام کرنے کا تصور کریں جہاں سیمینٹک ٹوکن جیسے "پرائمری کلر" پرائمٹی ٹوکنز جیسے "بلیو-500" کا حوالہ دیتے ہیں — تالیف کے دوران اس تعلق کو محفوظ رکھنا عمل درآمد کی غلطیوں کو روکنے کے لیے ضروری ہے۔ ان خصوصیات کا فائدہ اٹھا کر، سٹائل ڈکشنری ٹوکن کی سالمیت کو برقرار رکھنے کے لیے ایک طاقتور ٹول بن جاتی ہے۔

ازگر پر مبنی اسکرپٹ میں، ہم ڈیزائن ٹوکنز کی تبدیلی کے دوران درجہ بندی کو محفوظ رکھتے ہوئے، نیسٹڈ لغات کے ذریعے تشریف لے جانے کے لیے ایک تکراری فنکشن استعمال کرتے ہیں۔ مثال کے طور پر، اگر "button.primary.background" ٹوکن ایک "color.primary" ٹوکن کا حوالہ دیتا ہے، تو فنکشن یقینی بناتا ہے کہ یہ تعلقات برقرار رہیں۔ یہ طریقہ خاص طور پر ان ٹیموں کے لیے مفید ہے جنہیں JavaScript ایکو سسٹم سے باہر ڈیزائن ٹوکن کے ساتھ کام کرنے کی ضرورت ہے، کیونکہ Python JSON فائلوں کو پروسیس کرنے کے لیے بہترین لچک پیش کرتا ہے۔ 🚀

آخر میں، جاوا اسکرپٹ اسکرپٹ میں Chai کا استعمال کرتے ہوئے یونٹ ٹیسٹوں کا انضمام تصدیق کی ایک اہم پرت کا اضافہ کرتا ہے۔ یہ ٹیسٹ اس بات کو یقینی بناتے ہیں کہ ٹوکن نہ صرف درست طریقے سے مرتب ہوتے ہیں بلکہ اپنے مطلوبہ تعلقات کو بھی برقرار رکھتے ہیں۔ مثال کے طور پر، ایک ٹیسٹ اس بات کی تصدیق کرتا ہے کہ سیمینٹک ٹوکنز توقع کے مطابق ابتدائی اقدار کا حوالہ دیتے ہیں، جب کہ دوسرا اس بات کو یقینی بناتا ہے کہ تینوں سطحیں - قدیم، سیمنٹک، اور مخصوص — مرتب شدہ آؤٹ پٹ میں موجود ہیں۔ ان اسکرپٹس اور پریکٹسز کے ساتھ، ڈیزائن سسٹمز پوری پلیٹ فارمز میں مستقل مزاجی کو برقرار رکھتے ہوئے، ممکنہ نقصانات سے بچتے ہوئے اور ترقیاتی وقت کی بچت کرتے ہوئے مؤثر طریقے سے پیمانہ بنا سکتے ہیں۔ 😊

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

تمام پلیٹ فارمز پر ٹوکن تعلقات کو محفوظ کرنا

ڈیزائن ٹوکن کے ساتھ کام کرنے کا ایک نظر انداز کردہ پہلو مختلف پلیٹ فارمز، جیسے کہ ویب، iOS اور Android کے ساتھ ان کی مطابقت کو یقینی بنانا ہے۔ اگرچہ اسٹائل ڈکشنری جیسے ٹولز طاقتور ہیں، ان کو محتاط ترتیب کی ضرورت ہوتی ہے تاکہ یہ یقینی بنایا جا سکے کہ ٹوکنز اپنی مطلوبہ ساخت کو برقرار رکھیں۔ مثال کے طور پر، "button.primary" جیسے سیمنٹک ٹوکنز کو اپنی اقدار کو ہارڈ کوڈنگ کرنے کے بجائے "color.blue" جیسے قدیم ٹوکن کا حوالہ دینا چاہیے۔ یہ باہمی ربط ڈیولپرز کو ابتدائی سطح پر تبدیلیاں کرنے اور تمام منحصر ٹوکنز میں جھلکتی تازہ کاریوں کو دیکھنے کی اجازت دیتا ہے۔ 🌐

پلیٹ فارم کے لیے مخصوص مطابقت حاصل کرنے کے لیے، اپنی مرضی کے مطابق تبدیلیاں اور فارمیٹس ہر آؤٹ پٹ کے لیے تیار کیے جا سکتے ہیں۔ یہ اس بات کو یقینی بناتا ہے کہ ٹوکن نہ صرف مطابقت رکھتے ہیں بلکہ پلیٹ فارم کے مقامی طرز کے کنونشنز کے لیے بھی موزوں ہیں۔ مثال کے طور پر، iOS کو `.plist` فارمیٹ میں ٹوکن کی ضرورت ہو سکتی ہے، جبکہ ویب ڈویلپر JSON یا CSS متغیر کو ترجیح دیتے ہیں۔ ان خصوصی آؤٹ پٹس کا استعمال متنوع ٹیموں کے لیے عمل کو ہموار کرتے ہوئے ٹوکن کی سالمیت کو برقرار رکھتا ہے۔ ان پہلوؤں پر توجہ مرکوز کرکے، ٹیمیں توسیع پذیر، پلیٹ فارم-ایگنوسٹک ڈیزائن سسٹم بنا سکتی ہیں۔ 🚀

ایک اور اہم غور ورژن کنٹرول اور باہمی تعاون کے کام کے بہاؤ کو مربوط کرنا ہے۔ ٹوکن فائلوں کو ورژن کے زیر کنٹرول ریپوزٹری میں اسٹور کرکے اور انہیں CI/CD پائپ لائنوں کے ساتھ جوڑ کر، ٹوکنز کی اپ ڈیٹس کو خود بخود جانچا اور تعینات کیا جا سکتا ہے۔ یہ یقینی بناتا ہے کہ ٹوکنز دستی مداخلت کے بغیر تمام پلیٹ فارمز پر تازہ ترین رہیں، غلطیوں کو کم کریں اور ڈیزائن سسٹم کی سالمیت کو برقرار رکھیں۔ اس طرح کی آٹومیشن نہ صرف وقت بچاتی ہے بلکہ پیچیدہ ٹوکن درجہ بندی کو سنبھالنے والی بڑھتی ہوئی ٹیموں کی بھی مدد کرتی ہے۔ 😊