آموزش پروتوتایپ در فیگما

یادم هست اولین پروتوتایپ جدی‌ام در Figma (فیگما) را برای یک اپلیکیشن موبایل ساختم و در جلسه تحویل، مشتری به‌جای اینکه ۲۰ دقیقه به توضیح من گوش بدهد، خودش سه بار پروتوتایپ را اجرا کرد و در دقیقه هفتم گفت «حالا دقیقاً می‌فهمم چه می‌خواهم». آن روز برای من یادآور شد که پروتوتایپ، جای اسلاید ارائه را می‌گیرد. از آن روز، برای هر پروژه‌ای که بیش از سه صفحه دارد، یک پروتوتایپ تعاملی در Figma می‌سازم. این مقاله، همان مسیر است که از صفر تا اولین پروتوتایپ حرفه‌ای طی کرده‌ام.

پروتوتایپ در فیگما، بیشتر از یک اسلایدشو

در نگاه اول، پروتوتایپ در Figma (فیگما) شبیه یک اسلایدشو به‌نظر می‌رسد: صفحه‌ای به صفحه دیگر، با یک کلیک. ولی تفاوت بنیادین همان‌جاست که Figma می‌تواند بین دو فریم کاملاً متفاوت، حالت میانی بسازد و انیمیشن طبیعی تولید کند. این تفاوت باعث می‌شود پروتوتایپ در Figma (فیگما) نه یک ارائه ساده، بلکه یک تجربه قابل‌لمس باشد. اگر با مفهوم کلی پروتوتایپ آشنا نیستید، پروتوتایپ چیست و چرا در طراحی مهم است نقطه شروع درستی است؛ در این مقاله، مستقیم به Figma (فیگما) می‌پردازم.

مسئله دومی که پروتوتایپ Figma (فیگما) را جدی می‌کند، توانایی اشتراک‌گذاری راحت آن است. برخلاف ابزارهای سنگین که برای اجرا نیاز به نصب داشتند، یک لینک Figma (فیگما) در مرورگر مشتری باز می‌شود و همان تجربه‌ای را می‌بیند که شما ساخته‌اید. اگر می‌خواهید Figma (فیگما) را با ابزارهای مشابه مقایسه کنید، تفاوت فیگما و ادوبی XD و مقایسه فیگما و اسکچ تصویر کامل‌تری می‌دهند. یک نگاه هم به فیگما چیست و چرا محبوب است برای درک زمینه این ابزار مفید است.

پروتوتایپ در Figma (فیگما)، جای ساعت‌ها توضیح شفاهی در جلسه تحویل را می‌گیرد؛ چون مشتری خودش تجربه را می‌بیند، نه توصیف شما را.

پنل Prototype را بشناسید

برای شروع پروتوتایپ، باید با پنل Prototype (نمونه اولیه) در Figma (فیگما) آشنا باشید. این پنل در سمت راست قرار دارد و با انتخاب تب Prototype (نمونه اولیه) در بالای آن فعال می‌شود. سه بخش اصلی این پنل عبارت است از:

• Flow Starting Point: جایی که پروتوتایپ از آن شروع می‌شود. هر پروتوتایپ می‌تواند چند نقطه شروع داشته باشد.
• Connections: فهرست اتصال‌های فریم فعلی. این‌جا مشخص می‌شود هر المان به کدام فریم می‌رود.
• Present: دکمه‌ای که پروتوتایپ را در حالت اجرا باز می‌کند.

قبل از هر اقدامی، توصیه می‌کنم نام فریم‌ها را معنادار کنید. Frame 1، Frame 2 و مشابه آن، در پروتوتایپ‌های بزرگ به کابوس تبدیل می‌شوند. اسم‌گذاری واضح مثل Home، Product-List، Product-Detail و Cart، وقتی ده‌ها اتصال دارید، وقت شما را نجات می‌دهد.

گام اول: ساخت اولین Connection

برای ساخت اولین اتصال، مراحل زیر را طی کنید:

1. تب Prototype (نمونه اولیه) را در پنل سمت راست باز کنید.
2. روی المانی که کاربر باید کلیک کند (مثل دکمه ورود) کلیک کنید. یک دستگیره آبی رنگ در کنار آن ظاهر می‌شود.
3. دستگیره را بکشید و به فریم مقصد وصل کنید.
4. پنجره تنظیمات اتصال باز می‌شود؛ در آن Trigger، Action و Animation را تنظیم کنید.

