ডিজাইন সিস্টেম কী?
ডিজাইন সিস্টেম হলো ডিজাইন সিদ্ধান্ত, কম্পোনেন্ট ও নিয়মের সেই যৌথ সংগ্রহ, যা দিয়ে একটি দল ধারাবাহিকভাবে পণ্য তৈরি করে। সাধারণত এতে থাকে ডিজাইন টোকেন, কম্পোনেন্ট লাইব্রেরি, ব্যবহারের নির্দেশিকা ও ডকুমেন্টেশন - ডিজাইন এবং কোড দুইয়ের জন্যই একক সত্যের উৎস হিসেবে রক্ষণাবেক্ষণ করা।
এটি কী দিয়ে গড়া
কাজ করে এমন বেশিরভাগ ডিজাইন সিস্টেমের চারটি স্তর থাকে, আর যেগুলো ব্যর্থ হয় সেগুলোতে সাধারণত প্রথমটিই নেই।
ডিজাইন টোকেন: সবকিছুর নিচে থাকা নাম দেওয়া মানগুলো — রং, টাইপোগ্রাফি, স্পেসিং, রেডিয়াস, ছায়া, মোশন।
কম্পোনেন্ট: পুনর্ব্যবহারযোগ্য অংশগুলো, যেগুলো বসানো মানের বদলে টোকেন নির্দেশ করার জন্য তৈরি। একটি বোতাম, একটি ফর্ম ফিল্ড, একটি মোডাল।
নির্দেশিকা: কখন কোন কম্পোনেন্ট, তার জন্য কীভাবে লিখতে হয়, অ্যাক্সেসিবিলিটি কী দাবি করে।
ডকুমেন্টেশন: পাঠযোগ্য পৃষ্ঠ, যেখানে মানুষ এসব খুঁজে পায়।
এটি যা নয়
এটি কম্পোনেন্ট লাইব্রেরি নয়। লাইব্রেরি একটি স্তর। টোকেনবিহীন ডিজাইন সিস্টেম আপনাকে অসামঞ্জস্যপূর্ণ মানের উপর বসা সামঞ্জস্যপূর্ণ কম্পোনেন্ট দেয়।
এটি একটি Figma ফাইল নয়। Figma ফাইল এর একটি উপস্থাপন। কোড যদি একই সিদ্ধান্তগুলো নির্দেশ না করে, তবে আপনার কাছে দুটি ডিজাইন সিস্টেম আছে যেগুলো কাকতালীয়ভাবে দেখতে একরকম।
এটি ডকুমেন্টেশন নয়। ডকুমেন্টেশন ব্যবস্থাটিকে বর্ণনা করে। যে দলগুলো টোকেন ঠিক করার আগে ডকুমেন্টেশন সাইট দিয়ে শুরু করে, তারা শূন্যের বর্ণনা লিখেছে।
কেন এগুলো সরে যায়
ডিজাইন সিস্টেমের ব্যর্থতার ধরন ধস নয়, ক্ষয়। কেউ ছেড়ে দেওয়ার সিদ্ধান্ত নেয় না। শুধু এর বাইরে মান জমতে থাকে:
- একজন ডিজাইনারের প্যালেটে নেই এমন রং দরকার হয়, আর তিনি ফাইলেই একটি বেছে নেন।
- সময়ের চাপে একজন ডেভেলপার স্পেসিং ধাপ যোগ করার বদলে
padding: 14pxলেখেন। - একটি AI সহকারী বানানো হেক্স মান দিয়ে কম্পোনেন্ট তৈরি করে, কারণ ব্যবস্থাটি পড়ার কোনো উপায় তার নেই।
প্রতিটি আলাদাভাবে যুক্তিসঙ্গত। একসঙ্গে এগুলো এমন একটি কোডবেস তৈরি করে যেখানে কেউ তৈরি করার সিদ্ধান্ত নেয়নি এমন কয়েকটি সমান্তরাল ডিজাইন সিস্টেম চলছে।
এর জবাব শৃঙ্খলা নয়, শৃঙ্খলা মাপে বাড়ে না। জবাব হলো ব্যবস্থাটিকে সবচেয়ে কম বাধার পথ বানানো: যে প্রতিটি টুল এটি ব্যবহার করে সেখানে উপলব্ধ, ওই টুল যে ফরম্যাট আশা করে সেই ফরম্যাটে, কোনো হাতে-করা ধাপ ছাড়াই।
গড়তে কত সময় লাগে
হাতে করলে প্রথম সুসংহত ব্যবস্থাটিতে সাধারণত কয়েক দিন থেকে কয়েক সপ্তাহ লাগে। কোনো একটি সিদ্ধান্ত কঠিন বলে নয়, বরং সিদ্ধান্ত শত শত এবং সেগুলো পরস্পরকে প্রভাবিত করে বলে। প্রতিটি জোড়ায় কনট্রাস্ট ধরে রাখে এমন রঙের স্কেল, নিছক উল্টো নয় এমন ডার্ক মোড, রিব্র্যান্ড টিকে থাকে এমন সিমান্টিক নামকরণ।
Flash DSM এখানে কোথায়
Flash DSM একটি প্রম্পট, একটি URL, একটি Figma ফাইল বা একটি স্ক্রিনশট থেকে টোকেন স্তর ও কম্পোনেন্ট স্পেসিফিকেশন তৈরি করে, তারপর সেগুলোকে কোড, Figma এবং কোড লেখা AI এজেন্টের সঙ্গে সিঙ্ক রাখে।