آموزش فیگما؛ ساخت پروتوتایپ فارسی برای پورتفولیوی طراحی سایت
با Figma Design یک پورتفولیوی فارسی کلیک‌پذیر طراحی کنید؛ از Frame و Auto Layout تا اتصال صفحات، آزمون مسیر بازگشت و اشتراک‌گذاری با دسترسی مناسب.
یک تصویر زیبا از صفحهٔ سایت نشان نمی‌دهد بازدیدکننده از کجا وارد می‌شود، چه چیزی را انتخاب می‌کند و چطور برمی‌گردد. در این آموزش فیگما، یک پورتفولیوی فارسی کوچک را به نمونه‌ای کلیک‌پذیر تبدیل می‌کنیم؛ خروجی مورد انتظار، مسیری روشن برای دیدن نمونه‌کارهاست، نه یک سایت متصل به سرور.
تمرین برای کسی مناسب است که می‌خواهد پیش از نوشتن فرانت‌اند، ترتیب محتوا و رفتار دکمه‌ها را مشخص کند. سناریو، نام‌ها و اندازه‌های پیشنهادی این مقاله آموزشی‌اند؛ نتیجهٔ آزمایش کاربری یا تجربهٔ اجرای یک پروژهٔ واقعی گزارش نمی‌شود. برای دنبال‌کردن آن به فایل قابل ویرایش در Figma Design نیاز دارید، اما افزونه یا ابزار تولید خودکار پیش‌نیاز نیست.
فیگما در این تمرین چه کاری انجام می‌دهد؟
طبق راهنمای رسمی پروتوتایپ، می‌توان صفحه‌ها را به جریان تعاملی وصل کرد و برای بازخورد نشان داد. کسی که دسترسی ویرایش دارد می‌تواند نمونه را بسازد و بینندهٔ دارای دسترسی مشاهده می‌تواند آن را در حالت ارائه اجرا کند. این مقاله دربارهٔ همین قابلیت در Figma Design است.
در توافق با مشتری، خروجی را دقیق نام ببرید: «طراحی و نمونهٔ تعاملی پورتفولیو». کلیک روی دکمهٔ تماس در یک نمونه، به‌معنای ارسال امن پیام نیست. نمایش یک صفحهٔ موفقیت هم ثابت نمی‌کند داده‌ای ذخیره شده است. اگر قرار است سایت واقعی تحویل دهید، پیاده‌سازی، میزبانی و آزمون مرورگر را جداگانه در محدودهٔ کار بنویسید.
قبل از بازکردن ابزار، مسیر را تعریف کنید
فرض کنید یک هنرجوی طراحی وب سه پروژهٔ تمرینی دارد. بازدیدکننده باید از صفحهٔ خانه یک پروژه را باز کند، نقش هنرجو و مسئلهٔ پروژه را بفهمد و بتواند به فهرست برگردد. برای تمرین اول، حساب کاربری، پرداخت و فرم چندمرحله‌ای لازم نیست. هر قاب باید به یک سؤال مشخص جواب دهد.
| قاب پیشنهادی | محتوای ضروری | اقدام قابل بررسی |
|---|---|---|
| خانه | معرفی کوتاه، عنوان پروژه‌ها و توضیح نقش | بازکردن جزئیات یک پروژه |
| جزئیات پروژه | مسئله، محدودیت، تصمیم طراحی و تصویر نمونه | بازگشت به فهرست |
| اطلاعات تماس | راه ارتباطی آزمایشی و توضیح روشن | بازگشت به خانه |
از ابتدا کنار نام هر پروژه بنویسید «تمرینی» یا «مشتری واقعی»؛ تصویر زیبا نباید سابقه‌ای را القا کند که وجود ندارد. برای صفحهٔ تماس از اطلاعات ساختگی استفاده کنید و روی نمونه مشخص کنید که ارسال واقعی انجام نمی‌شود. این کار هم مرز تمرین را روشن می‌کند و هم جلوی انتشار ناخواستهٔ اطلاعات شخصی را می‌گیرد.
مرحلهٔ اول: قاب‌ها و لایه‌ها را مرتب بسازید
Frame در فیگما ظرفی برای نگه‌داشتن لایه‌هایی مثل متن، تصویر و شکل است و می‌تواند قاب‌های کوچک‌تر را هم در خود داشته باشد. ابزار Frame را با کلید F انتخاب کنید، یک قاب بسازید و ابعاد آن را از فیلدهای عرض و ارتفاع تنظیم کنید. این رفتار در راهنمای رسمی Frame توضیح داده شده است.
اول نسخهٔ موبایل را محدود و مشخص نگه دارید
برای این سناریو عرض ۳۹۰ پیکسل را نقطهٔ شروع پیشنهادی بگیرید؛ این عدد استاندارد اجباری یا تضمین پوشش همهٔ گوشی‌ها نیست. سه قاب مستقل روی بوم ایجاد کنید و نام‌های «خانه»، «جزئیات» و «تماس» بدهید. آن‌ها را داخل یکدیگر نگذارید؛ قاب جزئیات باید یک صفحهٔ مستقل باشد، نه یک کارت پنهان در خانه.
در هر قاب، لایه‌های عنوان، توضیح و دکمه را با نام قابل‌فهم مشخص کنید. نامی مثل «دکمه مشاهده پروژه» هنگام اتصال بسیار روشن‌تر از چندین Rectangle تکراری است. برای چیدمان اولیه، رنگ‌های ساده و یک فونت فارسی خوانا کافی است. تا زمانی که ترتیب محتوا روشن نشده، تزئینات را به کار اصلی تبدیل نکنید.
متن فارسی واقعی را از همان ابتدا وارد کنید
به‌جای سه خط ساختگی هم‌اندازه، یک عنوان کوتاه و یک عنوان بلند بنویسید؛ مثلاً «صفحهٔ معرفی کتاب» در کنار «بازطراحی مسیر پیدا کردن کتاب در کتابخانهٔ محلی». متن‌ها را راست‌چین کنید، اما شماره، نشانی وب و واژه‌های لاتین را جداگانه بازبینی کنید. راست‌چین بودن به‌تنهایی به‌معنای درست بودن ترتیب همهٔ علامت‌ها در متن دوزبانه نیست.
برای کارت پروژه، پیشنهاد ما این ترتیب است: عنوان، یک جمله دربارهٔ مسئله، نقش شما و اقدام بعدی. اگر کارت فقط تصویر دارد، بازدیدکننده باید هدف آن را حدس بزند. متن واقعی را پیش از انتخاب ارتفاع نهایی کارت بنویسید تا طراحی اسیر یک نمونهٔ کوتاه و غیرواقعی نشود.
مرحلهٔ دوم: Auto Layout را برای تغییر محتوا تنظیم کنید
لایه‌های کارت را انتخاب کنید و با Shift+A یک Auto Layout بسازید. جهت عمودی برای ترتیب عنوان، توضیح و دکمه مناسب این تمرین است. فاصلهٔ بین اجزا را با Gap و فاصلهٔ اجزا از لبهٔ کارت را با Padding تنظیم کنید؛ این دو یک کار انجام نمی‌دهند. راهنمای رسمی Auto Layout رفتار اندازه‌گذاری را هم توضیح می‌دهد: Hug contents اندازه را با محتوا هماهنگ می‌کند، Fill container فضای در دسترس والد را می‌گیرد و Fixed اندازه را ثابت نگه می‌دارد. Fill برای فرزند والد دارای Auto Layout است، نه قاب سطح اصلی.
برای تمرین، فاصلهٔ داخلی ۱۶ و فاصلهٔ اجزا ۱۲ پیکسل را امتحان کنید؛ این‌ها تصمیم پیشنهادی‌اند، نه دستور همیشگی طراحی. عرض کارت را با ظرف آن هماهنگ و ارتفاعش را متناسب با متن در نظر بگیرید. سپس توضیح یک‌خطی را به سه خط تبدیل کنید. معیار موفقیت این است که متن روی دکمه نیفتد و کارت بعدی به آن نچسبد.
اگر با تغییر متن چیدمان به هم ریخت، ابتدا ساختار والد و فرزند را بررسی کنید. ممکن است متن فقط ظاهراً روی کارت قرار گرفته باشد و در ساختار لایه‌ها بیرون از آن باشد. تغییر تصادفی عددهای فاصله معمولاً این مشکل ساختاری را حل نمی‌کند. بعد از اصلاح، همان متن بلند را دوباره امتحان کنید، نه اینکه برای خوب دیده‌شدن قاب، متن را کوتاه کنید.
مرحلهٔ سوم: جزء تکراری را از صفحه جدا کنید
اگر دکمه یا کارت در چند صفحه تکرار می‌شود، یک نمونهٔ مرجع مشخص داشته باشید. در اصطلاح فیگما Main component ویژگی‌های جزء را تعریف می‌کند و Instance نسخهٔ قابل استفادهٔ آن در طراحی است. Instance را می‌توانید از بخش Assets وارد کنید یا در همان فایل با کپی‌کردن Component بسازید. جزئیات روش‌ها در راهنمای رسمی Instance آمده است.
در پروژهٔ کوچک لازم نیست از روز اول کتابخانه‌ای بزرگ بسازید. فعلاً یک دکمهٔ اصلی و یک کارت کافی است. کنار آن‌ها یادداشت کنید کدام ویژگی باید ثابت بماند و کدام محتوا عوض می‌شود: مثلاً شکل و فاصلهٔ دکمه ثابت است، اما برچسب آن می‌تواند «مشاهده پروژه» یا «بازگشت به خانه» باشد.
برای بازبینی، دو دکمهٔ هم‌نقش را کنار هم بگذارید و تفاوت‌هایشان را بررسی کنید. اگر رنگ، شعاع گوشه و فاصلهٔ متن بدون دلیل فرق دارند، هنوز یک قاعدهٔ روشن ندارید. برعکس، دکمهٔ بازگشت لازم نیست همان تأکید بصری اقدام اصلی را داشته باشد؛ تفاوت باید هدفمند باشد، نه نتیجهٔ کپی‌های پراکنده.
مرحلهٔ چهارم: صفحه‌ها را به هم وصل کنید
دکمهٔ «مشاهده پروژه» را انتخاب کنید، به تب Prototype بروید و اتصال آن را به قاب مستقل جزئیات بکشید. خود دکمه محل تعامل یا Hotspot است و مقصد، قاب صفحهٔ بعدی است. مطابق راهنمای اتصال پروتوتایپ، تعامل اتصال را بررسی کنید؛ برای این تمرین Trigger کلیک یا لمس، Action از نوع Navigate to و انتقال سادهٔ Instant مناسب است.
- دکمهٔ مشاهدهٔ پروژه در خانه را به جزئیات وصل کنید.
- روی صفحهٔ جزئیات، دکمه‌ای با برچسب روشن برای بازگشت قرار دهید و آن را به خانه متصل کنید.
- اگر قاب تماس دارید، از خانه به تماس و از تماس به خانه مسیر مستقل بسازید.
- هیچ دکمه‌ای را صرفاً به‌خاطر ظاهرش فعال نشان ندهید؛ اگر رفتاری ندارد، آن را حذف کنید یا آزمایشی بودنش را توضیح دهید.
برای نسخهٔ اول، حرکت نمایشی پیچیده لازم نیست. پیش از انتخاب انیمیشن، مطمئن شوید کلیک روی پروژهٔ اول همان اطلاعات را نشان می‌دهد. اگر همهٔ کارت‌ها به یک صفحهٔ نمونه می‌روند، در توضیح تمرین صریح بنویسید فقط یک پروژه پیاده شده است؛ در ارائه وانمود نکنید تمام مسیرها تکمیل‌اند.
نقطهٔ شروع و نام جریان را مشخص کنید
Flow starting point باید روی قاب سطح اصلی قرار بگیرد. با ایجاد نخستین اتصال، فیگما می‌تواند نقطهٔ شروع را بسازد؛ آن را بررسی کنید و نامی مثل «دیدن نمونه‌کار» بدهید. سپس از Preview جریان را اجرا کنید. برای اشتراک همان مسیر نیز می‌توانید لینک Flow را کپی کنید. روش دقیق در راهنمای جریان‌ها آمده است.
شروع ارائه از وسط صفحهٔ جزئیات باعث می‌شود آزمونگر نتواند پیدا شدن پروژه در خانه را ارزیابی کند. پیش از هر ارائه، نمونه را از نقطهٔ آغاز اجرا کنید و خودتان یک دور رفت و بازگشت را طی کنید. این بررسی اولیه جای آزمون با فرد دیگر را نمی‌گیرد، اما اتصال جاافتاده را زودتر آشکار می‌کند.
مرحلهٔ پنجم: نمونه را با وظیفه بسنجید، نه با سؤال سلیقه‌ای
به‌جای «قشنگ شده؟» یک وظیفه بدهید: «پروژهٔ کتابخانه را پیدا کن و بگو طراح چه مسئله‌ای را حل کرده است؛ بعد به فهرست برگرد». تا حد ممکن نام دکمه و مسیر را در سؤال نگویید. اگر مجبور شدید جهت را توضیح دهید، همان مداخله را یادداشت کنید؛ آن تلاش دیگر شاهد کامل انجام مستقل وظیفه نیست.
| آزمون پیشنهادی | چه چیزی مشاهده شود؟ | اقدام بعدی در صورت مشکل |
|---|---|---|
| پیدا کردن پروژه | آیا عنوان و نقش از روی کارت فهمیده می‌شود؟ | اصلاح عنوان و ترتیب اطلاعات |
| بازگشت از جزئیات | آیا فرد بدون راهنمایی راه خروج را می‌بیند؟ | اصلاح برچسب و جای دکمه |
| عنوان طولانی فارسی | آیا متن با دکمه یا تصویر هم‌پوشانی دارد؟ | بازبینی ظرف، ارتفاع و فاصله‌ها |
| عرض کوچک‌تر قاب | آیا محتوای مهم بریده می‌شود؟ | اصلاح چیدمان و ساخت نسخهٔ مناسب عرض جدید |
| دسترسی از لینک | آیا مخاطب همان سطح دسترسی مطلوب را دارد؟ | بازبینی Share پیش از ارسال نهایی |
برای ثبت بازخورد، سه ستون ساده کافی است: وظیفه، مشاهده و اصلاح پیشنهادی. جملهٔ «کاربر دکمه را ندید» را با رفتار قابل مشاهده کامل کنید: «در بخش تصاویر مکث کرد و بعد پرسید چطور برگردد». از یک نفر یا یک نشست کوتاه درصد موفقیت عمومی نسازید. این تمرین برای یافتن ابهام‌هاست، نه اثبات آماری کیفیت محصول.
اشتراک‌گذاری: لینک ارائه لزوماً فایل اصلی را پنهان نمی‌کند
قبل از Copy link، در Share مخاطب و مجوز را بررسی کنید. نکتهٔ مهم راهنمای رسمی اشتراک‌گذاری این است که اشتراک prototype-only در پلن‌های پولی ارائه می‌شود؛ در Starter، بینندهٔ نمونه می‌تواند از منوی نمایش به فایل اصلی در ویرایشگر برود. بنابراین لینک ارائه را خودبه‌خود یک لایهٔ محرمانگی فرض نکنید.
پیش از تحویل، یادداشت‌های داخلی مشتری، اطلاعات شخصی و نمونه‌های دارای محدودیت استفاده را از فایل ارائه جدا نگه دارید. برای بازخورد معمول، مجوز مشاهده را به ویرایش ترجیح دهید، مگر همکاری واقعاً به ویرایش نیاز داشته باشد. لینک را با حسابی که سطح دسترسی مخاطب را دارد بررسی کنید؛ باز شدن آن برای مالک فایل، دسترسی دیگران را ثابت نمی‌کند.
چه چیزی را به توسعه‌دهنده تحویل دهیم؟
یک لینک تنها همهٔ تصمیم‌ها را منتقل نمی‌کند. همراه طراحی، فهرست صفحات، متن نهایی، رفتار دکمه‌ها و حالت‌های پیاده‌نشده را مشخص کنید. مثلاً بنویسید «فرم تماس در نمونه فقط نمایشی است؛ اعتبارسنجی و ارسال در مرحلهٔ توسعه تعریف می‌شود». این جمله جلوی برداشت نادرست از کامل بودن محصول را می‌گیرد.
- نام و هدف هر صفحه و مسیر ورود و خروج آن روشن باشد.
- فهرست تصاویر و وضعیت مجوز استفاده از آن‌ها همراه فایل باشد.
- رفتار متن بلند، نبود تصویر و اطلاعات ناقص توضیح داده شود.
- تفاوت چیدمان موبایل و دسکتاپ با تصمیم مشخص بیان شود.
- موارد نیازمند تست در محصول واقعی، مانند صفحه‌کلید، فرم و خطای شبکه، جدا فهرست شوند.
اگر مرحلهٔ بعدی را با کد انجام می‌دهید، مسیر ساخت اولین سایت واکنش‌گرا با HTML و CSS مکمل این تمرین است. اگر هدفتان استفاده از قالب آماده برای انتشار پورتفولیوست، راهنمای قالب‌های Framer مسیر دیگری را توضیح می‌دهد. انتخاب مسیر توسعه را با نمایش نمونهٔ فیگما یکی ندانید.
پرسش‌های متداول
آیا پروتوتایپ فیگما همان سایت آماده انتشار است؟
خیر. نمونه این آموزش برای نمایش صفحات و مسیر کلیک است؛ پیاده‌سازی سایت، ذخیره داده، امنیت و آزمون در مرورگر واقعی مرحله‌ای جداست.
چرا گزینه Fill container را نمی‌بینم؟
این گزینه برای فرزند یک فریم دارای Auto Layout کاربرد دارد، نه فریم سطح اصلی. ابتدا والد و نوع چیدمان آن را بررسی کنید.
آیا لینک پروتوتایپ فایل اصلی را پنهان می‌کند؟
همیشه نه. طبق راهنمای Figma، اشتراک prototype-only به پلن‌های پولی مربوط است؛ در Starter بیننده می‌تواند از نمایش پروتوتایپ به فایل اصلی برود.
آیا برای این تمرین به افزونه یا هوش مصنوعی نیاز داریم؟
خیر. تمرین با فریم، متن، چیدمان و اتصال صفحات انجام می‌شود؛ افزونه و تولید خودکار جزو پیش‌نیازهای آن نیستند.
جمع‌بندی و تمرین بعدی
شروع خوب در فیگما، تعداد زیاد صفحه‌ها نیست؛ یک مسیر کوچک و قابل‌فهم است. ابتدا متن و قاب‌ها را مشخص کنید، چیدمان را با محتوای طولانی بسنجید، اتصال‌ها و نقطهٔ شروع را تنظیم کنید و سطح دسترسی لینک را قبل از تحویل کنترل کنید. بهبود بعدی را از یک مشاهدهٔ مشخص انتخاب کنید، نه از اضافه‌کردن تزئینات بیشتر.
امروز فقط مسیر «خانه، جزئیات پروژه، بازگشت» را طراحی کنید و از یک نفر بخواهید بدون راهنمایی شما آن را طی کند.