نکته مهمی که در تجربه‌ام زیاد دیده‌ام: اگر دستگیره را اشتباهی به داخل همان فریم بکشید، اتصال روی خودش می‌افتد و پروتوتایپ رفتار عجیبی نشان می‌دهد. همیشه پیش از رها کردن دستگیره، فریم مقصد را در نمای کلی چک کنید.

علاوه بر این، می‌توانید به‌جای المان‌ها، کل فریم را انتخاب کنید و از دستگیره بالای فریم استفاده کنید. این روش برای اتصالات ساده مثل «کلیک روی هر جای صفحه»، سریع‌تر است. در نهایت، هر فریم می‌تواند هم منبع اتصال باشد و هم مقصد آن؛ محدودیتی در این زمینه وجود ندارد.

گام دوم: انتخاب Trigger مناسب

Trigger (محرک) تعیین می‌کند پروتوتایپ در چه شرایطی به فریم بعدی می‌رود. Figma (فیگما) چند نوع Trigger دارد که هرکدام کاربرد مشخصی دارند:

در پروژه‌های واقعی، ترکیب این Triggerها پروتوتایپ را واقع‌گرایانه‌تر می‌کند. مثلاً یک Tooltip را با While Hovering می‌سازید، لودینگ خودکار بعد از پرداخت را با After Delay شبیه‌سازی می‌کنید، و انیمیشن کشیدن کارت را با On Drag.

اشتباه شایعی که زیاد می‌بینم: استفاده بی‌دلیل از On Click روی همه‌چیز. بعضی از تجربه‌ها با While Hovering یا On Drag طبیعی‌تر به‌نظر می‌رسند. مثلاً نمایش پروفایل کاربر با گذاشتن ماوس روی آواتار، تجربه‌ای طبیعی‌تر از کلیک است. پیش از انتخاب Trigger، از خودتان بپرسید کاربر واقعی در این موقعیت چه کار می‌کند.

گام سوم: Actionها و نوع ناوبری

Action (کنش) تعیین می‌کند پروتوتایپ دقیقاً چه کاری انجام دهد. مهم‌ترین Actionها در Figma (فیگما):

• Navigate to: رفتن به فریم دیگر. این رایج‌ترین Action است.
• Change to: تغییر حالت همان فریم. برای Toggle و تغییرات کوچک مناسب است.
• Back: بازگشت به فریم قبلی، معادل دکمه Back در مرورگر.
• Close Overlay: بستن لایه Overlay (پنجره شناور) باز.
• Scroll to: رفتن به موقعیت مشخص در همان فریم.
• Open Link: باز کردن یک URL بیرونی.
• Swap with: جایگزین کردن یک کامپوننت با کامپوننت دیگر.

یکی از نکاتی که در پروژه‌های بزرگ برایم صرفه‌جویی زمان زیادی کرده، استفاده از Back به‌جای اتصال دستی به فریم قبلی است. با این Action، اگر ترتیب فریم‌ها در آینده عوض شود، مسیر بازگشت خودکار به‌روز می‌شود و نیازی به تغییر دستی هر اتصال نیست. اما یک هشدار: در پروتوتایپ‌های چندمسیره که یک فریم از چند مسیر قابل دسترسی است، Back ممکن است کاربر را به مسیر اشتباه برگرداند؛ در این نوع سناریوها، اتصال دستی قابل‌پیش‌بینی‌تر است.

هر Action در پروتوتایپ، یک تعهد به کاربر است. اگر این تعهد شفاف نباشد، کاربر در اولین ثانیه گم می‌شود.

گام چهارم: Transition و انیمیشن

Transition (گذار) تعیین می‌کند تغییر از فریم فعلی به فریم بعدی چطور اتفاق بیفتد. در Figma (فیگما) چند نوع Transition دارید:

1. Instant: بدون انیمیشن، تغییر آنی.
2. Dissolve: محو شدن فریم قبلی و ظاهر شدن فریم جدید.
3. Smart Animate: انیمیشن هوشمند بین لایه‌های هم‌نام در دو فریم.
4. Move In / Move Out: ورود و خروج از جهت مشخص (بالا، پایین، راست، چپ).
5. Push: فشار دادن فریم قبلی توسط فریم جدید.
6. Slide In / Slide Out: ورود و خروج کشویی از کنار.

