AI কয়েক সেকেন্ডের মধ্যে একটি কার্যকরী React অ্যাপ তৈরি করতে পারে, এবং GeekyAnts-এর মতো টুলগুলো ডিজাইন সিস্টেমের কাঠামো না হারিয়ে সেই নতুন তৈরি করা কোডটিকে সরাসরি Figma-তে ফিরিয়ে আনার প্রতিশ্রুতি দেয়। এই দাবিটি গুরুত্বপূর্ণ কারণ AI-লিখন কোড সামনে আসার সাথে সাথে ডিজাইন টিমগুলোকে প্রায়শmış শূন্য থেকে শুরু করতে বাধ্য হতে হয়, যা রিডিজাইন করার সময় এবং খরচ বাড়িয়ে দেয়।

বছরের পর বছর ধরে, কাজের হস্তান্তর (hand-off) কাগজে-কলমে সহজ মনে হতো: ডিজাইনাররা Figma-তে স্ক্রিন তৈরি করতেন, ডেভেলপাররা সেই স্ক্রিনগুলোকে কোডে রূপান্তর করতেন, এবং উভয় পক্ষই লেআউটের নিজস্ব কপি রাখত। AI-চালিত কোড জেনারেটরগুলো সেই ছন্দ ভেঙে দিয়েছে। একটি AI ইঞ্জিন একটি রেডি-টু-রান React প্রজেক্ট প্রদান করে, কিন্তু সেই ফলে তৈরি হওয়া কম্পোনেন্টগুলোকে মূল ডিজাইন ফাইলে ইমপোর্ট করার কোনো সহজ উপায় নেই। এর ফলে "প্রথমে কোড, পরে ডিজাইন" নামক একটি যন্ত্রণাদায়ক চক্র তৈরি হয় যা শেয়ার্ড ডিজাইন ল্যাঙ্গুয়েজকে নষ্ট করে এবং রক্ষণাবেক্ষণের খরচ বাড়িয়ে দেয়।

কেন DOM যথেষ্ট নয়

বেশিরভাগ রিভার্স-ইঞ্জিনিয়ারিং টুল Document Object Model (DOM) দিয়ে শুরু হয়, যা হলো HTML এলিমেন্টগুলোর ব্রাউজার রিপ্রেজেন্টেশন। DOM প্রতিটি ভিজ্যুয়াল অংশকে একটি সাধারণ <div বা <span> হিসেবে বিবেচনা করে। এটি একটি বাটন এবং একটি কার্ডের মধ্যে পার্থক্য করতে পারে না, এমনকি এটি জানেও না যে এলিমেন্টগুলোর একটি সেট ডিজাইন সিস্টেমের কোনো মাস্টার কম্পোনেন্টের অংশ কি না। যখন একটি পেজে দশটি বাটন থাকে, DOM কেবল দশটি অ্যানোনিমাস লেয়ার রিপোর্ট করে। মূল কম্পোনেন্ট লাইব্রেরির সাথে সংযোগটি হারিয়ে যায়, যার ফলে ডিজাইনারদের কাছে গ্রুপ না করা শেপগুলোর একটি জটলা থেকে যায়, যা প্রায়শই স্ক্রিনটি শূন্য থেকে নতুন করে তৈরি করার চেয়ে পরিষ্কার করতে বেশি পরিশ্রমের প্রয়োজন হয়।

React Fiber একটি সমৃদ্ধ ম্যাপ প্রদান করে

React-এর অভ্যন্তরীণ শিডিউলার, যাকে Fiber বলা হয়, কম্পোনেন্টগুলোর একটি ট্রি (tree) বজায় রাখে, যেখানে নাম, প্যারেন্ট-চাইল্ড সম্পর্ক এবং প্রপার্টি ব্যাগ (property bags) থাকে। রেন্ডার করা HTML-এর পরিবর্তে Fiber স্ট্রাকচারটি পড়ার মাধ্যমে, একটি রিভার্স-ইঞ্জিনিয়ারিং টুল শনাক্ত করতে পারে যে একটি নির্দিষ্ট <div আসলে একটি PrimaryButton কম্পোনেন্ট, এটি একটি Header কম্পোনেন্টের ভেতরে অবস্থিত, এবং এটি তার স্টেট (state) সংজ্ঞায়িত করার জন্য এক সেট props বহন করে। এই অন্তর্দৃষ্টি মূল ডেভেলপার—অথবা কোডটি তৈরি করা AI—UI-তে যে উদ্দেশ্য বা ইনটেন্ট আরোপ করেছিল, তা রক্ষা করে।

GeekyAnts লাইভ কোডকে এডিটেবল Figma ফাইলে নিয়ে আসার জন্য React Fiber extraction ব্যবহার করে।

নতুন ওয়ার্কফ্লো কীভাবে বাস্তব সমস্যা সমাধান করে

ভেরিয়েন্ট এক্সপ্যানশন (Variant expansion)

