ডিজাইন থেকে কোড মানে কী?
ডিজাইন থেকে কোড বলতে বোঝায় Figma-র মতো টুলে নেওয়া সিদ্ধান্তকে চালু ফ্রন্টএন্ড কোডে রূপান্তরের প্রক্রিয়া। টেকসই পদ্ধতিটি ক্যানভাস থেকে মার্কআপ তৈরি করে না, বরং ডিজাইন টোকেন স্থানান্তর করে - কারণ ইন্টারফেস বদলালেও টোকেন বৈধ থাকে, তৈরি করা মার্কআপ থাকে না।
দুটি পদ্ধতি যেগুলো গুলিয়ে যায়
ক্যানভাস থেকে কোড তৈরি করা। একটি টুলকে Figma-র একটি ফ্রেমের দিকে তাক করান, ফিরে পান JSX বা HTML। ডেমোতে এটি দারুণ দেখায় আর প্রোডাকশনে হতাশ করে: আউটপুটের সঙ্গে আপনার কম্পোনেন্ট লাইব্রেরির কোনো সম্পর্ক নেই, নেস্টিং দেখায় ডিজাইনার লেয়ারগুলো কীভাবে গুছিয়েছেন, আর ডিজাইন বদলালেই আপনি আবার তৈরি করেন এবং করা সম্পাদনাগুলো হারান।
সিদ্ধান্তগুলো সরানো। বদলে টোকেন সরান — রং, স্পেসিং, টাইপোগ্রাফি, রেডিয়াস — আর ডেভেলপারদের সেগুলো নির্দেশ করা কম্পোনেন্ট বানাতে দিন। ডেমোতে কম চমকপ্রদ। কিন্তু এটিই টিকে থাকে, কারণ লেআউট বদলালেও টোকেন বৈধ থাকে, আর কোড থাকে এমন কোড যা একজন মানুষ লিখেছেন ও রক্ষণাবেক্ষণ করতে পারেন।
প্রথম পদ্ধতি চেষ্টা করা প্রায় প্রতিটি দলই শেষে দ্বিতীয়টিতে পৌঁছায়।
হ্যান্ডঅফ কেন বারবার ব্যর্থ হয়
ব্যর্থতা হস্তান্তরের মুহূর্তে নয়। ব্যর্থতা তার পরের সবকিছুতে।
একজন ডিজাইনার Figma-তে একটি রং হালনাগাদ করেন। ওই পরিবর্তনকে একটি স্টাইলশিটে পৌঁছাতে হবে। স্বয়ংক্রিয় কোনো পথ নেই, তাই সেটি পৌঁছায় একটি চ্যানেলের বার্তার মাধ্যমে, যা কেউ পড়ে, বা পড়ে না। এটিকে এক বছরের প্রতিটি পরিবর্তন দিয়ে গুণ করুন।
দুই পক্ষই ঠিকভাবে কাজ করছে। তাদের মধ্যকার সংযোগটি হলো মনে রাখা একজন মানুষ।
Figma API-র সীমাবদ্ধতা
এই ক্ষেত্রের যেকোনো টুল যাচাইয়ের আগে জেনে রাখা ভালো: ভেরিয়েবল পড়ার জন্য Figma-র REST API এন্ডপয়েন্ট কেবল Enterprise প্ল্যানে পাওয়া যায়।
অর্থাৎ, REST API দিয়ে Figma ভেরিয়েবল সিঙ্ক করা কোনো টুল Enterprise অ্যাকাউন্টে চালানো ডেমোতে কাজ করে আর বেশিরভাগ দলের ব্যবহৃত Professional প্ল্যানে কিছুই করে না। প্লাগইন এর আওতায় পড়ে না, কারণ সেগুলো প্লাগইন API দিয়ে ফাইলের ভেতর থেকে ভেরিয়েবল পড়ে। সিঙ্ক টুল তুলনা করলে জিজ্ঞেস করুন কোনটি কোনটি ব্যবহার করে।
কাজ করা একটি লুপ দেখতে কেমন
১. ডিজাইনের সিদ্ধান্তগুলো টোকেন হিসেবে থাকে, একটি জায়গায়, যাকে দুই পক্ষই নির্দেশ করে। ২. ডিজাইনের দিকের পরিবর্তন আসে diff হিসেবে, ওভাররাইট হিসেবে নয়। ৩. সম্পাদনার অধিকার আছে এমন একজন মানুষ পর্যালোচনা করে প্রয়োগ করেন। ৪. রিপোজিটরিতে একটি পুল রিকোয়েস্ট খোলে, যা স্বাভাবিক কোড রিভিউয়ের মধ্য দিয়ে যায়। ৫. AI এজেন্ট একই টোকেন সরাসরি পড়ে, ফলে তৈরি কোড ব্যবস্থার পাশে নয়, ভেতরে গিয়ে বসে।
মাঝখানের পর্যালোচনা ধাপটি কমিয়ে ফেলার মতো ঘর্ষণ নয়। যে টুল নীরবে একটি দলের টোকেন নতুন করে লিখে দেয়, তার আস্থার ক্ষতি স্বয়ংক্রিয়তার লাভের চেয়ে বেশি।
Flash DSM এখানে কোথায়
Flash DSM বাহক হিসেবে একটি Figma প্লাগইন ব্যবহার করে, তাই এটি যেকোনো Figma প্ল্যানে কাজ করে। একটি প্রকাশনা হয়ে ওঠে পর্যালোচনাযোগ্য টোকেন diff, আর অনুমোদিত diff পুল রিকোয়েস্ট হিসেবে খুলতে পারে।