انتخاب Transition مناسب، تجربه پروتوتایپ را طبیعی‌تر می‌کند. برای رفتن بین صفحات اصلی از Dissolve استفاده کنید، برای باز کردن پنل کناری از Slide In، برای Tooltip از Instant یا Dissolve سریع، و برای تعاملات بین حالت‌های یک کامپوننت از Smart Animate.

نکته‌ای که در تجربه‌ام زیاد دیده‌ام: مدت زمان Transition (Duration) را کوتاه نگه دارید. انیمیشن‌های ۲۰۰ تا ۴۰۰ میلی‌ثانیه در اکثر پروتوتایپ‌ها طبیعی به‌نظر می‌رسند. هر چیزی بالای ۵۰۰ میلی‌ثانیه، تجربه را کند حس می‌کند. اگر با مفهوم کلی اصول طراحی UI (User Interface یا رابط کاربری) آشنا نیستید، طراحی رابط کاربری چیست و چرا اهمیت دارد نقطه شروع خوبی است.

گام پنجم: Smart Animate و راز پروتوتایپ نرم

Smart Animate (انیمیشن هوشمند) مهم‌ترین قابلیت Figma (فیگما) در ساخت پروتوتایپ‌های نرم است. این قابلیت، لایه‌هایی که در دو فریم نام یکسان دارند را تشخیص می‌دهد و به‌طور خودکار بین موقعیت، اندازه و رنگشان انیمیشن می‌سازد. برای فعال کردن آن، کافی است Transition را روی Smart Animate بگذارید و مطمئن شوید که نام لایه‌های مرتبط در دو فریم یکسان است.

پروژه واقعی‌ای که در آن Smart Animate تجربه تحویل را متحول کرد، یک اپلیکیشن فروشگاهی بود. طراح اول می‌خواست صفحه محصول به سبد خرید پرش کند. با Smart Animate، تصویر محصول از موقعیت اولیه‌اش در کارت، به گوشه سبد خرید حرکت می‌کرد و این حس را می‌داد که محصول واقعاً به سبد منتقل شده است. مشتری در جلسه تحویل با یک لبخند گفت که این جزئیات، تجربه را جدی‌تر نشان می‌دهد.

سه شرط کلیدی برای Smart Animate:

1. نام لایه‌های یکسان در دو فریم. مثلاً اگر در فریم اول لایه با نام product-image است، در فریم دوم هم باید همین نام باشد.
2. ساختار Tweening ساده. پیچیدگی زیاد در ساختار باعث می‌شود Smart Animate نتیجه درست ندهد.
3. تنظیم Easing درست. Ease In, Ease Out یا Ease In and Out بسته به تجربه، حس متفاوتی می‌دهد.

یک اشتباه رایج: بعضی از طراحان، نام‌ها را ناخواسته در دو فریم متفاوت می‌گذارند و بعد تعجب می‌کنند که Smart Animate کار نمی‌کند. برای جلوگیری از این مشکل، از کامپوننت‌ها و Auto Layout استفاده کنید تا نام لایه‌ها به‌طور خودکار در همه فریم‌ها یکسان بماند. اگر با مفهوم کامپوننت در Figma (فیگما) آشنا نیستید، طراحی رابط کاربری با فیگما این لایه را مفصل توضیح می‌دهد.

گام ششم: Overlay و مودال

Overlay (لایه شناور) در Figma (فیگما) برای ساخت Modal (مودال یا پنجره شناور)، Tooltip و منوهای بازشو استفاده می‌شود. به‌جای رفتن به فریم جدید، Overlay روی فریم فعلی باز می‌شود و با یک انیمیشن نرم ظاهر می‌شود. الگوی ساخت Overlay:

1. Action را روی Navigate to بگذارید و سپس گزینه Open as Overlay را فعال کنید.
2. در تنظیمات Overlay، Position را روی Top Center، Center، Bottom Center یا موقعیت دلخواه بگذارید.
3. در گزینه Background، رنگ پس‌زمینه را با شفافیت مشخص کنید تا Modal روی محتوای پشتش شفاف باشد.
4. برای بستن، یک Trigger با Action Close Overlay روی دکمه بستن تنظیم کنید.

