পার্ট ১: Figma Variables & Style Tokens: ফিগমা ভেরিয়েবলস ও ডিজাইন টোকেন সেটআপ

ডিজাইন সিস্টেমের কথা উঠলেই অনেক জুনিয়র ডিজাইনার মনে করে, কিছু বাটন (buttons), ইনপুট ফিল্ড আর কার্ড বানিয়ে ফিগমার লোকাল লাইব্রেরিতে পাবলিশ করে দিলেই কাজ শেষ। কিন্তু রিয়েল-ওয়ার্ল্ড লার্জ স্কেল অ্যাপ্লিকেশনে এই অ্যাপ্রোচ মোটেও কাজ করে না।

প্রোডাক্ট যখন বড় হতে থাকে, তখন কোনো ব্র্যান্ড রিডিজাইন বা লাইট মোড থেকে ডার্ক মোডে কনভার্ট করার কাজ যদি প্রতিটি স্ক্রিনে ধরে ধরে করতে হয়, তবে বুঝতে হবে আপনার ডিজাইন সিস্টেমের আর্কিটেকচার মোটেও রেডি নয়। এখানেই প্রবেশ করে ডিজাইন টোকেন (Design Tokens) এবং ফিগমা ভেরিয়েবলস (Figma Variables)। এটি কেবল ডিজাইনের কনসিস্টেন্সি ধরে রাখে না, ডিজাইনার ও ডেভেলপারদের মধ্যে একটি কমন ল্যাঙ্গুয়েজ বা ব্রিজিং তৈরি করে।

আজকে আমরা আলোচনা করব কীভাবে একদম প্র্যাক্টিক্যাল ওয়েতে ফিগমা ভেরিয়েবল ব্যবহার করে ডিজাইন টোকেন সেটআপ করবেন এবংPrimitive বনাম Semantic টোকেনের জটিলতা সহজ ভাষায় সমাধান করব।

১. লুপ হোল: হার্ডকোডেড কালার ভ্যালু ও ডিজাইনার-ডেভ অমিল

আমি যখন ২০১৭ সালে একটি বড় এন্টারপ্রাইজ প্রজেক্টে কাজ শুরু করি, তখন পুরো সিস্টেমে প্রায় ৫০টির মতো আলাদা নীল কালার (Blue shades) ব্যবহার করা হয়েছিল। কোনো ডিজাইনার #2F80ED ব্যবহার করছিল, কেউ #1E88E5, আবার ডেভেলপাররা কোডে তাদের মনমতো নীল কালার ব্যবহার করছিল।

যখন কোম্পানি সিদ্ধান্ত নিল তাদের প্রাইমারি ব্র্যান্ড কালার পরিবর্তন করে একটু ডিপ পার্পল করবে, তখন আমাদের মাথায় আকাশ ভেঙে পড়ার মতো অবস্থা হলো। শতাধিক স্ক্রিন এবং হাজার হাজার লাইন কোড ধরে ধরে হাত দিয়ে চেঞ্জ করতে আমাদের প্রায় তিন সপ্তাহ সময় লেগেছিল। এই ভুলটি হয়েছিল কারণ আমরা কালার ভ্যালু সরাসরি হার্ডকোড (hardcode) করেছিলাম।

ডিজাইন টোকেন হচ্ছে এই হার্ডকোডেড ভ্যালুগুলোর একেকটি সিঙ্গেল সোর্স অব ট্রুথ (Single Source of Truth) বা অ্যাবস্ট্রাকশন নাম। অর্থাৎ, আপনি কালার কোড বা পিক্সেল ভ্যালু সরাসরি ব্যবহার না করে একটি ভেরিয়েবল নাম ব্যবহার করবেন।

২. ডিজাইন টোকেনের ৩টি লেয়ার (Token Hierarchy)

একটি স্ট্যান্ডার্ড এবং স্কেলেবল ডিজাইন সিস্টেমে টোকেনগুলোকে মূলত ৩টি লেয়ারে ভাগ করা হয়:

1. Primitive Tokens (বেস লেয়ার):