প্রথাগত ক্যাপচার পদ্ধতিগুলো কম্পোনেন্টের কেবল দৃশ্যমান স্টেটটি স্ন্যাপশট হিসেবে নেয়—যেমন, একটি বাটনের ডিফল্ট হোভার-অফ (hover-off) অবস্থা। Fiber ট্রিতে কম্পোনেন্ট ডেফিনিশনটি পরীক্ষা করার মাধ্যমে, টুলটি সোর্স কোডে ঘোষিত প্রতিটি ভেরিয়েন্ট গণনা করে: hover, focused, disabled, loading ইত্যাদি। এরপর এটি একটি Figma Component Set তৈরি করে যা ম্যানুয়াল ডুপ্লিকেশন ছাড়াই ডিজাইন সিস্টেমের ইনটেন্টকে প্রতিফলিত করে সেই সমস্ত স্টেটকে একত্রে গুছিয়ে রাখে।

লেআউট ম্যাপিং (Layout mapping)

ওয়েব লেআউটগুলো CSS Flexbox-এর ওপর ব্যাপকভাবে নির্ভর করে, যেখানে Figma-র সমতুল্য হলো Auto Layout। একটি ট্রান্সলেশন লেয়ার যা Flexbox প্রপার্টিগুলোকে (direction, justification, alignment, gaps) সরাসরি Auto Layout প্যারামিটারে ম্যাপ করে, তার মানে হলো স্পেসিং, রিসাইজিং বিহেভিয়ার এবং অ্যালাইনমেন্ট পুরো প্রক্রিয়ায় অক্ষুণ্ণ থাকে। ডিজাইনারদের আর হাতে জটিল ফ্লেক্স কন্টেইনার তৈরি করতে হয় না।

স্টেট ট্রিগারিং (State triggering)

অনেক UI অংশ—যেমন মোডাল (modals), ড্রপডাউন (dropdowns), অ্যাকর্ডিয়ন (accordions)—JavaScript স্টেট পরিবর্তন না করা পর্যন্ত DOM-এ লুকানো থাকে। যেহেতু Fiber ট্রি সেই লজিকটি রেকর্ড করে, তাই রিভার্স-ইঞ্জিনিয়ারিং টুলটি প্রোগ্রাম্যাটিকভাবে সেই স্টেটগুলো ট্রিগার করতে পারে, লুকানো এলিমেন্টগুলোকে সামনে আনতে পারে এবং সেগুলোকে ডিজাইন অবজেক্ট হিসেবে ক্যাপচার করতে পারে। এর ফলে একটি সম্পূর্ণ ডিজাইন ফাইল পাওয়া যায় যাতে প্রতিটি ইন্টারঅ্যাক্টিভ অংশ অন্তর্ভুক্ত থাকে, শুধুমাত্র লোড হওয়ার সময় যা দৃশ্যমান ছিল তা নয়।

উদীয়মান টুলবক্স

  • GeekyAnts – কম্পোনেন্ট বাউন্ডারি বজায় রেখে লাইভ, এডিটেবল Figma ফাইল তৈরি করতে React Fiber এক্সট্র্যাক্ট করে।
  • Anima – ফরোয়ার্ড পাথের ওপর গুরুত্ব দেয়, যা Figma ডিজাইনকে React বা Vue কোডে রূপান্তর করে।
  • Locofy.ai – দ্রুততার ওপর জোর দিয়ে Figma লেআউটকে রেসপন্সিভ কোডে রূপান্তর করতে AI ব্যবহার করে।
  • Builder.io – HTML কম্পোনেন্টগুলোকে পুনরায় Figma-তে নিয়ে আসে।
  • Codia AI – স্ক্রিনশটগুলোকে স্ট্রাকচার্ড Figma ফাইলে রূপান্তর করে।

টিম এবং বাজেটের জন্য ঝুঁকি

যখন ডিজাইন এবং ডেভেলপমেন্টের মধ্যে দূরত্ব তৈরি হয়, তখন অসামঞ্জস্যতা দূর করা দ্রুত ব্যয়বহুল হয়ে ওঠে।

পাল্টা যুক্তি এবং সীমাবদ্ধতা

(section left intentionally blank)

পরবর্তী যা লক্ষ্য রাখতে হবে

(section left intentionally blank)

সারসংক্ষেপ

উপরিভাগের DOM-এর পরিবর্তে React-এর অভ্যন্তরীণ Fiber tree পড়া একটি যন্ত্রণাদায়ক “code-first, design-later” চক্রকে একটি দ্বিমুখী পথে রূপান্তরিত করে। AI-জেনারেটেড অ্যাপগুলো এখন কম্পোনেন্ট স্ট্রাকচার না হারিয়েই Figma-তে ফিরিয়ে আনা সম্ভব। যেসব টিম design drift এবং ক্রমবর্ধমান রক্ষণাবেক্ষণ খরচের সাথে লড়াই করছে, তাদের জন্য এই পরিবর্তনটি একটি বিশৃঙ্খল রিডিজাইন স্প্রিন্ট এবং একটি সুশৃঙ্খল, কম্পোনেন্ট-ফার্স্ট ওয়ার্কফ্লো-এর মধ্যে পার্থক্য গড়ে দিতে পারে।