در تجربه‌ام، Overlay برای Modalهای کوچک، ابزار انتخاب (Dropdown)، Notifications و Tooltipها عالی است. ولی برای صفحه‌های بزرگ مثل تنظیمات کاربری، بهتر است به فریم جدید بروید تا کاربر گم نشود. الگوی مشابهی را می‌توانید برای شبیه‌سازی مودال‌ها در پروتوتایپ‌های موبایل هم به‌کار ببرید که پروتوتایپ در طراحی اپلیکیشن موبایل به آن پرداخته است.

گام هفتم: Scroll و موقعیت‌های ثابت

Scroll (اسکرول) در پروتوتایپ Figma (فیگما) دو حالت دارد: Vertical (عمودی) و Horizontal (افقی). برای فعال کردن Scroll روی یک فریم:

1. فریم را انتخاب کنید.
2. در پنل Design (طراحی)، در بخش Prototype (نمونه اولیه)، گزینه Overflow Behavior را روی Vertical یا Horizontal بگذارید.
3. مطمئن شوید که محتوای فریم، از ارتفاع فریم بیشتر است تا Scroll معنا داشته باشد.

نکته‌ای که پروتوتایپ را واقع‌گرایانه‌تر می‌کند، موقعیت‌های ثابت (Sticky) است. اگر می‌خواهید Header (هدر) بالای صفحه همیشه نمایان بماند، آن را روی گزینه Fix position when scrolling بگذارید. همچنین می‌توانید در Figma (فیگما)، موقعیت ثابت افقی را هم فعال کنید، مثلاً برای ستون کناری در داشبورد.

در تجربه من، پیش از هر چیز به این فکر کنید که Scroll واقعی در محصول چطور کار می‌کند. مثلاً در اپلیکیشن موبایل، Scroll عمودی روی موبایل با اینرسی انجام می‌شود ولی در Figma (فیگما) اینرسی شبیه‌سازی نمی‌شود. مهم نیست که Figma (فیگما) دقیقاً مثل محیط واقعی رفتار کند؛ مهم این است که تجربه کاربری مورد انتظار را منتقل کند. اگر می‌خواهید پروتوتایپ را در موبایل واقعی تست کنید، تست پروتوتایپ با کاربران روش‌های دقیقی ارائه می‌دهد.

گام هشتم: Flow و ساختاردهی مسیرها

در پروتوتایپ‌های بزرگ، تعداد اتصال‌ها زیاد می‌شود و پیدا کردن مسیرها سخت می‌شود. Flow (جریان) در Figma (فیگما) راه‌حل این مسئله است. با Flow، می‌توانید مجموعه‌ای از اتصال‌ها را در یک گروه منطقی قرار دهید و برای آن یک نام بگذارید. مثلاً Flow با نام Sign-up، Flow با نام Checkout و Flow با نام Password-Reset.

برای ساخت Flow:

1. تب Prototype (نمونه اولیه) را باز کنید.
2. فریمی که نقطه شروع Flow است را انتخاب کنید.
3. در بخش Flow Starting Point، یک نام معنادار وارد کنید.
4. وقتی پروتوتایپ را Present می‌کنید، Figma (فیگما) فهرست Flowها را نشان می‌دهد و مخاطب می‌تواند بینشان جابه‌جا شود.

در تجربه من، پروژه‌هایی که در آن‌ها Flow درست تعریف نشده، در جلسه تحویل به یک آشفتگی تبدیل می‌شوند. مشتری نمی‌داند از کجا شروع کند، و شما مدام می‌گویید «از آن بالا شروع کنید». تعریف Flowها، این نوع سرگردانی را حذف می‌کند و به جلسه تحویل ساختار می‌دهد.

گام نهم: اشتراک و تست پروتوتایپ

پس از تکمیل پروتوتایپ، نوبت اشتراک‌گذاری است. سه روش اصلی در Figma (فیگما):

• Share Prototype Link: لینک اشتراک‌گذاری پروتوتایپ. هرکسی با لینک، می‌تواند پروتوتایپ را در مرورگر اجرا کند.
• Mirror on Mobile: اپلیکیشن موبایل Figma (فیگما) را باز می‌کنید و پروتوتایپ را روی موبایل واقعی می‌بینید. این روش تجربه دقیق‌تری می‌دهد.
• Record Video: ضبط ویدیو از پروتوتایپ و اشتراک آن در جلسه یا ایمیل.