একে গ্লোবাল বা অপশন টোকেনও বলা হয়। এখানে র ভ্যালুগুলো (Raw values) ডিফাইন করা থাকে। যেমন: blue-500 = #3B82F6 বা spacing-16 = 16px। এগুলো ডিজাইনে সরাসরি ব্যবহার করা নিষিদ্ধ।

1. Semantic Tokens (ডিসিশন লেয়ার):

এখানে কালার বা স্পেসিংয়ের ব্যবহার বা পারপাস ডিফাইন করা থাকে। যেমন: bg-primary বা text-success বা surface-danger। এটি প্রিমিটিভ টোকেনকে রেফারেন্স করে তৈরি হয়। যেমন: bg-primary পয়েন্ট করবে blue-500 এর দিকে। কালার পরিবর্তন করতে হলে কেবল সেমান্টিক কানেকশন চেঞ্জ করলেই সব জায়গায় আপডেট হয়ে যায়।

1. Component Tokens (স্পেসিফিক লেয়ার):

এটি একদম স্পেসিফিক কম্পোনেন্টের জন্য তৈরি হয়। যেমন: button-primary-bg বা input-border-focus। এটি ডাইরেক্ট সেমান্টিক টোকেন থেকে রিলেশন নেয়।

৩. ফিগমা ভেরিয়েবলস সেটআপ গাইড (Figma Variables Setup)

ফিগমাতে ভেরিয়েবল সেটআপ করার সময় আপনাকে অবশ্যই এই হায়ারার্কি মেনে কাজ করতে হবে:

• কালেকশন তৈরি করা (Collections):

ফিগমার Local Variables প্যানেলে যান। সেখানে দুটি আলাদা কালেকশন তৈরি করুন। একটির নাম দিন 01. Primitive এবং অন্যটির নাম দিন 02. Semantic।

• প্রিমিটিভ কালেকশন (Primitive Collection):

এখানে আপনার কালার প্যালেট ডিফাইন করুন। যেমন: blue/50, blue/100, ... blue/500 ইত্যাদি। একইভাবে স্পেসিংয়ের জন্য spacing/8, spacing/12, spacing/16 ইত্যাদি তৈরি করুন।

• সেমান্টিক কালেকশন (Semantic Collection):

এখানে নতুন ভেরিয়েবল তৈরি করার সময় ভ্যালু টাইপ হিসেবে Alias সিলেক্ট করে প্রিমিটিভ ভেরিয়েবলকে সিলেক্ট করে দিন। যেমন: color/background/primary -> Alias of blue/500।

৪. লাইট ও ডার্ক মোড সুইচার (Multi-mode Variables)

ফিগমা ভেরিয়েবলের সবচেয়ে বড় ম্যাজিক হলো মোড সুইচিং। সেমান্টিক কালেকশনে আপনি যখন ডানপাশে + ক্লিক করে নতুন মোড এড করবেন, তখন ফিগমা আপনাকে দুটি কলাম দেবে: একটি Light Mode এবং একটি Dark Mode।

• কনফিগারেশন:

• color/background/primary ভেরিয়েবলের আন্ডারে:

• Light Mode-এ সেট করুন: Alias of white

• Dark Mode-এ সেট করুন: Alias of gray/900

• color/text/primary ভেরিয়েবলের আন্ডারে:

• Light Mode-এ সেট করুন: Alias of gray/900

• Dark Mode-এ সেট করুন: Alias of white

ডিজাইন স্ক্রিনে কোনো সেকশন সিলেক্ট করে ডানপাশের লেয়ার প্যানেলে গিয়ে ভেরিয়েবল মোড সুইচ করলেই জাদুকরী উপায়ে পুরো ডিজাইন ডার্ক মোডে কনভার্ট হয়ে যাবে, এক পিক্সেলও ম্যানুয়ালি টাচ করতে হবে না।

পরবর্তী পর্বে আমরা দেখব কীভাবে এই ভেরিয়েবলগুলো ব্যবহার করে জটিল কম্পোনেন্ট ভ্যারিয়েন্ট (Variants) এবং স্লট আর্কিটেকচার তৈরি করবেন।

ধন্যবাদ সবাইকে।