| کانال طراحی و رابط‌کاربری |: post #134 — TG.ME

🎬 ساخت پروتوتایپ اسکرول اینتراکتیو در Figma خیلی وقت‌ها توی طراحی صفحه موبایل یا وب، فقط دیدن اسکرین‌های ثابت کافی نیست. لازم کارفرما یا دولوپر دقیق ببینه کاربر چطور اسکرول می‌کنه، هدر چطوری Sticky می‌مونه، یا کارت‌ها موقع اسکرول چه حسی می‌دن. این‌جا Prototype توی Figma به‌کمک ما میاد 🎯 این پست بر اساس ورک‌فلو رسمی مستندات Figma برای پروتوتایپ (Figma Help Center – Prototype flows and connections) نوشته شده و یه سناریوی کاملا واقعی رو پوشش می‌ده: ساخت یک لیست اسکرول‌دار با هدر Sticky و Animation نرم. ۱️⃣ آماده‌سازی Frame اصلی • یک Frame موبایل بساز (مثلا iPhone 14 Pro). • داخلش یک Header در بالا طراحی کن (لوگو، Title، آیکون سرچ). • زیر هدر، چندتا Card تکراری بذار (لیست خبر، محصول، یا هر دیتای واقعی). ۲️⃣ فعال کردن Scroll عمودی طبق راهنمای رسمی Figma برای Scrolling behavior: • Frame موبایل رو انتخاب کن. • توی پنل راست، بخش Prototype رو باز کن. • از قسمت Overflow behavior گزینه Vertical scrolling رو انتخاب کن. حالا اگر ارتفاع محتوا بیشتر از ارتفاع Frame باشه، توی Preview می‌تونی اسکرول کنی ✅ ۳️⃣ Sticky کردن Header (Position: Fixed) یکی از چیزهایی که خیلی توی پروژه‌های واقعی می‌بینیم، Sticky Headerـه. طبق مستند Fixed objects in prototyping توی Figma: • خود Header رو انتخاب کن. • در پنل راست، توی بخش Design قسمت Constraints رو پیدا کن. • گزینه Fix position when scrolling رو تیک بزن. حالا توی Preview، محتوا اسکرول می‌شه ولی Header همون بالا می‌مونه، مثل یه اپ واقعی 📱 ۴️⃣ اضافه کردن Micro Interaction روی کارت‌ها برای اینکه Prototype فقط اسکرول خشک نباشه، یه اینتراکشن ساده روی Cardها اضافه کن: • یک Variant دوم برای Card بساز (مثلا با Shadow بیشتر یا Background کمی تیره‌تر). • Cardها رو به‌صورت Component Set دربیار. • توی تب Prototype روی Variant اصلی کلیک کن و یک Interaction بساز: On Tap → Change To → Variant Hover Animation: Smart Animate Easing: Ease out Duration: 150ms حالا موقع کلیک روی Card توی Preview، یه تغییر نرم و طبیعی می‌بینی که حس Product واقعی می‌ده ✨ ۵️⃣ تنظیم Flow و Preview حرفه‌ای برای اینکه Prototype مرتب و قابل‌ارائه باشه: • روی Frame اصلی، از تب Prototype گزینه Set as starting frame رو فعال کن. • از دکمه ▶️ بالا Present رو بزن و Prototype رو در یک پنجره جدا تست کن. • اگر روی موبایل تست می‌کنی، از اپ رسمی Figma Mirror استفاده کن تا رفتار اسکرول روی دیوایس واقعی رو ببینی. این مدل پروتوتایپ هم توی Usability Testing به شدت کمک می‌کنه، هم برای هم‌فهمی با Dev تیم عالیه. حس «ماکت» رو به «محصول واقعی» نزدیک‌تر می‌کنه و باعث می‌شه ایرادهای UX قبل از پیاده‌سازی دیده بشن 🔍 اگر تا حالا فقط اسکرین‌های استاتیک نشون می‌دادی، همین امروز یک Flow کوچک با اسکرول و Header ثابت بساز و توی تیم به اشتراک بذار؛ تاثیرش رو خیلی زود روی کیفیت فیedbackها می‌بینی 🚀 🔖 #Design #طراحی #UI #UX #Figma #Prototype #Interaction #UIUX #Scrolling #Mobile_UI 👤 Developix 💎 Channel: @DevelopixDesign