পার্ট ২: Complex Component Variants & Properties: কমপ্লেক্স কম্পোনেন্ট ভ্যারিয়েন্ট ও প্রোপার্টি স্ট্রাকচার

ডিজাইন সিস্টেম যখন বড় হতে থাকে, তখন কম্পোনেন্ট লাইব্রেরি মেইনটেইন করা সবচেয়ে কঠিন হয়ে দাঁড়ায়। ফিগমাতে কাজ করার সময় অনেকে মনে করে, একটি বাটনের লাইট/ডার্ক মোড, প্রাইমারি/সেকেন্ডারি স্টেট, আইকন লেফট/রাইট এবং হোভার/অ্যাক্টিভ স্টেটের জন্য আলাদা আলাদা ভ্যারিয়েন্ট (Variants) তৈরি করাটাই প্রফেশনাল পদ্ধতি।

কিন্তু বাস্তবতা হলো, ছোট একটি বাটনের জন্য আপনি যদি ২৪০টি আলাদা ভ্যারিয়েন্ট তৈরি করে বসেন, তবে ফিগমার ফাইল পারফরম্যান্স ধীর হয়ে যাবে এবং লাইব্রেরি ম্যানেজ করা দুঃস্বপ্ন হয়ে উঠবে। একে ডিজাইন সিস্টেমের পরিভাষায় বলে ভ্যারিয়েন্ট স্প্রল (Variant Sprawl)।

আজকে আমরা দেখব কীভাবে মডার্ন ফিগমা ফিচার ও কম্পোনেন্ট প্রোপার্টিজ (Component Properties) ব্যবহার করে ভ্যারিয়েন্ট সংখ্যা ৯০% পর্যন্ত কমিয়ে আনা যায় এবং কীভাবে স্লট প্যাটার্ন (Slot Pattern) ব্যবহার করে ফ্লেক্সিবল কম্পোনেন্ট ডিজাইন করা যায়।

১. লুপ হোল: ভ্যারিয়েন্টের বিস্ফোরণ (Variant Sprawl)

কয়েক বছর আগে আমি যখন একটি ফিনটেক কোম্পানির ডিজাইন সিস্টেম অডিট করছিলাম, আমি দেখলাম তাদের সাধারণ একটি Card কম্পোনেন্টের ৩৫০টির বেশি ভ্যারিয়েন্ট তৈরি করা হয়েছে। কারণ কার্ডটির মাঝে কখনও ইমেজ থাকে, কখনও নোটিফিকেশন ব্যাজ থাকে, কখনও টেক্সট ফিল্ড থাকে। প্রতিটি আলাদা কেসের জন্য তারা একটি করে নতুন ভ্যারিয়েন্ট বানাচ্ছিল।

ফলাফল? যখনই কার্ডের বর্ডার রেডিয়াস পরিবর্তন করার প্রয়োজন হলো, ডিজাইনারকে ৩৫০টি ভ্যারিয়েন্ট ম্যানুয়ালি এডিট করতে হলো এবং এর মধ্যে অনেকগুলো ভ্যারিয়েন্ট মিস হয়ে গেল। এটি কেবল ডিজাইনের অগোছালো ভাবই বাড়ায় না, আপনার টিমকে স্লো করে দেয়।

স্কেলেবল ডিজাইন সিস্টেমে ভ্যারিয়েন্ট শুধুমাত্র তখনই ব্যবহার করা উচিত যখন কম্পোনেন্টের ভিজ্যুয়াল স্টেট (যেমন: Primary vs Secondary) অথবা ইন্টারঅ্যাকশন স্টেট (যেমন: Hover vs Active) পরিবর্তন হয়। টেক্সট পরিবর্তন বা আইকন দেখানোর মতো কাজের জন্য কখনই নতুন ভ্যারিয়েন্ট বানানো যাবে না।

২. কম্পোনেন্ট প্রোপার্টিজ এর সঠিক ব্যবহার (Component Properties)

ফিগমাতে ভ্যারিয়েন্ট কমানোর জন্য ৩টি ম্যাজিকাল প্রোপার্টি রয়েছে:

