Prototype در Figma به شما اجازه می‌دهد طرح‌های ثابت را به Flow تعاملی تبدیل کنید و قبل از پیاده‌سازی واقعی، Navigation، Interaction، Animation و رفتارهای اصلی محصول را تست کنید. این مرحله برای نمایش ایده، گرفتن Feedback، User Test و پیدا کردن خطاهای Flow بسیار ارزشمند است.
نسخه قدیمی این آموزش مفاهیم پایه Prototype و مزیت ارائه بهتر طرح به مشتری را پوشش می‌داد. در نسخه جدید همان ارزش آموزشی حفظ شده و ساختار فعلی Figma برای Trigger، Action، Overlay، Scroll، Smart Animate، Multiple Actions و Presentation به آن اضافه شده است.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- Prototype در Figma چیست و چه کاربردی دارد
- Interaction از چه اجزایی تشکیل می‌شود
- Trigger، Action و Destination چه تفاوتی دارند
- Flow و Starting Point چگونه ساخته می‌شوند
- چطور Frameها را با Navigate to به هم وصل کنیم
- Overlay و Back چه زمانی کاربرد دارند
- Scroll و Overflow چگونه تنظیم می‌شوند
- Smart Animate چگونه Layerهای matching را Animate می‌کند
- Multiple Actions و Variables در Prototype چه کاربردی دارند
- چطور Prototype را در Presentation View تست و Share کنیم
ویدیوی آموزش Prototype در Figma
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را حفظ کرده‌ایم. ممکن است بعضی جزئیات رابط در ویدیوی قدیمی با UI فعلی Figma فرق داشته باشد؛ متن مقاله با ساختار فعلی Prototyping به‌روزرسانی شده است.
Prototype در Figma چیست؟
Prototype نسخه‌ای تعاملی از Design است که نشان می‌دهد کاربر با کلیک، Tap، Drag، Hover یا Triggerهای دیگر چه اتفاقی را تجربه می‌کند. این Prototype می‌تواند ساده و فقط برای Navigation باشد یا با Variables، Conditionals، Multiple Actions و Smart Animate رفتارهای پیچیده‌تری را شبیه‌سازی کند.
چرا Prototype بسازیم؟
- بررسی User Flow قبل از Development
- پیدا کردن Interactionهای مبهم یا بن‌بست‌های Navigation
- ارائه قابل‌فهم‌تر طرح به Stakeholder یا مشتری
- انجام Usability Test روی سناریوهای اصلی
- هماهنگی بهتر بین Design و Development
- کاهش هزینه تغییرات قبل از پیاده‌سازی
ساختار هر Interaction: Trigger + Action
هر Interaction در Figma با یک Trigger شروع می‌شود و یک یا چند Action دارد. Trigger مشخص می‌کند Interaction چه زمانی اجرا شود و Action نتیجه آن Interaction را تعیین می‌کند.
Trigger چیست؟
Trigger می‌تواند On click/On tap، Drag، Hover/Mouse enter، Mouse leave، Mouse down/up، Key/Gamepad و Triggerهای زمانی باشد. انتخاب Trigger باید با Context دستگاه و رفتار واقعی محصول هماهنگ باشد.
Action چیست؟
Action مشخص می‌کند بعد از Trigger چه اتفاقی رخ دهد؛ مثل Navigate to، Open overlay، Back، Scroll to، Open link، Change to، Set variable یا Actionهای دیگر. بعضی Interactionها Destination Frame دارند و بعضی Actionها داخل همان Context اجرا می‌شوند.
Hotspot، Connection و Destination
Hotspot Object یا ناحیه‌ای است که Interaction روی آن شروع می‌شود. Connection همان خط ارتباطی Prototype است که Hotspot را به مقصد متصل می‌کند. Destination می‌تواند Frame دیگری، Overlay یا مقصد مرتبط با Action باشد.
- Object مثل Button را انتخاب کنید.
- به Prototype mode بروید؛ میانبر فعلی برای جابه‌جایی Design/Prototype، Shift + E است.
- Connection را به Destination موردنظر بکشید.
- Trigger، Action و Animation را تنظیم کنید.
- در Presentation View نتیجه را تست کنید.
Flow و Starting Point چیست؟
Flow شبکه‌ای از Frameهای متصل است که یک Journey مشخص را نمایش می‌دهد. هر Flow یک Starting Point دارد و می‌توانید در یک Page چند Flow جدا داشته باشید؛ مثلا Sign up، Checkout و Reset Password.
این ساختار برای User Test و Presentation مفید است، چون می‌توانید هر سناریو را از نقطه شروع خودش اجرا کنید.
Navigate to و Back
Navigate to رایج‌ترین Action برای رفتن از یک Screen به Screen دیگر است. Back کاربر را به Context قبلی برمی‌گرداند و برای Flowهایی مثل صفحه Detail یا Modal navigation می‌تواند مفید باشد.
Overlay در Prototype
Overlay برای نمایش Frame روی Screen فعلی استفاده می‌شود؛ مثلا Modal، Dropdown، Menu یا Tooltip. به‌جای Duplicate کردن Screen پشت Modal، Overlay اجازه می‌دهد همان Background حفظ شود و Frame جدید روی آن قرار بگیرد.
Scroll و Overflow Behavior
برای شبیه‌سازی صفحه بلند، Carousel یا Map باید Overflow behavior Frame را تنظیم کنید. Figma گزینه‌های No scrolling، Horizontal، Vertical و Both directions را در Prototype در اختیار می‌گذارد.
Content باید واقعا از Bounds Frame بزرگ‌تر باشد تا Scroll کار کند. برای Objectهای داخل Frame هم می‌توانید Scroll Position را روی Scroll with parent، Fixed یا Sticky تنظیم کنید.
Prototype Animations
Transitionها مشخص می‌کنند تغییر بین Stateها یا Frameها چگونه دیده شود. گزینه‌های رایج شامل Instant، Dissolve، Smart Animate، Move، Push و Slide هستند. Direction، Easing و Duration بسته به Animation قابل تنظیم‌اند.
Smart Animate چگونه کار می‌کند؟
Smart Animate Layerهای matching را بین دو Frame پیدا می‌کند، تفاوت Propertyها را تشخیص می‌دهد و تغییر را Animate می‌کند. برای Toggle، Slider، Expand/Collapse، Loading، Parallax و Transitionهای نرم بسیار کاربردی است.
برای نتیجه قابل‌پیش‌بینی، Naming و Layer hierarchy بین Frameها باید منطقی باشد. اگر Figma نتواند Layerهای matching را تشخیص دهد، Smart Animate نتیجه موردنظر را تولید نمی‌کند.
Multiple Actions و Conditionals
یک Trigger می‌تواند بیش از یک Action داشته باشد و Actionها از بالا به پایین اجرا شوند. این قابلیت برای سناریوهایی مثل تغییر Variable و سپس Navigation یا اجرای چند رفتار پشت سر هم مفید است.
برای Prototypeهای پیشرفته‌تر می‌توانید از Variables و Conditionals استفاده کنید تا Flow براساس State یا مقدار کاربر تغییر کند.
Interactive Components در Prototype
اگر Interaction مربوط به State خود Component است، Interactive Components می‌تواند منطق را داخل Component نگه دارد. مثلا Button Hover، Toggle On/Off یا Checkbox را با Variants و Change to تعریف کنید تا در Instanceهای مختلف دوباره‌کاری کمتر شود.
برای جزئیات، آموزش Interactive Components در Figma را ببینید.
Presentation View و تست Prototype
- Flow Starting Point را مشخص کنید.
- Prototype را در Presentation View باز کنید.
- Navigation و Triggerها را مثل کاربر واقعی اجرا کنید.
- Scroll، Overlay، Back و Edge caseها را تست کنید.
- اگر Prototype برای User Test است، مسیر مطلوب را به شرکت‌کننده توضیح ندهید؛ Task بدهید و رفتار را مشاهده کنید.
- لینک Prototype را برای Stakeholder یا Tester Share کنید.
اشتباهات رایج در Prototyping
- Prototype بیش‌ازحد پیچیده: Fidelity را متناسب با سوالی که می‌خواهید تست کنید انتخاب کنید.
- Duplicate کردن Screen برای هر State: Interactive Components و Variables می‌توانند بسیاری از Stateها را ساده کنند.
- Trigger نامناسب: Hover برای Mobile رفتار واقعی نیست؛ Context دستگاه را در نظر بگیرید.
- نادیده گرفتن Overflow: صفحه بلند بدون Scroll قابل تست نیست.
- Smart Animate بدون Layer matching: Naming و hierarchy را بررسی کنید.
- تست فقط Happy Path: Back، Cancel، Error و مسیرهای جایگزین را هم بررسی کنید.
Prototype جای Development را می‌گیرد؟
نه. Prototype برای بررسی Interaction و تجربه طراحی است و لزوما تمام Logic، Performance، Accessibility و Edge caseهای محصول واقعی را بازتولید نمی‌کند. هدف این است که قبل از هزینه Development، فرضیه‌های مهم طراحی را قابل مشاهده و قابل تست کنید.
جمع‌بندی
Prototype در Figma از مجموعه Interactionها ساخته می‌شود: Trigger مشخص می‌کند چه زمانی رفتار شروع شود و Action تعیین می‌کند چه اتفاقی بیفتد. Flow، Overlay، Scroll، Smart Animate، Variables و Interactive Components ابزارهایی هستند که Prototype را از چند Screen متصل به یک تجربه قابل تست تبدیل می‌کنند.
- مرتبط: Interactive Components
- مرتبط: Variables
- مرتبط: Constraints
- همه آموزش‌ها: Figma در LearnUIX
