Prototype در Figma به شما اجازه می‌دهد بین Frameها ارتباط ایجاد کنید و قبل از توسعه، رفتار رابط کاربری را شبیه‌سازی کنید. با یک Prototype می‌توانید مسیرهای کاربر، Navigation، Overlay، Animation و سناریوهای مختلف را برای ارائه یا تست تجربه کاربری نمایش دهید.
Prototype در Figma چیست؟
در Prototype به یک عنصر Trigger می‌دهید و مشخص می‌کنید بعد از آن چه Actionی اتفاق بیفتد. مثلا با Tap روی دکمه، کاربر به Frame دیگری منتقل شود، یک Overlay باز شود یا یک Interaction با Smart Animate اجرا شود.
اجزای اصلی یک Interaction
- Trigger: رویدادی مثل Click/Tap، Drag، Hover، Key/Gamepad یا After Delay.
- Action: کاری مثل Navigate to، Back، Open overlay یا Open link.
- Destination: مقصد Interaction، معمولا یک Frame یا Overlay.
- Animation: نحوه انتقال بین وضعیت‌ها؛ از Instant تا Smart Animate.
Multiple Flows چه کاربردی دارد؟
با Multiple Flows می‌توانید در یک فایل چند نقطه شروع مستقل برای Prototype داشته باشید. این قابلیت برای تست یا ارائه سناریوهای متفاوت مفید است؛ مثلا Flow ثبت‌نام، خرید و بازیابی رمز عبور می‌توانند هرکدام نقطه شروع جداگانه داشته باشند.
Prototype در UI و UX
در UI Design، Prototype کمک می‌کند Motion و رفتار Componentها را نشان دهید. در UX Design نیز می‌توانید Wireframe یا طرح اولیه را به یک سناریوی قابل کلیک تبدیل کنید و پیش از توسعه، مسیر کاربر و فرضیه‌های طراحی را ارزیابی کنید.
ویدیوی آموزش Prototype در Figma
نکته: این ویدیو با نسخه قدیمی‌تر Figma ضبط شده و محل بعضی کنترل‌ها ممکن است تغییر کرده باشد، اما مفاهیم Interaction، Flow و Prototype همچنان قابل استفاده‌اند.
