ডিজাইন টোকেন কী?

ডিজাইন টোকেন হলো নাম দেওয়া একটি মান, যা একটিমাত্র ডিজাইন সিদ্ধান্ত ধরে রাখে - যেমন একটি রং, একটি স্পেসিং ধাপ বা একটি ফন্ট সাইজ। নাম থাকার ফলে সিদ্ধান্তটি ডিজাইন টুল ও কোড দুই জায়গাতেই পুনর্ব্যবহার করা যায়, প্রতিবার হাতে লিখতে হয় না।

একটি মানকে নাম দেওয়ার দরকার কী

প্রধান বোতামগুলোতে ব্যবহৃত রঙের কথা ভাবুন। সরাসরি লিখলে সেটি স্টাইলশিটে #2563EB হিসেবে থাকে, Figma-র ফিলে একটি হেক্স ফিল্ড হিসেবে থাকে, আর গত সপ্তাহে কোনো ডেভেলপারের টাইপ করা কোডে একটি স্ট্রিং হিসেবে থাকে। তিনটি অনুলিপি, একে অপরের সঙ্গে কোনো সম্পর্ক নেই।

টোকেন হিসেবে সেটি একবারই থাকে, একটি নামের নিচে:

--color-action-primary: #2563EB;

বাকি সবকিছু ওই নামটিকে নির্দেশ করে। মান একবার বদলান, প্রতিটি ব্যবহার বদলে যাবে। এই পরোক্ষতাই পুরো ধারণাটি, আর টোকেন সম্পর্কে বাকি সবকিছু এখান থেকেই আসে।

টোকেন সাধারণত কী কী ঢাকে

রং: প্যালেট, স্কেল, এবং ব্যাকগ্রাউন্ড, বর্ডার, টেক্সট ও স্ট্যাটাসের মতো অর্থগত ভূমিকা
টাইপোগ্রাফি: ফন্ট পরিবার, আকার, ওজন, লাইন হাইট, অক্ষরের ফাঁক
স্পেসিং: একটি সামঞ্জস্যপূর্ণ স্কেল, সাধারণত 4px বা 8px ভিত্তিতে
বর্ডার রেডিয়াস ও বর্ডারের পুরুত্ব
ছায়া ও উচ্চতা
মোশন: সময়কাল ও ইজিং কার্ভ
ব্রেকপয়েন্ট ও লেআউটের মাপ

টোকেন ভেরিয়েবল নয়

পার্থক্যটি গুরুত্বপূর্ণ। CSS ভেরিয়েবল একটি কৌশল। ডিজাইন টোকেন একটি সিদ্ধান্ত, যা কাকতালীয়ভাবে ওই কৌশলের মাধ্যমে প্রকাশ পায়।

বাস্তব পার্থক্যটি বহনযোগ্যতার। টোকেন যেকোনো একটি প্রযুক্তি থেকে স্বাধীনভাবে বিদ্যমান, আর সেজন্যই একই টোকেন সেট CSS কাস্টম প্রপার্টি, Tailwind কনফিগ, Figma ভেরিয়েবল, Swift বা Kotlin হিসেবে বের করা যায়। যদি সেটি কেবল CSS-এর একটি লাইন হিসেবেই থাকে, তবে সেটি একটি ভেরিয়েবল।

ফরম্যাট

W3C-র অধীন Design Tokens Community Group একটি JSON ফরম্যাট প্রকাশ করে, যা টুলগুলোর মধ্যে সাধারণ বিনিময়ের জন্য ভাবা হয়েছে। এটি প্রতিটি টোকেনকে একটি $value ও একটি $type দেয়:

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

গ্রহণের হার অসম হলেও বাড়ছে, এবং ডিজাইন টুল ও বিল্ড পাইপলাইনের মধ্যে একটি নিরপেক্ষ বিনিময় ফরম্যাটের সবচেয়ে কাছাকাছি জিনিস এটিই।

Flash DSM এখানে কোথায়

Flash DSM একটি প্রম্পট, একটি ওয়েবসাইটের ঠিকানা, একটি Figma ফাইল বা একটি স্ক্রিনশট থেকে সম্পূর্ণ টোকেন সেট তৈরি করে, তারপর সেটিকে CSS কাস্টম প্রপার্টি, Tailwind কনফিগ, Tokens Studio JSON বা Figma ভেরিয়েবল হিসেবে রপ্তানি করে।