1. Boolean Property (হ্যাঁ/না ডিসিশন):

বাটনে আইকন থাকবে কি থাকবে না, তা কন্ট্রোল করার জন্য ভুল পদ্ধতি হলো আলাদা ভ্যারিয়েন্ট বানানো। সঠিক পদ্ধতি হলো আইকন লেয়ারটি সিলেক্ট করে ডানপাশের লেয়ার উইজেট থেকে একটি Boolean Property তৈরি করা (যেমন: Show Icon = True/False)।

1. Text Property (ইনস্ট্যান্ট টেক্সট চেঞ্জ):

বাটনের ভেতরের টেক্সট চেঞ্জ করতে ডিজাইনারকে যেন ডাবল-ক্লিক করে একদম গভীরে ঢুকতে না হয়। টেক্সট লেয়ারটি সিলেক্ট করে প্রোপার্টি প্যানেলে টেক্সট ফিল্ডের সাথে বাইন্ড করে দিন। ডিজাইনার সাইডবার থেকেই সরাসরি টেক্সট চেঞ্জ করতে পারবে।

1. Instance Swap Property (আইকন পরিবর্তন):

বাটনে কোন আইকনটি বসবে তা সহজে সিলেক্ট করার জন্য ইনস্ট্যান্স সোয়াপ প্রোপার্টি সেটআপ করুন। এর ফলে ডিজাইনার খুব সহজেই তার প্রয়োজনীয় আইকন ড্রপডাউন মেনু থেকে সিলেক্ট করতে পারে।

এই তিনটি প্রোপার্টি ব্যবহার করলে একটি বাটনের জন্য ভ্যারিয়েন্ট সংখ্যা ২৪০ থেকে নেমে মাত্র ৬-৮টিতে চলে আসবে!

৩. স্লট প্যাটার্ন ও কাস্টম লেআউট (Slot Component Pattern)

SaaS বা জটিল অ্যাপে Modal বা Card ডিজাইন করার সময় স্লট প্যাটার্ন ব্যবহার করা অত্যন্ত জনপ্রিয়। কার্ডের ভেতরে কন্টেন্ট হিসেবে কী বসবে তা আগে থেকে ডিফাইন করা অসম্ভব।

• স্লট কী?

স্লট হলো একটি প্লেসহোল্ডার কম্পোনেন্ট (যেমন: Slot বা Placeholder), যা মূলত একটি ফাঁকা অটো-লেআউট ফ্রেম।

• স্লট কীভাবে কাজ করে?

১. প্রথমে একটি কন্টেন্ট-লেস _Slot কম্পোনেন্ট ডিজাইন সিস্টেমের ভেতরে রাখুন।

২. আপনার মেইন Modal বা Card ডিজাইনের ভেতরে এই _Slot ইনস্ট্যান্সটি বসান।

৩. ডিজাইনার যখন প্রজেক্ট ফাইলে মডালটি ব্যবহার করবে, সে লোকাল ফাইলে তার কাস্টম আর্টবোর্ড বা ফর্ম ডিজাইন করে নেবে এবং ফিগমার Instance Swap ড্রপডাউন ব্যবহার করে স্লটের জায়গায় তার তৈরি করা কাস্টম আর্টবোর্ডটি রিপ্লেস করে দেবে।

এর ফলে মডাল বা কার্ডের হেডার ও ফুটার সম্পূর্ণ গ্লোবাল গাইডলাইন মেনে কনসিস্টেন্ট থাকবে, কিন্তু মাঝখানের বডি এরিয়া ডিজাইনার তার প্রয়োজন অনুযায়ী ফ্লেক্সিবল ব্যবহার করতে পারবে।

পরবর্তী পর্বে আমরা দেখব কীভাবে এই কম্পোনেন্টগুলো ডেভেলপারদের কাছে হ্যান্ডঅফ করার জন্য স্পেকস ও রেডলাইনিং ডকুমেন্টেশন তৈরি করবেন।

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