نکته مهم در اشتراک‌گذاری: در تنظیمات Share، سطح دسترسی را دقیق تعیین کنید. اگر می‌خواهید مخاطب فقط پروتوتایپ را ببیند و دست به لایه‌ها نزند، گزینه Can View Prototype را انتخاب کنید، نه Can Edit. در پروژه‌های شرکتی، این تفکیک ساده از لو رفتن فایل طراحی جلوگیری می‌کند. برای تست سازمان‌یافته با کاربران، روش تست پروتوتایپ با کاربران چارچوب دقیقی ارائه می‌دهد.

اشتباهات رایج در پروتوتایپ فیگما

در پروژه‌های زیادی که پروتوتایپ Figma (فیگما) را بررسی کرده‌ام، پنج اشتباه بیشتر از بقیه تکرار شده:

1. استفاده از On Click روی همه‌چیز. همان‌طور که پیشتر گفتم، بعضی از تعامل‌ها با While Hovering یا On Drag طبیعی‌ترند. انتخاب Trigger درست، تجربه را معنادار می‌کند.
2. نام لایه‌های نامنظم. این باعث می‌شود Smart Animate کار نکند و پروتوتایپ بی‌جان به‌نظر برسد.
3. Transitionهای طولانی. انیمیشن‌های ۸۰۰ میلی‌ثانیه یا بیشتر، حس کندی می‌دهند. کوتاه نگه دارید.
4. فقدان نقطه شروع (Flow Starting Point). وقتی مخاطب لینک را باز می‌کند، نمی‌داند از کجا شروع کند.
5. فراموش کردن تست در موبایل واقعی. پروتوتایپ در دسکتاپ خوب به‌نظر می‌رسد ولی در موبایل واقعی، کلیک‌ها و انیمیشن‌ها رفتار متفاوتی دارند.

اشتباه ششم که کمتر گفته می‌شود ولی در پروژه‌های واقعی دیده‌ام: بی‌توجهی به تفاوت‌های RTL (Right-to-Left یا راست‌به‌چپ). پروتوتایپ‌هایی که برای مخاطب فارسی طراحی می‌شوند، اگر LTR (Left-to-Right یا چپ‌به‌راست) ساخته شوند، در جلسه تحویل مشتری احساس بی‌قرابتی می‌کند. Figma (فیگما) از RTL پشتیبانی می‌کند، ولی باید در طراحی فریم‌ها و چیدمان المان‌ها آن را در نظر بگیرید. یکی از درس‌های مهم تفاوت پروتوتایپ و وایرفریم این است که پروتوتایپ، تجربه واقعی است و باید برای مخاطب واقعی بهینه شود.

لایه پنهان: پروتوتایپ به‌عنوان قرارداد

برای کسانی که در تیم‌های محصول کار می‌کنند، پروتوتایپ Figma (فیگما) فقط یک خروجی طراحی نیست؛ یک قرارداد (Contract) است بین سه گروه: طراح، توسعه‌دهنده و صاحب محصول. هر Transition، هر Action و هر Flow در پروتوتایپ، یک تعهد درباره رفتار نهایی محصول است. اگر این قرارداد در پروتوتایپ شفاف نباشد، توسعه‌دهنده تفسیر خودش را می‌سازد و نتیجه نهایی با تصور طراح متفاوت می‌شود.

سه مشاهده دقیق‌تر از تجربه‌های میدانی: اول، در تیم‌های بزرگ با چند طراح، عدم وجود یک استاندارد واحد برای ساخت پروتوتایپ باعث می‌شود هر طراح روش خودش را داشته باشد و توسعه‌دهنده نتواند بین پروژه‌ها الگوی ثابت پیدا کند. تیم‌های بالغ، یک مجموعه از اصول پروتوتایپ‌سازی دارند: نام‌گذاری فریم‌ها، سطح‌های Flow، و استانداردهای Transition.

