ডিজাইন সিস্টেম আর কম্পোনেন্ট থিংকিং

কখনো খেয়াল করেছেন একটা ভালোভাবে তৈরি সাইটের বাটন, spacing, আর রং সব একই family-র মনে হয়, যে page-এই থাকুন না কেন? এই সামঞ্জস্যতা কোনো accident না — এটা আসে প্রতিটা page আলাদাভাবে style করার বদলে design system-এ চিন্তা করা থেকে।

একটা design system হলো একটা product কেমন দেখায় আর কেমন আচরণ করে তার একক source of truth — রং, টাইপ সাইজ, spacing value, আর পুনরায় ব্যবহারযোগ্য component-এর একটা শেয়ার করা সেট যা থেকে প্রতিটা page টেনে নেয়, প্রতিটা page (বা প্রতিটা developer) নিজের মতো বেছে নেওয়ার বদলে।

এটা ছাড়া, একটা সাইট জুড়ে ভিন্ন ভিন্ন CSS ফাইলে হাতে বেছে নেওয়া চোদ্দটা "প্রায়-নীল" শেড ছড়িয়ে থাকা সহজ। একটা design system এই drift প্রতিরোধ করে।

ডিজাইন টোকেন হলো নামযুক্ত, পুনরায় ব্যবহারযোগ্য value যা দিয়ে একটা design system তৈরি — একটা রং, একটা spacing size, একটা font size — একবার define করা আর সবজায়গায় reference করা, প্রতিটা stylesheet-এ নতুন করে টাইপ করার বদলে।

CSS-এ, টোকেন সাধারণত custom properties দিয়ে তৈরি হয়:

--color-primary একবার পরিবর্তন করুন আর এটা reference করা প্রতিটা বাটন, link, আর হাইলাইট একসাথে update হয় — dark mode toggle-এর পেছনের একই ধারণা, আর কারণ ডিজাইন টোকেন শুধু গোছানো দেখানোর চেয়ে অনেক বেশি গুরুত্বপূর্ণ।

Atomic design হলো UI-কে ছোট থেকে বড় লেয়ারে ভাবার একটা উপায় — যেকোনো codebase-এ component সংগঠিত করার জন্য একটা কার্যকর mental model, শুধু একটা নির্দিষ্ট টুলের জন্য না।

ফলাফল: একবার তৈরি করা, token থেকে style করা একটা "Button" পুরো সাইটের প্রতিটা form, প্রতিটা card, আর প্রতিটা modal-এ পুনরায় ব্যবহার হয় — প্রয়োজন হওয়ার প্রতিবার সামান্য ভিন্নভাবে পুনরায় ডিজাইন করার বদলে।

এই চিন্তা থেকে উপকৃত হতে একটা formal design-system টুল বা একটা পুরো টিম দরকার নেই। একটা ছোট personal project-ও একবার আপনার রং, spacing, আর টাইপ সাইজ variable হিসেবে define করে সবজায়গায় পুনরায় ব্যবহার করলে, আর একটা বাটন বা card প্রতিটা page-এ এর style নতুন করে টাইপ করার বদলে একটা পুনরায় ব্যবহারযোগ্য অংশ হিসেবে তৈরি করলেই বেশি সামঞ্জস্যপূর্ণ হয়ে ওঠে।