Smart Animate আর Micro-interaction

এখন পর্যন্ত কভার করা প্রতিটা prototype connection দুটো Frame-এর মধ্যে সাথে সাথে (বা fade করে) jump করে। Smart Animate হলো একটা transition type যা তার বদলে তাদের মধ্যে পার্থক্যটা সত্যিকারভাবে animate করে — একটা card বড় হয়ে যাওয়া, একটা মেনু slide করে ঢোকা, একটা color fade হওয়া — কোনো keyframe timeline বা code ছাড়াই।

Smart Animate দুটো সংযুক্ত Frame জুড়ে layer-কে নাম দিয়ে মেলায়। Frame 1-এ "Card" নামের একটা layer আর Frame 2-এও "Card" নামের একটা layer একই object হিসেবে গণ্য হয় — Figma তাদের মধ্যে প্রতিটা পার্থক্য (position, size, rotation, color, corner radius) নিজে থেকে animate করে। যেকোনো layer-এর নাম বদলালে মিল ভেঙে যায়, আর সেই অংশটা animate না হয়ে সাথে সাথে বদলে যায়।

দুটো Frame-এর মধ্যে ঠিক আগের মতোই একটা prototype connection তৈরি করুন (Prototyping lesson-এ কভার করা), তারপর সেই connection-এর transition dropdown খুলুন আর default Instant/Dissolve অপশনের বদলে Smart Animate বেছে নিন। এটা select করার পর একটা easing curve আর duration পাওয়া যায়।

একজন developer সত্যিকারে বানানোর আগে আসল app-এর বেশিরভাগ ছোট "আনন্দদায়ক" মুহূর্ত এভাবেই prototype করা হয়: চাপলে একটা card বড় হয়ে যাওয়া, একটা tab indicator select করা tab-এ slide করা, চাপলে একটা button সামান্য বড় হওয়া। এর কোনোটাতেই state জুড়ে সামঞ্জস্যপূর্ণভাবে layer-এর নাম দেওয়া ছাড়া আর কিছু লাগে না।