একটা static design দেখায় একটা screen দেখতে কেমন। একটা prototype দেখায় কেউ একটা button চাপলে কী হয় — পরে কোন screen আসে, কীভাবে সেটা transition হয়ে ঢোকে। Figma design-এর জন্য ব্যবহৃত একই Frame-এর উপরেই সরাসরি prototype বানায়, Design-এর পাশের Prototype ট্যাবে।
Prototype ট্যাব খোলা থাকা অবস্থায়, যেকোনো object select করুন আর তার প্রান্তে একটা ছোট circular connection node দেখা যায়। সেই node থেকে অন্য একটা Frame-এ drag করুন, আর Figma তাদের মধ্যে একটা arrow আঁকে — এটাই পুরো mechanic। এখন একটা live preview-তে source object-এ ক্লিক করলে target Frame-এ navigate হয়।
প্রতিটা connection একটা trigger ("On click," "On drag," "While hovering") আর একটা transition ("Instant," "Dissolve," "Slide in from the right") দিয়ে configure করা যায়, interface দেখতে কেমন হওয়া উচিত তার বদলে ব্যবহার করতে আসলে কেমন লাগা উচিত তার সাথে মিলিয়ে।
উপরে-ডানে play button একটা পূর্ণ-screen preview খোলে যা আসল, শেষ করা interface-এর মতো আচরণ করে — প্রতিটা connection ক্লিক-করা-যায়, প্রতিটা transition চলে। কোনো code তৈরি হওয়ার আগে একটা flow আসলেই যুক্তিসঙ্গত কিনা পরীক্ষা করার এটাই সবচেয়ে দ্রুত উপায়।
একটা শেষ করা design থেকে কাজ করা একজন developer-এর একটা mockup image দরকার নেই — তাদের সঠিক সংখ্যা দরকার। Figma-র Inspect panel (file-এ access আছে এমন যে কারো কাছে দৃশ্যমান, developer হোক বা না হোক) যেকোনো select করা layer-এর সঠিক CSS দেখায়: padding, hex code হিসেবে color, font size, আর border radius, সরাসরি code-এ copy করার জন্য প্রস্তুত।
কেন আগের lesson-গুলো এখানে গুরুত্বপূর্ণ
এই কোর্সের আগের সবকিছুর ফলাফল এটাই — আসল Auto Layout, নাম-দেওয়া Color/Effect style, আর একটা প্রকৃত type scale দিয়ে বানানো একটা design একজন developer-কে পরিষ্কার, অনুমানযোগ্য CSS হিসেবে হস্তান্তর হয়। যেখানে-সেখানে এককালীন size আর color দিয়ে হাতে বানানো একটা design অনুমান-নির্ভর হিসেবে হস্তান্তর হয়।