دوم، در معماری Design System (سیستم طراحی)، پروتوتایپ‌ها می‌توانند به‌عنوان مستندات زنده (Living Documentation) استفاده شوند. یعنی به‌جای نوشتن صد صفحه مستندات تعاملی، یک مجموعه از پروتوتایپ‌ها در Figma (فیگما) نگه داشته می‌شود که هر تغییر در کامپوننت، بلافاصله در پروتوتایپ هم اعمال می‌شود. اگر با مفهوم سیستم طراحی آشنا نیستید، سیستم طراحی چیست و چرا مهم است نقطه شروع خوبی است.

سوم، در فرآیند تست کاربر (User Testing)، پروتوتایپ Figma (فیگما) می‌تواند جایگزین بخش بزرگی از تست‌های گران‌قیمت شود. به‌جای ساخت نسخه اولیه کد و تست آن، پروتوتایپ تعاملی Figma (فیگما) با چند کاربر واقعی اجرا می‌شود و بازخورد سریع جمع‌آوری می‌شود. چارچوب دقیق این نوع تست در تست پروتوتایپ با کاربران آمده است.

چهارم، در CI/CD (Continuous Integration / Continuous Deployment یا یکپارچه‌سازی و استقرار پیوسته) محصولات دیجیتال، پروتوتایپ Figma (فیگما) می‌تواند به‌عنوان بخشی از مخزن طراحی نگه داشته شود. یعنی طراحان، فایل پروتوتایپ را در مخزن Git نگه می‌دارند و در هر بازبینی، تفاوت‌ها را می‌بینند. این انضباط در تیم‌های بالغ نرم‌افزار رایج است ولی در تیم‌های طراحی کمتر دیده می‌شود. تفاوت بین این دو رویکرد، در بلندمدت بین نظم و هرج‌ومرج است.

پنجم، در معماری چند-پلتفرمی (Cross-Platform)، یک پروتوتایپ Figma (فیگما) می‌تواند همزمان برای موبایل، وب و تبلت نسخه‌سازی شود. مهم این است که در ساختار فایل، تفاوت‌های اندازه، تعامل و چیدمان در نظر گرفته شود. اگر می‌خواهید پروتوتایپ موبایل بسازید، پروتوتایپ در طراحی اپلیکیشن موبایل تفاوت‌های کلیدی را بررسی می‌کند. همچنین برای انتخاب مدل پروتوتایپ مناسب، تفاوت پروتوتایپ low-fidelity و high-fidelity راهنمای خوبی است.

آخرین فریم: از پروتوتایپ تا تحویل

اگر بخواهم این مقاله را در سه نکته فشرده کنم: اول، پروتوتایپ Figma (فیگما) فقط یک سری اتصال نیست؛ یک تجربه است که باید حس طبیعی به کاربر بدهد و انتخاب درست Trigger و Transition، بیشترین اثر را در این تجربه دارد. دوم، Smart Animate با رعایت نام‌گذاری یکسان لایه‌ها، پروتوتایپ شما را از یک اسلایدشو ساده به یک تجربه نرم تبدیل می‌کند؛ این یک قابلیت کوچک با اثر بزرگ است. سوم، پروتوتایپ را همیشه در موبایل واقعی و با کاربران واقعی تست کنید؛ تجربه دسکتاپ، تنها بخشی از تصویر است.

پیشنهاد عملی من برای همین هفته: اگر تا حالا پروتوتایپ Figma (فیگما) نساخته‌اید، یک اپلیکیشن کوچک با سه صفحه بسازید — ورود، داشبورد و جزئیات — و روی آن سه Transition مختلف را امتحان کنید. با همین تمرین کوچک، بیشتر از خواندن چندین مقاله یاد می‌گیرید. اگر می‌خواهید در ساخت پروتوتایپ حرفه‌ای‌تر شوید، ساخت پروتوتایپ در فیگما و ساخت پروتوتایپ موثر گام‌های بعدی مسیر شما هستند.

اگر در پروژه‌ای با یک چالش خاص در پروتوتایپ Figma (فیگما) مواجه شده‌اید که در این فهرست نبوده — به‌خصوص اگر روی پروژه‌های فارسی، موبایل یا RTL کار کرده‌اید — برایم بنویسید چه چیزی در مسیر ساخت بیشترین وقت شما را گرفت و چطور به جواب رسیدید. تجربه‌های واقعی شما همان چیزی است که این راهنما را برای نفر بعدی دقیق‌تر می‌کند. 🎨