💡 [Design Systems for Scale Series]
এটি ৪ পর্বের একটি প্র্যাক্টিক্যাল গাইডলাইন সিরিজ, যেখানে প্রোডাকশন-গ্রেড ডিজাইন সিস্টেম, ফিগমা ভেরিয়েবলস ও ডিজাইন টোকেন আর্কিটেকচার, কমপ্লেক্স কম্পোনেন্ট ডিজাইন, ডেভেলপার হ্যান্ডঅফ এবং ডিজাইন সিস্টেমের রক্ষণাবেক্ষণ নিয়ে ইন-ডেপথ আলোচনা করা হয়েছে।
ডিজাইন সিস্টেম হলো একটি জীবন্ত অর্গানিজমের (Living Organism) মতো। এটি কখনই কোনো ওয়ান-টাইম প্রজেক্ট নয় যে একবার বানিয়ে রেখে দিলেই কাজ শেষ। প্রোডাক্টের গ্রোথ এবং নতুন রিকোয়ারমেন্টের সাথে সাথে ডিজাইন সিস্টেম ক্রমাগত বিবর্তিত এবং আপডেট হতে থাকবে।
তবে সমস্যা হলো, টিম যখন বড় হয়, তখন কোনো র্যান্ডম ডিজাইনার যদি গ্লোবাল লাইব্রেরিতে গিয়ে একটা বাটনের কালার বা ইনপুট ফন্টের সাইজ কাস্টমাইজ করে সরাসরি লাইভ লাইব্রেরি আপডেট পাবলিশ করে দেয়, তবে প্রজেক্টের রানিং ফাইলগুলোর হাজার হাজার স্ক্রিনে ডিজাইন ভেঙে ছারখার হয়ে যেতে পারে। একে বলে লাইব্রেরি ব্রেকিং চেঞ্জ (Library Breaking Changes)।
আজকে সিরিজের শেষ পর্বে আমরা আলোচনা করব কীভাবে ডিজাইন সিস্টেম স্কেল করবেন, ফিগমা ব্রাঞ্চিং (Figma Branching) পদ্ধতি ব্যবহার করে নিরাপদে গ্লোবাল ফাইল আপডেট করবেন এবং কীভাবে টিমের অন্যান্য ডিজাইনারদের থেকে অবদানের জন্য অবজেকশন ফ্রি কন্ট্রিবিউশন গাইডলাইন সেটআপ করবেন।
১. লুপ হোল: গ্লোবাল কম্পোনেন্টে সরাসরি মডিফিকেশন
একটা সাধারণ ভুল যা আমি অনেক ডিজাইন টিমে দেখেছি: টিমের কোনো ডিজাইনার নতুন ফিচার ডিজাইনের কাজ করছে এবং ফিচারটির প্রয়োজনে তার একটু কাস্টম কার্ড ডিজাইন দরকার। সে সরাসরি মেইন গ্লোবাল ডিজাইন সিস্টেম ফাইলটি ওপেন করে কার্ডের মেইন কম্পোনেন্ট এডিট করে দেয়।
এর ফলে লাইব্রেরি যখন সিঙ্ক হয়, তখন অন্যান্য ডিজাইনারদের প্রজেক্ট ফাইলের সম্পূর্ণ কার্ড লেআউট বদলে যায় এবং অনেক পুরনো ফাইল আনঅর্গানাইজড হয়ে পড়ে।
ডিজাইন সিস্টেমে কোনো অবস্থাতেই সরাসরি মেইন ফাইলে (Main File) ঢুকে গ্লোবাল কম্পোনেন্ট মডিফাই করা যাবে না। প্রতিটি আপডেটের জন্য একটি সুনির্দিষ্ট টেস্টিং ও রিভিউ প্রসেস থাকতে হবে।
২. ফিগমা ব্রাঞ্চিং ও সেভ মার্জ ফ্লো (Figma Branching & Merge)
ফিগমা অর্গানাইজেশন ও এন্টারপ্রাইজ প্ল্যানে সফটওয়্যার ডেভেলপমেন্টের মতোই ব্রাঞ্চিং (Branching) সুবিধা রয়েছে।
- ব্রাঞ্চ তৈরি করা (Create Branch):
মেইন ফাইলে এডিট না করে প্রথমে একটি নতুন ব্রাঞ্চ তৈরি করুন। ব্রাঞ্চের নাম দিন ট্র্যাকিং টিকেট নম্বর বা কাজের ধরণ অনুসারে (যেমন: feat/new-input-focus-states).
- লকাল টেস্টিং (Sandbox Testing):
নতুন ব্রাঞ্চের ভেতর কম্পোনেন্টের আপডেট বা নতুন ডিজাইন সম্পন্ন করুন। এরপর প্রজেক্টের ২-৩টি স্ক্রিন লোকালি ব্রাঞ্চের ভেতর এনে টেস্ট করুন যে ডিজাইন ভেঙে যাচ্ছে কি না।
- রিভিউ ও মার্জ (Review & Merge):
কাজ শেষ হলে ডিজাইন সিস্টেমের লিড বা অন্যান্য ডিজাইনারদের রিভিউ রিকোয়েস্ট পাঠান। তাদের মতামত ও অ্যাপ্রুভাল পাওয়ার পর ব্রাঞ্চটি মেইন ফাইলে মার্জ (Merge) করুন। মার্জ করার পর মেইন লাইব্রেরি আপডেট টিমের কাছে রিলিজ (Release) করুন।
৩. স্টাইল ডিকশনারি ও টোকেন অটোমেশন (Style Dictionary & Sync)
ডিজাইন ভেরিয়েবল ও টোকেনগুলো কোডবেসে স্বয়ংক্রিয়ভাবে সিঙ্ক করার সবচেয়ে পপুলার টুল হলো অ্যামাজনের স্টাইল ডিকশনারি (Style Dictionary)।
- অটোমেশন ফ্লো:
১. ফিগমা থেকে টোকেন প্লাগইন দিয়ে টোকেন JSON ফাইলটি এক্সপোর্ট করে গিথাব (GitHub) রিপোজিটরিতে একটি পুল রিকোয়েস্ট (Pull Request) পাঠানো হয়।
২. গিথাব অ্যাকশন রান হয়ে স্টাইল ডিকশনারি স্ক্রিপ্টটি সেই JSON ফাইলটিকে প্রসেস করে।
৩. প্রসেসড JSON টি এক সেকেন্ডের মধ্যে আইওএস অ্যাপের জন্য Swift কালার ভেরিয়েবলস, অ্যান্ড্রয়েডের জন্য XML বা জেটপ্যাক কম্পোজ ভ্যালু এবং ওয়েবের জন্য CSS Variables / Tailwind theme ফাইলের রূপান্তর করে ডিস্ট্রিবিউট করে দেয়।
এর ফলে ডিজাইনার ও ডেভেলপারের মধ্যে কালার কোড বা পিক্সেল নিয়ে জিরো ম্যানুয়াল কাজের মাধ্যমে সম্পূর্ণ সিস্টেম কোডবেস আপডেট হয়ে যায়।
৪. কন্ট্রিবিউশন গাইডলাইন সেটআপ (Contribution Framework)
ডিজাইন সিস্টেম টিম একাই সব কন্টেন্ট বানাবে না। টিমের অন্যান্য প্রোডাক্ট ডিজাইনাররা যখন কাজ করবে, তখন তাদের নতুন কম্পোনেন্টের প্রয়োজন হবে।
- কন্ট্রিবিউশন রুলস (Decision Tree):
ডিজাইনারদের জন্য একটি ডিসিশন ট্রি বানিয়ে দিন:
- আপনার প্রয়োজনীয় কম্পোনেন্টটি কি সিস্টেমে ইতিমধ্যে আছে?
- হ্যাঁ -> ব্যবহার করুন।
- না -> এটি কি একাধিক ফাইলে ব্যবহৃত হবে?
- না -> এটিকে লোকাল ফাইলে ডাস্ট বা কাস্টম কম্পোনেন্ট হিসেবে রাখুন।
- হ্যাঁ -> ডিজাইন সিস্টেম টিমের কাছে একটি রিকোয়েস্ট সাবমিট করুন।
- উইকলি রিভিউ (Weekly System QA):
প্রতি সপ্তাহে টিম কন্ট্রিবিউশন রিকোয়েস্টগুলো রিভিউ করবে এবং সে অনুযায়ী মার্জ প্রসেস রান করবে। এর ফলে ডিজাইন সিস্টেমটি স্লোলি ও হেলদি ওয়েতে স্কেল করবে।
আমাদের ৪ পর্বের ডিজাইন সিস্টেম সিরিজটি এখানেই শেষ হলো। আশা করি প্র্যাক্টিক্যাল গাইডলাইনগুলো আপনাদের রিয়েল লাইফ প্রজেক্টে ডিজাইন সিস্টেম আর্কিটেকচার গড়তে সাহায্য করবে।
ধন্যবাদ সবাইকে।
এই সিরিজের অন্যান্য পর্বগুলো:
- 🔗 পর্ব ১: Figma Variables & Style Tokens: ফিগমা ভেরিয়েবলস ও ডিজাইন টোকেন সেটআপ
- 🔗 পর্ব ২: Complex Component Variants & Properties: কমপ্লেক্স কম্পোনেন্ট ভ্যারিয়েন্ট ও প্রোপার্টি স্ট্রাকচার
- 🔗 পর্ব ৩: Documentation & Style Guides for Devs: ডেভেলপার হ্যান্ডঅফ ও ডকুমেন্টেশন প্রসেস
- 📌 পর্ব ৪ (আপনি এখানে আছেন): Maintaining & Updating Systems: ডিজাইন সিস্টেম স্কেল ও মেইনটেইন করার গাইডলাইন