آموزش فیگما زمانی کاربردی می‌شود که بتوانید از ابزارهای آن برای تبدیل یک ایده اولیه به رابطی منظم و قابل بررسی استفاده کنید. شاید با مفهوم وایرفریم آشنا باشید، اما ندانید چطور باید ساختار اولیه صفحه را در Figma پیاده‌سازی کنید، عناصر آن را مرتب نگه دارید و در نهایت یک نمونه کلیک‌پذیر بسازید.
در این آموزش پروژه‌محور، به‌جای معرفی پراکنده ابزارهای فیگما، طراحی یک صفحه فرضی معرفی دوره HTML را از ابتدا دنبال می‌کنیم. ابتدا ساختار صفحه را ایجاد می‌کنیم، سپس رنگ‌ها، تایپوگرافی و فاصله‌گذاری را تنظیم می‌کنیم، با Auto Layout نسخه دسکتاپ و موبایل می‌سازیم و با کمک کامپوننت‌ها و پروتوتایپ، مسیر نمونه ثبت‌نام را طراحی می‌کنیم.
هدف این است که در پایان بتوانید یک فایل طراحی قابل ویرایش و یک پروتوتایپ تعاملی بسازید و تصمیم‌های اصلی طراحی خود را توضیح دهید؛ بدون اینکه این نمونه را با یک وب‌سایت پیاده‌سازی‌شده یا سامانه ثبت‌نام واقعی اشتباه بگیرید.
شروع کار با فیگما و آماده‌سازی پروژه
برای شروع طراحی رابط کاربری با فیگما (Figma)، ابتدا باید یک فایل طراحی بسازیم و ساختاری را که قرار است روی آن کار کنیم مشخص کنیم. در این آموزش، قرار نیست بدون برنامه چند شکل و دکمه روی صفحه قرار دهیم؛ می‌خواهیم وایرفریم یک صفحه معرفی دوره آموزشی را به رابطی منظم و در ادامه به یک نمونه تعاملی تبدیل کنیم.
پروژه ما طراحی صفحه معرفی یک دوره فرضی آموزش HTML است. این صفحه باید اطلاعات لازم برای شناخت دوره را نمایش دهد و مسیر شروع ثبت‌نام را در اختیار کاربر بگذارد. پیش از طراحی ظاهر آن، محیط فیگما را آماده می‌کنیم و وایرفریم اولیه را به‌عنوان نقطه شروع در نظر می‌گیریم.
پیش‌نیازهای شروع آموزش فیگما
برای انجام این پروژه به یک کامپیوتر، اتصال اینترنت، حساب کاربری فیگما و یک وایرفریم اولیه نیاز دارید. فیگما هم در مرورگر و هم از طریق برنامه دسکتاپ ویندوز و مک قابل استفاده است. برای دنبال‌کردن مراحل این آموزش، استفاده از نسخه مرورگر کافی است و نیازی به نصب برنامه دسکتاپ ندارید.
ابزارهای اصلی موردنیاز پروژه، از طراحی فریم‌ها و چیدمان عناصر تا ساخت کامپوننت و پروتوتایپ، در طرح رایگان Starter فیگما نیز در دسترس هستند. بنابراین برای شروع این تمرین نیازی به خرید اشتراک پولی ندارید.
آشنایی مقدماتی با مفاهیمی مانند رابط کاربری و وایرفریم کمک می‌کند دلیل تصمیم‌های طراحی را بهتر درک کنید؛ بااین‌حال، لازم نیست از قبل کار با ابزارهای فیگما را بلد باشید.
چگونه یک فایل جدید در Figma بسازیم؟
برای شروع، باید یک فایل از نوع Figma Design ایجاد کنیم. این نوع فایل برای طراحی رابط‌های دیجیتال و ساخت پروتوتایپ استفاده می‌شود و با محیط‌هایی مانند FigJam که بیشتر برای ایده‌پردازی و کار روی تخته‌های بصری هستند، تفاوت دارد.
مراحل ساخت فایل به این صورت است:
- وارد وب‌سایت Figma شوید و حساب کاربری بسازید یا به حساب موجود خود وارد شوید.
- در محیط مدیریت فایل‌ها، بخش Drafts را باز کنید. گزینه + Create را انتخاب کنید و از فهرست بازشده، Design را بزنید. راه ساده‌تر این است که پس از ورود به حساب، آدرس figma.new را در مرورگر باز کنید.
- پس از بازشدن ویرایشگر، نام فایل را به «پروژه طراحی صفحه دوره HTML» تغییر دهید تا بعداً آن را میان فایل‌های دیگر تشخیص دهید.
- مطمئن شوید فایل در محیط ویرایش Figma Design باز شده است و می‌توانید ابزارهای طراحی و فضای مرکزی کار را مشاهده کنید.
اکنون یک فایل طراحی در اختیار دارید. نیازی نیست در همین مرحله عناصر صفحه را بسازید؛ ابتدا باید بخش‌های اصلی محیط را بشناسید تا هنگام اجرای پروژه بدانید هر ابزار و تنظیم را کجا پیدا کنید.
آشنایی با قسمت‌های اصلی محیط فیگما
محیط Figma Design از چند ناحیه اصلی تشکیل شده است. فعلاً شناخت چهار قسمت زیر برای شروع پروژه کافی است.
نوار ابزار (Toolbar): محل دسترسی به ابزارهای انتخاب و جابه‌جایی، ساخت Frame، رسم شکل و افزودن متن است. در مراحل بعد، از همین ابزارها برای تبدیل ساختار وایرفریم به عناصر واقعی طراحی استفاده می‌کنیم.
نوار ناوبری و پنل سمت چپ (Navigation Bar و Left Sidebar): نوار ناوبری در لبه چپ محیط، دسترسی به بخش‌هایی مانند فایل و دارایی‌های طراحی (Assets) را فراهم می‌کند. در نمای فایل می‌توانید صفحه‌ها و لایه‌ها را ببینید و ساختار عناصر را مدیریت کنید. برای مثال، بعداً می‌توانیم بخش معرفی دوره، کارت‌های اطلاعات و دکمه ثبت‌نام را به‌صورت لایه‌های جداگانه سازمان‌دهی کنیم.
فضای طراحی (Canvas): بخش مرکزی محیط است که عناصر و فریم‌های پروژه را روی آن قرار می‌دهیم. صفحه وبی که طراحی می‌کنیم، در قالب یک یا چند Frame داخل همین فضای کاری ساخته می‌شود. Canvas را می‌توان مانند میز کاری بزرگی در نظر گرفت که امکان قرارگیری چند طرح و نسخه مختلف کنار یکدیگر را دارد.
پنل سمت راست (Right Sidebar): محل مشاهده و تغییر ویژگی‌های عنصر انتخاب‌شده است. برای نمونه، وقتی یک شکل یا فریم را انتخاب می‌کنید، بسته به نوع آن می‌توانید ویژگی‌هایی مانند ابعاد، موقعیت و تنظیمات ظاهری را بررسی کنید. تنظیمات مربوط به پروتوتایپ نیز از همین بخش در دسترس هستند.
اگر ظاهر فیگمای شما با تصاویر آموزشی قدیمی متفاوت است، لزوماً به معنای حذف ابزارها نیست. رابط کاربری نرم‌افزار در طول زمان تغییر می‌کند. برای پیدا کردن قسمت‌های اصلی می‌توانید از راهنمای رسمی محیط Figma Design استفاده کنید.
آماده‌کردن وایرفریم پروژه برای شروع طراحی
حالا باید مشخص کنیم قرار است چه طرحی را در فایل جدید اجرا کنیم. مبنای کار ما همان صفحه فرضی معرفی دوره HTML است که در مقاله وایرفریم چیست و چگونه طراحی می‌شود؟ ساختار اولیه آن بررسی شده است. اگر هنوز وایرفریم ندارید، می‌توانید از نمونه همان مقاله به‌عنوان ورودی این پروژه استفاده کنید.
در نسخه دسکتاپ این صفحه، بخش‌هایی مانند سربرگ، عنوان و معرفی دوره، سطح آموزش، سرفصل‌ها، شرایط شرکت و دکمه «شروع ثبت‌نام» پیش‌بینی شده‌اند. این عناصر در وایرفریم جایگاه مشخصی دارند، اما هنوز قرار نیست ظاهر نهایی، رنگ‌ها و جزئیات بصری آن‌ها قطعی باشد.
برای ادامه پروژه، نسخه دسکتاپ وایرفریم را کنار محیط فیگما در دسترس نگه دارید. لازم نیست ساختار را دوباره از ابتدا طراحی کنید؛ هدف ما این است که همان طرح اولیه را مبنای اجرای رابط بصری قرار دهیم. نسخه موبایل نیز در مرحله طراحی انعطاف‌پذیر به کار خواهد آمد.
در پایان این مرحله باید یک فایل Figma Design با نام مشخص و یک وایرفریم مبنا داشته باشید. اگر می‌دانید کدام بخش‌های صفحه باید طراحی شوند و محل ابزارها، فضای طراحی و پنل تنظیمات را پیدا کرده‌اید، آماده ورود به مرحله بعد هستید: ساخت ساختار صفحه در فیگما.
تبدیل وایرفریم به ساختار صفحه در فیگما
در مرحله قبل، فایل پروژه را ساختیم و وایرفریم صفحه معرفی دوره HTML را به‌عنوان نقشه اولیه طراحی انتخاب کردیم. حالا می‌خواهیم بخش‌های مشخص‌شده در آن وایرفریم را داخل فیگما پیاده‌سازی کنیم؛ به‌طوری‌که هر قسمت صفحه جایگاه و ساختار مستقلی داشته باشد.
در این مرحله هنوز سراغ انتخاب رنگ، فونت یا طراحی دکمه‌های نهایی نمی‌رویم. ابتدا یک صفحه دسکتاپ می‌سازیم، بخش‌های آن را از بالا به پایین می‌چینیم و با استفاده از Frame و لایه‌ها، ساختاری ایجاد می‌کنیم که در مراحل بعد بتوانیم ظاهر و رفتار آن را توسعه دهیم.
ساخت فریم اصلی صفحه دسکتاپ
در فیگما، Frame محدوده‌ای است که می‌تواند عناصر مختلفی مانند متن، تصویر، شکل و حتی فریم‌های دیگر را در خود نگه دارد. برای پروژه ما، یک فریم اصلی نمایانگر صفحه دسکتاپ خواهد بود و فریم‌های داخلی، قسمت‌های مختلف آن را تشکیل می‌دهند.
برای ساخت فریم اصلی مراحل زیر را انجام دهید:
- فایل «پروژه طراحی صفحه دوره HTML» را باز کنید.
- کلید F را فشار دهید یا ابزار Frame را از نوار ابزار انتخاب کنید.
- از پنل سمت راست، دسته Desktop را باز کنید و یکی از اندازه‌های آماده را انتخاب کنید.
- فریم ایجادشده را انتخاب کنید و برای این تمرین مقدار عرض (W) را روی 1440 پیکسل قرار دهید. این اندازه صرفاً مبنای نمونه دسکتاپ ماست و اندازه اجباری طراحی سایت نیست.
- ارتفاع (H) فریم را در ابتدا حدود 1800 پیکسل در نظر بگیرید. اگر محتوای صفحه به فضای بیشتری نیاز داشت، ارتفاع را افزایش دهید.
- نام فریم را از بخش Layers به Course Landing – Desktop تغییر دهید.
اکنون یک محدوده مشخص برای طراحی داریم. توجه کنید که Frame با Canvas یکسان نیست؛ Canvas فضای کلی فایل است، اما Frame اصلی محدوده صفحه‌ای را مشخص می‌کند که قرار است طراحی شود.
تبدیل قسمت‌های وایرفریم به فریم‌های مستقل
در وایرفریم اولیه، صفحه معرفی دوره از چند بخش با وظایف متفاوت تشکیل شده است. بهتر است این قسمت‌ها را به‌جای قرار دادن تمام عناصر به‌صورت پراکنده، داخل فریم‌های جداگانه سازمان‌دهی کنیم.
برای این کار، ابزار Frame را دوباره با کلید F فعال کنید و با کلیک و کشیدن نشانگر درون فریم اصلی، یک فریم داخلی بسازید. نام آن را 01 – Header بگذارید. همین کار را برای بخش‌های بعدی تکرار کنید.
ساختار پیشنهادی صفحه ما به این صورت است:
| نام فریم | محتوای موردنظر |
|---|---|
| 01 – Header | جایگاه لوگو و مسیرهای ناوبری |
| 02 – Hero | عنوان دوره، معرفی کوتاه، فضای تصویر و دکمه شروع ثبت‌نام |
| 03 – Course Info | اطلاعاتی مانند سطح آموزش و مشخصات دوره |
| 04 – Curriculum | عنوان بخش سرفصل‌ها و جایگاه نمایش مباحث |
| 05 – Requirements | پیش‌نیازها و شرایط شرکت در دوره |
| 06 – Enrollment | بخش پایانی و مسیر اقدام برای ثبت‌نام |
این فریم‌ها باید در پنل Layers زیرمجموعه فریم اصلی باشند. اگر فریمی بیرون از ساختار اصلی ایجاد شد، می‌توانید آن را در پنل Layers به داخل Course Landing – Desktop منتقل کنید.
ترتیب قرارگیری فریم‌ها را مطابق مسیر مطالعه صفحه تنظیم کنید. کاربر ابتدا باید متوجه شود چه دوره‌ای معرفی شده، سپس اطلاعات و سرفصل‌ها را بررسی کند و در نهایت بتواند برای ثبت‌نام تصمیم بگیرد.
این ساختار یک پیشنهاد اجرایی برای پروژه فرضی ماست. اگر وایرفریم مبنای شما جایگاه متفاوتی برای یکی از بخش‌ها دارد، ابتدا همان تصمیم ساختاری را حفظ کنید و تغییر آن را با دلیل انجام دهید.
قراردادن متن‌ها و عناصر موقت در صفحه
پس از ایجاد فریم‌های داخلی، باید محتوای اولیه هر قسمت را مشخص کنیم. فعلاً هدف طراحی ظاهر نهایی نیست؛ فقط می‌خواهیم بدانیم هر عنصر کجا قرار می‌گیرد و چه نقشی دارد.
از بخش 02 – Hero شروع کنید. با فشردن کلید T ابزار Text را فعال کنید و متن «دوره آموزش HTML» را به‌عنوان عنوان اصلی صفحه قرار دهید. زیر آن یک متن کوتاه نمونه بنویسید که موضوع دوره را توضیح دهد.
سپس با کلید R و ابزار Rectangle یک مستطیل برای جایگاه تصویر دوره ایجاد کنید. یک مستطیل کوچک‌تر نیز برای دکمه «شروع ثبت‌نام» در نظر بگیرید و متن دکمه را روی آن قرار دهید. این عناصر در حال حاضر فقط نمایش‌دهنده جایگاه محتوا هستند و هنوز دکمه تعاملی یا تصویر واقعی محسوب نمی‌شوند.
در این سناریو، عنوان و توضیح دوره را در سمت راست بخش Hero و فضای تصویر را در سمت چپ قرار می‌دهیم. دلیل این انتخاب آن است که در ساختار پیشنهادی ما، متن فارسی و معرفی دوره نقطه شروع مطالعه هستند. البته این چیدمان هنوز یک فرض طراحی است و نتیجه آزمون کاربران محسوب نمی‌شود.
به همین ترتیب، در فریم 03 – Course Info جایگاه اطلاعات دوره را مشخص کنید، در 04 – Curriculum چند ردیف ساده برای سرفصل‌ها قرار دهید و در 05 – Requirements فضایی برای توضیح پیش‌نیازها بسازید. در بخش پایانی نیز عنوان کوتاهی برای اقدام به ثبت‌نام و یک جایگاه دکمه در نظر بگیرید.
اگر در این مرحله عناصر اندازه یا فاصله کاملاً یکسانی ندارند، نگران نباشید. تنظیم دقیق تایپوگرافی، رنگ و فاصله‌گذاری در بخش بعد انجام می‌شود و برای مدیریت انعطاف‌پذیر چیدمان نیز از Auto Layout استفاده خواهیم کرد.
مرتب‌کردن لایه‌ها و بررسی ساختار صفحه
یکی از تفاوت‌های مهم طراحی قابل توسعه با یک طرح پراکنده، سازمان‌دهی لایه‌هاست. در فیگما هر متن و شکل لایه مخصوص خود را دارد و می‌توانید آن را در پنل Layers جابه‌جا کنید یا نامش را تغییر دهید.
نام‌های پیش‌فرض مانند Rectangle 1 و Frame 2 در پروژه‌های بزرگ تشخیص عناصر را دشوار می‌کنند. بهتر است از همین ابتدا نام‌هایی انتخاب کنید که نقش هر عنصر را مشخص کنند؛ برای مثال Course Title برای عنوان دوره و Enroll Button Placeholder برای جایگاه دکمه ثبت‌نام.
نکته مهم دیگر، تفاوت Group و Frame است. Group برای کنار هم نگه‌داشتن چند لایه کاربرد دارد، اما Frame علاوه بر سازمان‌دهی عناصر، ابعاد مستقل و قابلیت‌هایی برای کنترل چیدمان، تنظیمات واکنش به تغییر اندازه و پروتوتایپ در اختیار ما قرار می‌دهد. به همین دلیل، بخش‌های اصلی صفحه را با Frame ساخته‌ایم.
در پایان، پنل Layers را باز کنید و مطمئن شوید تمام فریم‌های بخش‌های صفحه، زیرمجموعه Course Landing – Desktop هستند. همچنین بررسی کنید که متن‌ها و شکل‌های هر قسمت داخل فریم مربوط به خود قرار گرفته باشند.
برای بررسی نتیجه، از خودتان بپرسید: اگر قرار باشد جای بخش سرفصل‌ها را با بخش اطلاعات دوره عوض کنم، آیا می‌توانم فریم مربوط به هر قسمت را پیدا کنم و جابه‌جا کنم، بدون اینکه مجبور شوم تک‌تک عناصر پراکنده را انتخاب کنم؟
اگر پاسخ مثبت است و در Canvas نیز عنوان دوره، تصویر موقت، اطلاعات، سرفصل‌ها، پیش‌نیازها و مسیر ثبت‌نام در ترتیب موردنظر دیده می‌شوند، ساختار اولیه صفحه آماده است.
اکنون یک طرح ساختاری قابل ویرایش داریم؛ اما هنوز ظاهر آن نهایی نشده است. در مرحله بعد، همین ساختار را با انتخاب رنگ، تایپوگرافی و فاصله‌گذاری مناسب به یک رابط بصری خواناتر تبدیل می‌کنیم.
طراحی ظاهر صفحه با رنگ، تایپوگرافی و فاصله‌گذاری
تا اینجا ساختار صفحه معرفی دوره HTML را در فیگما ایجاد کرده‌ایم. عنوان دوره، اطلاعات آموزشی، سرفصل‌ها و دکمه ثبت‌نام در جای خود قرار دارند؛ اما صفحه هنوز بیشتر شبیه یک وایرفریم است تا رابطی که برای استفاده کاربران آماده شده باشد.
حالا باید به عناصر صفحه ظاهر مشخصی بدهیم. برای این کار، سه تصمیم اصلی داریم: کدام رنگ‌ها را به کار ببریم، متن‌ها چه اندازه و وزنی داشته باشند و چه فاصله‌ای میان عناصر قرار دهیم. این انتخاب‌ها فقط جنبه زیبایی ندارند؛ باید کمک کنند کاربر عنوان دوره را سریع پیدا کند، اطلاعات مهم را به‌ترتیب بخواند و دکمه شروع ثبت‌نام را تشخیص دهد.
انتخاب رنگ‌های اصلی صفحه در فیگما
برای پروژه فرضی ما، یک ترکیب ساده از آبی، سرمه‌ای، خاکستری و سفید انتخاب می‌کنیم. آبی را برای اقدام اصلی، سرمه‌ای را برای عنوان‌ها و رنگ‌های خنثی را برای متن‌ها و پس‌زمینه در نظر می‌گیریم.
این رنگ‌ها فقط پالت آموزشی پروژه هستند و قرار نیست به‌عنوان رنگ‌های رسمی برند بیت‌آموز معرفی شوند.
| کاربرد | کد رنگ |
|---|---|
| عنوان‌ها و متن‌های اصلی | #172B4D |
| متن‌های توضیحی | #4B5D73 |
| دکمه اصلی ثبت‌نام | #1769AA |
| پس‌زمینه عمومی صفحه | #F4F7FB |
| پس‌زمینه کارت‌ها و متن دکمه | #FFFFFF |
برای اعمال رنگ‌ها، ابتدا فریم اصلی Course Landing – Desktop را انتخاب کنید. در پنل سمت راست، بخش Fill را پیدا کنید، پنجره انتخاب رنگ را باز کنید و مقدار #F4F7FB را وارد کنید.
سپس فریم‌ها یا شکل‌هایی را که قرار است پس‌زمینه سفید داشته باشند انتخاب کنید و Fill آن‌ها را روی #FFFFFF بگذارید. برای تغییر رنگ متن نیز باید خود لایه Text را انتخاب کنید و رنگ Fill همان لایه را تغییر دهید.
در بخش Hero، عنوان دوره را سرمه‌ای و توضیحات کوتاه آن را خاکستری تیره کنید. برای مستطیلی که جای دکمه ثبت‌نام را مشخص کرده بودیم، رنگ آبی #1769AA را در نظر بگیرید.
هنگام انتخاب رنگ، فقط به تفاوت ظاهری آن‌ها توجه نکنید. متن باید با پس‌زمینه کنتراست کافی داشته باشد. برای مثال، نسبت کنتراست محاسبه‌شده متن سفید روی آبی #1769AA حدود 5.77:1 است و از حداقل 4.5:1 معیار WCAG AA برای متن معمولی بیشتر است. البته مناسب‌بودن این ترکیب رنگ به‌تنهایی به معنای دسترس‌پذیری کامل رابط نیست.
برای بررسی ترکیب‌های دیگر می‌توانید از قابلیت Check color contrast در پنجره انتخاب رنگ فیگما استفاده کنید.
تنظیم تایپوگرافی و سلسله‌مراتب متن‌های فارسی
در صفحه معرفی یک دوره آموزشی، همه متن‌ها اهمیت یکسانی ندارند. عنوان دوره باید بیش از توضیحات جلب توجه کند، عنوان سرفصل‌ها باید از متن هر سرفصل متمایز باشد و نوشته روی دکمه ثبت‌نام باید به‌راحتی خوانده شود.
برای شروع، یک فونت فارسی خوانا انتخاب کنید. در این پروژه از Vazirmatn استفاده می‌کنیم. برای انتخاب آن، لایه عنوان دوره را انتخاب کنید، بخش Typography را در پنل سمت راست باز کنید و نام فونت را جست‌وجو کنید. اگر فونت در فهرست شما موجود نبود، آن را از Google Fonts بررسی کنید. برای استفاده از فونت‌های نصب‌شده روی کامپیوتر در نسخه مرورگر فیگما، ممکن است به Font Installer نیاز داشته باشید.
برای اینکه اندازه متن‌ها از روی حدس انتخاب نشود، مقیاس زیر را در نسخه دسکتاپ پروژه در نظر می‌گیریم:
- عنوان اصلی دوره: اندازه 36 پیکسل، وزن Bold و ارتفاع خط 52 پیکسل.
- عنوان بخش‌ها: اندازه 26 پیکسل، وزن Bold و ارتفاع خط 40 پیکسل.
- متن توضیحات و اطلاعات دوره: اندازه 16 پیکسل، وزن Regular و ارتفاع خط 28 پیکسل.
- متن دکمه ثبت‌نام: اندازه 16 پیکسل، وزن Medium و ارتفاع خط 24 پیکسل.
این اندازه‌ها مقادیر پیشنهادی برای تمرین هستند، نه استاندارد ثابتی برای تمام سایت‌ها. پس از اعمال آن‌ها باید طول متن فارسی، شکست سطرها و فضای موجود در فریم‌ها را بررسی کنید.
برای تنظیم عنوان، لایه Course Title را انتخاب کنید و مقادیر مربوط به Font Size، Font Weight و Line Height را در بخش Typography وارد کنید. سپس همین روش را برای توضیحات، عنوان بخش‌ها و نوشته دکمه تکرار کنید.
از آنجا که صفحه ما فارسی است، تراز متن‌ها را روی Right قرار دهید. فیگما از متن راست‌به‌چپ پشتیبانی می‌کند و معمولاً جهت نوشتار را از زبان متن تشخیص می‌دهد. اگر در عبارت‌های ترکیبی فارسی و انگلیسی، مانند «آموزش HTML»، ترتیب کاراکترها درست نمایش داده نشد، تنظیم Text Direction را بررسی کنید.
تفاوت تراز و جهت متن را فراموش نکنید: راست‌چین‌کردن فقط محل قرارگیری متن در کادر را مشخص می‌کند، درحالی‌که جهت نوشتار بر رفتار متن‌های راست‌به‌چپ و ترکیبی اثر می‌گذارد.
بعد از اعمال تنظیمات، عنوان «دوره آموزش HTML» باید نخستین متن برجسته بخش Hero باشد. توضیح کوتاه زیر آن باید در اندازه‌ای کوچک‌تر قرار بگیرد و کاربر بتواند بدون تلاش برای تشخیص متن‌ها، تفاوت عنوان و توضیحات را ببیند.
تنظیم فاصله عناصر و ایجاد نظم بصری
حتی اگر رنگ‌ها و فونت‌ها را درست انتخاب کنیم، چسبیدن عناصر به یکدیگر می‌تواند خواندن صفحه را دشوار کند. فاصله‌گذاری مشخص می‌کند کدام عناصر به یک موضوع تعلق دارند و کجا یک بخش تمام می‌شود و بخش بعدی آغاز می‌شود.
در فریم دسکتاپ 1440 پیکسلی پروژه، عرض محدوده اصلی محتوا را برای این تمرین 1120 پیکسل در نظر می‌گیریم. اگر این محدوده را در مرکز صفحه قرار دهیم، از هر سمت 160 پیکسل فاصله باقی می‌ماند.
در بخش 02 – Hero نیز می‌توانیم فضای محتوا را به دو قسمت تقسیم کنیم: یک محدوده 520 پیکسلی برای عنوان، توضیحات و دکمه در سمت راست و محدوده‌ای به همین عرض برای تصویر در سمت چپ. بین این دو قسمت 80 پیکسل فاصله قرار می‌دهیم.
برای اعمال این چیدمان، عناصر موجود را انتخاب کنید و از فیلدهای موقعیت و اندازه در پنل سمت راست کمک بگیرید. همچنین می‌توانید با فعال‌کردن Layout guide روی فریم اصلی، راهنماهای ستونی ایجاد کنید تا تراز بخش‌های مختلف صفحه دقیق‌تر شود.
برای عناصر داخلی صفحه، فاصله‌های اولیه زیر را به کار ببرید:
- فاصله عنوان اصلی تا توضیح دوره: 16 پیکسل.
- فاصله توضیح دوره تا دکمه ثبت‌نام: 24 پیکسل.
- فاصله بین بخش‌های اصلی صفحه: حدود 80 پیکسل.
- فاصله محتوای کارت‌های اطلاعات از لبه داخلی آن‌ها: 20 پیکسل.
این اعداد برای ایجاد نظم اولیه انتخاب شده‌اند. مهم‌تر از حفظ دقیق یک عدد، ارتباط منطقی بین فاصله‌هاست. برای مثال، عنوان یک کارت باید به توضیح همان کارت نزدیک‌تر باشد تا به عنوان کارت بعدی؛ چون این نزدیکی به کاربر نشان می‌دهد کدام اطلاعات به هم تعلق دارند.
در حال حاضر فاصله‌ها و موقعیت‌ها را به‌صورت دستی تنظیم می‌کنیم. در بخش بعد، با Auto Layout یاد می‌گیریم چگونه همین روابط را طوری تعریف کنیم که هنگام تغییر طول متن یا ابعاد فریم، مدیریت چیدمان ساده‌تر شود.
طراحی دکمه ثبت‌نام و کارت‌های اطلاعات دوره
حالا باید مستطیل‌های موقتی را که در مرحله قبل ساخته بودیم به عناصری با ظاهر مشخص تبدیل کنیم.
ابتدا در بخش Hero، شکل مربوط به Enroll Button Placeholder را انتخاب کنید. برای نمونه، عرض آن را 220 پیکسل و ارتفاعش را 48 پیکسل قرار دهید. رنگ Fill را روی #1769AA و مقدار Corner Radius را روی 10 پیکسل تنظیم کنید.
متن «شروع ثبت‌نام» را با رنگ سفید روی آن قرار دهید و از ابزارهای تراز، متن را در مرکز مستطیل تنظیم کنید. در این مرحله دکمه فقط از نظر ظاهری طراحی می‌شود؛ کلیک‌پذیرکردن آن به بخش پروتوتایپ مربوط است.
سپس به فریم 03 – Course Info بروید. اطلاعاتی مانند «سطح دوره»، «موضوع آموزش» و «پیش‌نیاز» را در کارت‌های جداگانه قرار دهید. برای این کارت‌ها از پس‌زمینه سفید، گوشه‌های کمی گرد و فاصله داخلی یکسان استفاده کنید. برچسب هر اطلاعات را کوچک‌تر از مقدار اصلی نمایش دهید تا تفاوت آن‌ها مشخص باشد.
برای نمونه، در یک کارت می‌توانید برچسب «سطح دوره» را با رنگ خاکستری و مقدار «مقدماتی» را با رنگ سرمه‌ای نشان دهید. این مقادیر صرفاً محتوای فرضی پروژه‌اند و مشخصات یک دوره واقعی بیت‌آموز نیستند.
در طراحی کارت‌ها، تزئینات اضافی را به حداقل برسانید. اگر تفاوت پس‌زمینه سفید کارت با پس‌زمینه روشن صفحه برای جداسازی آن کافی است، نیازی نیست حتماً سایه پررنگ یا کادر ضخیم اضافه کنید.
اکنون به صفحه طراحی‌شده نگاه کنید. در نسخه اولیه، عنوان، متن‌ها و مستطیل‌ها تنها جایگاه عناصر را مشخص می‌کردند. در نسخه جدید، عنوان با اندازه بزرگ‌تر قابل تشخیص است، اطلاعات فرعی با رنگ و اندازه متفاوت نمایش داده می‌شوند و دکمه ثبت‌نام به‌عنوان اقدام اصلی صفحه برجسته شده است.
برای اطمینان از تکمیل این مرحله، بررسی کنید که رنگ‌های تعریف‌شده در بخش‌های مشابه یکسان باشند، متن‌های فارسی جهت و تراز درستی داشته باشند، عنوان‌ها از توضیحات متمایز باشند و محتوای هیچ کارت یا دکمه‌ای از محدوده آن بیرون نزده باشد.
با این تغییرات، صفحه معرفی دوره از یک وایرفریم ساده به یک طرح بصری اولیه و قابل بررسی تبدیل شده است. مرحله بعد، ساختار همین طرح را با Auto Layout انعطاف‌پذیرتر می‌کنیم تا تغییر محتوا و اندازه فریم‌ها به تنظیم دستی تک‌تک عناصر وابسته نباشد.
آموزش Auto Layout و طراحی انعطاف‌پذیر در فیگما
در مرحله قبل، ظاهر صفحه معرفی دوره HTML را با رنگ، تایپوگرافی و فاصله‌گذاری مشخص طراحی کردیم. اما ساختار فعلی هنوز یک محدودیت مهم دارد: اگر عنوان دوره طولانی‌تر شود، متن جدیدی به کارت‌ها اضافه کنیم یا عرض صفحه را کاهش دهیم، ممکن است مجبور شویم جای عناصر را دوباره تنظیم کنیم.
قابلیت Auto Layout در فیگما برای مدیریت همین روابط طراحی شده است. با این قابلیت می‌توانیم جهت قرارگیری عناصر، فاصله میان آن‌ها، فضای داخلی و نحوه تغییر اندازه را مشخص کنیم تا چیدمان هنگام تغییر محتوا یا ابعاد فریم، رفتار قابل پیش‌بینی‌تری داشته باشد.
در این بخش، ساختار موجود پروژه را حفظ می‌کنیم و تنظیمات Auto Layout را به آن اضافه می‌کنیم. سپس بررسی خواهیم کرد که همین صفحه چگونه می‌تواند مبنای طراحی نسخه موبایل باشد.
Auto Layout چیست و چگونه آن را فعال کنیم؟
Auto Layout قابلیتی در فیگماست که چیدمان عناصر داخل یک Frame را بر اساس مجموعه‌ای از قوانین کنترل می‌کند. برای مثال، اگر عنوان و توضیحات دوره داخل فریمی با چیدمان عمودی قرار داشته باشند، می‌توانیم فاصله ثابتی میان آن‌ها تعیین کنیم. در این حالت، با افزایش ارتفاع عنوان، عناصر بعدی متناسب با فضای موردنیاز جابه‌جا می‌شوند.
برای فعال‌کردن Auto Layout در پروژه، ابتدا به سراغ فریم 02 – Hero می‌رویم.
- فایل پروژه را باز کنید و فریم 02 – Hero را در پنل Layers پیدا کنید.
- پیش از تغییر چیدمان، بررسی کنید که عنوان، توضیحات و دکمه ثبت‌نام داخل یک فریم داخلی قرار داشته باشند. اگر چنین فریمی ندارید، این عناصر را انتخاب کنید و با استفاده از گزینه Frame selection آن‌ها را داخل یک فریم قرار دهید.
- نام فریم جدید را Hero Content بگذارید.
- فریم Hero Content را انتخاب کنید و کلیدهای Shift + A را فشار دهید. همچنین می‌توانید گزینه Add auto layout را از پنل سمت راست انتخاب کنید.
- در تنظیمات Auto Layout، حالت Vertical را انتخاب کنید تا عناصر از بالا به پایین مرتب شوند.
- ترتیب عناصر را در پنل Layers بررسی کنید؛ عنوان باید پیش از توضیحات و دکمه ثبت‌نام قرار بگیرد.
اکنون چیدمان فریم Hero Content به قوانین Auto Layout وابسته است. اگر ترتیب یا موقعیت عناصر پس از فعال‌سازی تغییر کرد، آن‌ها را در فریم مرتب کنید؛ نیازی نیست به چیدمان دستی قبلی برگردید.
فیگما علاوه بر Vertical، حالت Horizontal را برای قرارگیری افقی عناصر و Grid را برای چیدمان شبکه‌ای در اختیار می‌گذارد. در پروژه ما، ترکیب چیدمان‌های عمودی و افقی برای ساخت صفحه کافی است.
تنظیم Padding و Gap برای فاصله‌گذاری منظم
در Auto Layout دو تنظیم اصلی برای مدیریت فاصله‌ها وجود دارد: Gap فاصله میان عناصر داخل یک فریم را تعیین می‌کند و Padding فضای خالی بین مرز فریم و محتوای داخلی آن است.
برای درک تفاوت آن‌ها، فریم Hero Content را انتخاب کنید. در این فریم عنوان دوره، توضیحات و دکمه ثبت‌نام زیر یکدیگر قرار گرفته‌اند.
اگر مقدار Gap را روی 16 پیکسل بگذاریم، فاصله بین همه عناصر مجاور یکسان می‌شود. اما در طراحی مرحله قبل، فاصله عنوان تا توضیحات 16 پیکسل و فاصله توضیحات تا دکمه 24 پیکسل بود.
برای حفظ این تفاوت، بهتر است عنوان و توضیحات را داخل یک Auto Layout عمودی با Gap برابر 16 پیکسل قرار دهیم. سپس فریم حاصل را همراه با دکمه داخل Hero Content بگذاریم و Gap فریم بیرونی را روی 24 پیکسل تنظیم کنیم.
با این ساختار، فاصله دو متن مستقل از فاصله میان محتوای معرفی و دکمه کنترل می‌شود.
حالا در بخش اطلاعات دوره، یکی از کارت‌هایی را که در مرحله قبل طراحی کردیم انتخاب کنید. متن برچسب و مقدار آن را داخل یک فریم Auto Layout عمودی قرار دهید و فاصله میان آن‌ها را 8 پیکسل تنظیم کنید.
برای فریم کارت، مقدار Padding را از چهار طرف روی 20 پیکسل بگذارید. در نتیجه، متن‌ها به لبه کارت نمی‌چسبند و اگر طول اطلاعات تغییر کند، فضای داخلی مشخصی همچنان حفظ خواهد شد.
این روش را برای کارت‌های دیگر هم تکرار کنید. هدف این نیست که همه فاصله‌های صفحه مقدار یکسانی داشته باشند؛ بلکه باید عناصر مرتبط فاصله‌های منظم و قابل کنترل داشته باشند.
تفاوت Hug Contents، Fill Container و Fixed Size
پس از مشخص‌کردن جهت و فاصله‌ها، نوبت به کنترل اندازه عناصر می‌رسد. سه تنظیم اصلی Auto Layout در این مرحله اهمیت بیشتری دارند:
| تنظیم | رفتار | کاربرد در پروژه |
|---|---|---|
| Hug contents | اندازه فریم با توجه به محتوای داخلی تغییر می‌کند. | ارتفاع بخش توضیحات و اندازه دکمه |
| Fill container | عنصر فضای در دسترس فریم والد را پر می‌کند. | عرض کارت‌ها و بخش‌های داخلی صفحه |
| Fixed width/height | اندازه انتخاب‌شده ثابت می‌ماند. | عرض اولیه فریم دسکتاپ یا یک عنصر با اندازه مشخص |
برای مشاهده تفاوت این تنظیمات، دکمه «شروع ثبت‌نام» را که در مرحله قبل طراحی کردیم در نظر بگیرید.
دکمه فعلی از یک مستطیل آبی و متن سفید تشکیل شده است. حالا می‌خواهیم آن را به یک فریم Auto Layout تبدیل کنیم تا اندازه و فاصله داخلی آن بر اساس متن کنترل شود.
ابتدا لایه متن دکمه را انتخاب کنید و با Shift + A یک فریم Auto Layout برای آن بسازید. نام فریم را Enroll Button بگذارید و رنگ آبی، گوشه‌های گرد و سایر ویژگی‌های ظاهری دکمه قبلی را به این فریم انتقال دهید. مستطیل موقت قبلی را پس از اطمینان از حفظ ظاهر، حذف کنید تا دو پس‌زمینه روی هم قرار نگیرند.
برای فریم جدید، این تنظیمات را اعمال کنید:
- جهت Auto Layout: افقی (Horizontal)
- Padding افقی: 24 پیکسل از هر طرف
- Padding عمودی: 12 پیکسل از بالا و پایین
- Alignment: مرکز
- Width و Height resizing: حالت Hug contents
در این حالت، فریم دکمه با توجه به اندازه متن و فاصله‌های داخلی آن شکل می‌گیرد. برای حفظ حداقل عرض 220 پیکسلی دکمه در طرح قبلی، می‌توانید Min width آن را روی 220 پیکسل قرار دهید.
حالا به‌صورت آزمایشی، متن دکمه را از «شروع ثبت‌نام» به «مشاهده شرایط و شروع ثبت‌نام» تغییر دهید. با تنظیم مناسب Hug contents، عرض دکمه باید بتواند همراه متن افزایش پیدا کند، مگر اینکه محدودیت اندازه دیگری برای آن تعریف کرده باشید.
برای متن‌های توضیحی نیز رفتار متفاوتی نیاز داریم. در یک بخش با عرض محدود، بهتر است متن بتواند به خط بعد برود و ارتفاع آن با تعداد خطوط افزایش پیدا کند. برای این کار، عرض لایه متن را متناسب با فریم والد تنظیم کنید و از رفتار Auto height برای ارتفاع متن استفاده کنید.
برای بررسی این رفتار، عنوان «دوره آموزش HTML» را موقتاً به «دوره آموزش HTML از مقدماتی تا ساخت اولین صفحه وب» تغییر دهید. اگر عرض متن محدود باشد، عنوان ممکن است در دو خط نمایش داده شود؛ اما فریم عمودی باید فضای بیشتری برای آن در نظر بگیرد و عناصر بعدی را پایین‌تر ببرد.
اگر متن از محدوده بیرون زد یا با دکمه هم‌پوشانی پیدا کرد، عرض لایه متن، تنظیم ارتفاع و ساختار فریم والد را بررسی کنید. Auto Layout به‌تنهایی تمام مشکلات یک چیدمان نامناسب را برطرف نمی‌کند؛ رفتار هر عنصر باید درست تعریف شده باشد.
تنظیم Auto Layout برای ساختار اصلی صفحه
تا اینجا Auto Layout را روی چند عنصر داخلی به کار بردیم. اکنون باید رابطه بخش‌های اصلی صفحه را هم تنظیم کنیم تا افزایش ارتفاع یک بخش، باعث هم‌پوشانی آن با بخش بعدی نشود.
فریم اصلی Course Landing – Desktop را انتخاب کنید و Auto Layout را فعال کنید. حالت Vertical را برای آن در نظر بگیرید تا شش بخش اصلی صفحه از بالا به پایین چیده شوند.
با توجه به اندازه‌های مرحله قبل، تنظیمات اولیه زیر برای پروژه ما مناسب است:
- Width فریم اصلی: 1440 پیکسل، به‌صورت Fixed
- Padding افقی: 160 پیکسل از هر طرف
- Gap میان بخش‌های اصلی: 80 پیکسل
- Height resizing فریم اصلی: Hug contents
- عرض فریم‌های بخش‌های داخلی: Fill container
با این انتخاب، عرض فضای محتوای داخلی برابر 1120 پیکسل باقی می‌ماند و ارتفاع صفحه می‌تواند با افزایش محتوای بخش‌ها تغییر کند.
در فریم 02 – Hero، برای حفظ چیدمان دسکتاپ، از حالت Horizontal استفاده کنید. فریم محتوای متنی را در سمت راست و جایگاه تصویر را در سمت چپ قرار دهید. مطابق اندازه‌های قبلی، هر کدام می‌توانند در این مرحله عرض 520 پیکسل داشته باشند و فاصله میان آن‌ها 80 پیکسل باشد.
نکته مهم این است که جریان افقی Auto Layout به‌صورت پیش‌فرض عناصر را از چپ به راست می‌چیند. بنابراین برای رسیدن به چیدمان فارسی پروژه، ترتیب لایه‌های تصویر و متن را بررسی و در صورت نیاز جابه‌جا کنید. راست‌چین‌بودن متن به‌تنهایی ترتیب قرارگیری این دو فریم را مشخص نمی‌کند.
حالا بخش 03 – Course Info را بررسی کنید. کارت‌های اطلاعات را در یک Auto Layout افقی قرار دهید و عرض آن‌ها را متناسب با فضای موجود تنظیم کنید. برای محتوای داخلی هر کارت نیز ارتفاع انعطاف‌پذیر در نظر بگیرید تا طولانی‌شدن متن، باعث بریده‌شدن اطلاعات نشود.
با این کار، ساختار دسکتاپ آماده است تا در مرحله بعد برای صفحه‌ای باریک‌تر بازآرایی شود.
طراحی نسخه موبایل با کمک Auto Layout
حالا می‌خواهیم از صفحه دسکتاپ یک نسخه موبایل بسازیم. نکته مهم این است که Auto Layout به معنای تبدیل خودکار و کامل یک طرح دسکتاپ به نسخه موبایل نیست. این قابلیت به عناصر کمک می‌کند هنگام تغییر اندازه رفتار منظم‌تری داشته باشند، اما تصمیم‌هایی مانند تبدیل دو ستون به یک ستون همچنان به طراحی ما وابسته‌اند.
برای این تمرین، نسخه موبایل را با عرض 390 پیکسل در نظر می‌گیریم.
- فریم Course Landing – Desktop را انتخاب کنید و با دستور Duplicate یک نسخه از آن بسازید.
- نام نسخه جدید را Course Landing – Mobile بگذارید.
- عرض فریم موبایل را روی 390 پیکسل تنظیم کنید. ارتفاع آن را متناسب با محتوا نگه دارید.
- Padding افقی فریم اصلی را از 160 به 20 پیکسل تغییر دهید تا برای محتوا 350 پیکسل فضای افقی باقی بماند.
- فاصله میان بخش‌های اصلی صفحه را برای نمونه از 80 به 48 پیکسل کاهش دهید.
- در فریم 02 – Hero، جهت Auto Layout را از Horizontal به Vertical تغییر دهید.
- ترتیب عناصر Hero را اصلاح کنید تا ابتدا عنوان و توضیحات دوره و سپس تصویر نمایش داده شوند. عرض هر دو فریم داخلی را روی Fill container قرار دهید.
- در بخش اطلاعات دوره، اگر کارت‌ها کنار هم قرار گرفته‌اند و در عرض موبایل جا نمی‌شوند، چیدمان والد آن‌ها را به Vertical تغییر دهید تا کارت‌ها زیر یکدیگر قرار بگیرند.
اکنون بخش Hero که در دسکتاپ دو ستون 520 پیکسلی داشت، در نسخه موبایل به ساختاری تک‌ستونی تبدیل می‌شود. متن و تصویر دیگر مجبور نیستند در یک ردیف باریک کنار یکدیگر قرار بگیرند.
برای جایگاه تصویر، می‌توانید عرض را روی Fill container و ارتفاع نمونه موبایل را روی 210 پیکسل تنظیم کنید. اگر بعداً تصویر واقعی اضافه کردید، باید نسبت تصویر و نحوه نمایش آن را نیز بررسی کنید.
در مورد دکمه ثبت‌نام، دو انتخاب داریم: می‌توانیم عرض آن را بر اساس متن نگه داریم یا در نسخه موبایل روی Fill container قرار دهیم تا عرض بیشتری از محدوده محتوا را اشغال کند. در این پروژه، حالت دوم را برای نسخه موبایل انتخاب می‌کنیم تا دکمه در فضای 350 پیکسلی محتوا به‌وضوح دیده شود.
پس از اعمال این تغییرات، متن‌های Hero را بررسی کنید. عنوان 36 پیکسلی دسکتاپ ممکن است برای عرض موبایل فضای زیادی اشغال کند. برای نمونه، اندازه عنوان را در نسخه موبایل روی 28 پیکسل با ارتفاع خط 42 پیکسل قرار دهید و مطمئن شوید عبارت فارسی بدون خروج از کادر نمایش داده می‌شود.
این تغییرات مخصوص نسخه موبایل هستند و نباید باعث شوند طرح دسکتاپ نیز ناخواسته تغییر کند.
بررسی نتیجه Auto Layout در دو نسخه صفحه
در پایان این مرحله، باید دو فریم مستقل در Canvas داشته باشید: یک طرح دسکتاپ با عرض 1440 پیکسل و یک طرح موبایل با عرض 390 پیکسل.
برای بررسی عملکرد Auto Layout، دو تغییر ساده روی نسخه‌های طراحی‌شده انجام دهید.
ابتدا در بخش Hero، عنوان دوره را طولانی‌تر کنید. انتظار داریم در صورت درست‌بودن تنظیمات عرض متن، ارتفاع آن و Auto Layout والد، فضا برای خطوط جدید فراهم شود و دکمه زیر توضیحات باقی بماند؛ نه اینکه عناصر روی یکدیگر بیفتند.
سپس به یکی از کارت‌های اطلاعات دوره، یک خط توضیح اضافه کنید. کارت باید بتواند ارتفاع بیشتری بگیرد و بخش‌های بعدی صفحه نیز با آن هم‌پوشانی پیدا نکنند.
مقایسه مورد انتظار از این مرحله چنین است:
| پیش از Auto Layout | پس از تنظیم صحیح Auto Layout |
|---|---|
| جابه‌جایی دستی عناصر پس از تغییر محتوا | جابه‌جایی عناصر بر اساس فاصله‌ها و ساختار والد |
| ارتفاع ثابت برخی بخش‌ها و احتمال بیرون‌زدگی متن | امکان افزایش ارتفاع فریم متناسب با محتوا |
| چیدمان دو ستونی نامناسب در عرض موبایل | ساختار تک‌ستونی متناسب با فضای محدود |
اگر پس از تغییر متن، عناصر به‌درستی جابه‌جا شدند و در نسخه موبایل نیز عنوان، تصویر، اطلاعات دوره و دکمه ثبت‌نام بدون هم‌پوشانی یا خروج از فریم نمایش داده شدند، هدف این مرحله محقق شده است.
این خروجی هنوز یک طرح در محیط فیگماست، نه یک وب‌سایت واکنش‌گرای پیاده‌سازی‌شده. رفتار واقعی صفحه در مرورگر باید هنگام تبدیل طراحی به کد جداگانه بررسی شود.
حالا که اجزای صفحه ساختار منظم‌تر و انعطاف‌پذیرتری دارند، می‌توانیم به سراغ عناصر تکرارشونده برویم. در بخش بعد یاد می‌گیریم چگونه دکمه‌ها و کارت‌های پروژه را به کامپوننت‌های قابل استفاده مجدد تبدیل کنیم و برای آن‌ها حالت‌های مختلف طراحی کنیم.
ساخت کامپوننت و حالت‌های تعاملی در فیگما
در مراحل قبل، صفحه معرفی دوره HTML را طراحی کردیم و با Auto Layout، چیدمان عناصر را منظم‌تر ساختیم. حالا در نسخه‌های دسکتاپ و موبایل، عناصری مانند دکمه ثبت‌نام و کارت‌های اطلاعات دوره داریم که ظاهر و ساختار مشابهی دارند.
اگر هر بار این عناصر را جداگانه طراحی کنیم، تغییر دادن آن‌ها دشوار می‌شود. برای مثال، ممکن است رنگ دکمه ثبت‌نام را در نسخه دسکتاپ تغییر دهیم، اما همان دکمه در نسخه موبایل با رنگ قبلی باقی بماند.
کامپوننت (Component) در فیگما این مشکل را با ایجاد یک عنصر اصلی و نسخه‌های قابل استفاده مجدد حل می‌کند. در این بخش یاد می‌گیریم دکمه و کارت‌های پروژه را به کامپوننت تبدیل کنیم، ظاهر نسخه‌های مختلف را مدیریت کنیم و برای دکمه ثبت‌نام حالت‌هایی مانند عادی، قرارگیری نشانگر و فشرده‌شدن بسازیم.
کامپوننت چیست و چه تفاوتی با کپی معمولی دارد؟
وقتی یک عنصر را در فیگما کپی می‌کنید، نسخه جدید به‌صورت مستقل قابل ویرایش است. اگر بعداً رنگ یا شکل عنصر اولیه را تغییر دهید، کپی معمولی الزاماً همراه آن تغییر نمی‌کند.
اما کامپوننت از دو بخش اصلی تشکیل شده است:
- Main Component: عنصر اصلی که ساختار و ویژگی‌های پایه را تعریف می‌کند.
- Instance: نمونه‌ای از کامپوننت اصلی که می‌توانیم در قسمت‌های مختلف طراحی استفاده کنیم.
برای مثال، می‌توانیم یک کامپوننت اصلی برای دکمه آبی «شروع ثبت‌نام» داشته باشیم و از آن در نسخه دسکتاپ، نسخه موبایل و بخش پایانی صفحه استفاده کنیم.
اگر رنگ پس‌زمینه کامپوننت اصلی را تغییر دهیم، این تغییر معمولاً در Instanceهای متصل به آن نیز اعمال می‌شود؛ البته ویژگی‌هایی که به‌صورت مستقل در یک نمونه تغییر داده شده‌اند، ممکن است مقدار اختصاصی خود را حفظ کنند.
بنابراین کامپوننت صرفاً راهی برای کپی‌کردن سریع نیست؛ ابزاری برای حفظ هماهنگی و مدیریت تغییرات در طراحی است.
تبدیل دکمه ثبت‌نام به کامپوننت
در مرحله قبل، دکمه Enroll Button را با Auto Layout ساختیم. این دکمه شامل متن سفید، پس‌زمینه آبی و فاصله داخلی مشخص است. اکنون می‌خواهیم از همان طراحی به‌عنوان مبنای کامپوننت استفاده کنیم.
برای اینکه ساختار صفحه فعلی هنگام ساخت کامپوننت تغییر نکند، ابتدا یک نسخه از دکمه را در فضای خالی Canvas کپی می‌کنیم.
مراحل زیر را انجام دهید:
- در فریم Course Landing – Desktop، دکمه Enroll Button را پیدا کنید.
- فریم دکمه را انتخاب و یک نسخه از آن کپی کنید. نسخه جدید را بیرون از فریم اصلی صفحه و در فضای خالی Canvas قرار دهید.
- نسخه کپی‌شده را انتخاب کنید و از پنل سمت راست روی گزینه Create component بزنید. در ویندوز می‌توانید از Ctrl + Alt + K و در مک از Option + Command + K استفاده کنید.
- نام کامپوننت را Button/Primary بگذارید.
- بررسی کنید که ظاهر دکمه حفظ شده باشد و متن «شروع ثبت‌نام» همچنان در مرکز آن قرار داشته باشد.
پس از تبدیل، فیگما کامپوننت اصلی را با نشانه‌های بنفش از عناصر معمولی متمایز می‌کند.
حالا از بخش Assets در نوار کناری، کامپوننت Button/Primary را پیدا کنید و یک Instance از آن داخل فریم Hero قرار دهید. دکمه معمولی قبلی را با این نمونه جایگزین کنید. همین کار را در نسخه موبایل و بخش پایانی ثبت‌نام انجام دهید تا هر سه دکمه به یک کامپوننت اصلی متصل باشند.
موقعیت و رفتار تغییر اندازه نمونه‌های جدید را مطابق Auto Layout هر بخش تنظیم کنید. برای نمونه، دکمه نسخه موبایل می‌تواند عرض Fill container داشته باشد، درحالی‌که دکمه دسکتاپ عرض خود را بر اساس محتوا و حداقل عرض تعیین‌شده مدیریت کند.
برای بررسی ارتباط کامپوننت و نمونه‌ها، می‌توانید رنگ پس‌زمینه کامپوننت اصلی را موقتاً تغییر دهید و ببینید آیا نمونه‌های بدون تغییر اختصاصی نیز به‌روزرسانی می‌شوند. سپس رنگ اصلی #1769AA را برگردانید.
ساخت حالت‌های مختلف دکمه با Variants
دکمه‌ها در یک رابط کاربری همیشه ظاهر ثابتی ندارند. ممکن است وقتی نشانگر ماوس روی دکمه قرار می‌گیرد، رنگ آن تغییر کند یا هنگام فشردن، بازخورد بصری متفاوتی نمایش داده شود.
در فیگما می‌توانیم این حالت‌ها را با Variant مدیریت کنیم. Variant نسخه‌ای از یک کامپوننت است که برخی ویژگی‌های آن با نسخه‌های دیگر تفاوت دارد. مجموعه این نسخه‌ها در یک Component Set قرار می‌گیرد.
برای دکمه ثبت‌نام پروژه، چهار حالت طراحی می‌کنیم:
| حالت | کاربرد و ظاهر پیشنهادی |
| Default | حالت عادی با پس‌زمینه #1769AA |
| Hover | قرارگیری نشانگر ماوس روی دکمه، با رنگ #12598F |
| Pressed | حالت فشرده‌شدن دکمه، با رنگ #0D466F |
| Disabled | نمایش دکمه غیرفعال با پس‌زمینه #D7DFE8 و متن تیره |
برای ساخت این حالت‌ها، کامپوننت اصلی Button/Primary را در Canvas انتخاب کنید. در پنل سمت راست روی Add variant بزنید. فیگما کامپوننت‌ها را داخل یک Component Set قرار می‌دهد و می‌توانید با افزودن Variantهای دیگر، تعداد حالت‌ها را به چهار برسانید.
اکنون Component Set را انتخاب کنید و در بخش Properties، نام ویژگی مربوط به Variantها را به State تغییر دهید. مقدار این ویژگی را برای هر نسخه به‌ترتیب Default، Hover، Pressed و Disabled قرار دهید.
برای هر Variant، رنگ پس‌زمینه را مطابق جدول تغییر دهید. بهتر است اندازه، ساختار Auto Layout و جایگاه متن در تمام حالت‌ها یکسان بماند تا تغییر وضعیت دکمه باعث جابه‌جایی ناخواسته محتوا نشود.
در حالت Disabled نیز باید ظاهر دکمه نشان دهد که فعلاً امکان استفاده از آن وجود ندارد. بااین‌حال، خاکستری‌کردن یک دکمه در فیگما به‌تنهایی آن را در یک وب‌سایت واقعی غیرفعال نمی‌کند. رفتار واقعی، امکان دریافت فوکوس و دسترسی‌پذیری دکمه باید در مرحله پیاده‌سازی جداگانه تعریف شوند.
حالا اگر یکی از Instanceهای دکمه را در صفحه انتخاب کنید، می‌توانید از بخش Properties مقدار State را تغییر دهید و حالت موردنظر را نمایش دهید.
در این مرحله، چهار ظاهر متفاوت برای یک کامپوننت ساخته‌ایم؛ اما هنوز مشخص نکرده‌ایم که تغییر حالت‌ها هنگام تعامل کاربر چگونه اتفاق بیفتد.
ایجاد رفتار تعاملی برای حالت‌های دکمه
برای اینکه تغییر حالت دکمه فقط دستی نباشد، از قابلیت Interactive Components استفاده می‌کنیم. این قابلیت اجازه می‌دهد بین Variantهای یک Component Set ارتباط تعاملی تعریف کنیم.
برای پروژه ما، هدف این است که با قرارگرفتن نشانگر روی دکمه، حالت Hover نمایش داده شود و هنگام فشردن آن، ظاهر Pressed را ببینیم.
ابتدا کامپوننت اصلی را در Canvas پیدا کنید و وارد تب Prototype در پنل سمت راست شوید.
برای تعریف رفتار Hover، مراحل زیر را انجام دهید:
- Variant با مقدار State=Default را انتخاب کنید.
- دستگیره اتصال پروتوتایپ را به Variant با مقدار State=Hover بکشید.
- در تنظیمات Interaction، گزینه While hovering را به‌عنوان Trigger انتخاب کنید.
- مقدار Action را روی Change to قرار دهید و مطمئن شوید مقصد همان Variant مربوط به Hover است.
با این تنظیم، هنگام نمایش نمونه در حالت پیش‌نمایش پروتوتایپ، قرارگیری نشانگر روی دکمه می‌تواند ظاهر آن را به حالت Hover تغییر دهد. با خارج‌شدن نشانگر نیز رفتار While hovering به حالت اولیه بازمی‌گردد.
برای حالت Pressed، از Variant مربوط به Hover یک اتصال به Variant مربوط به Pressed ایجاد کنید. در تنظیمات این اتصال، Trigger را روی While pressing و Action را روی Change to قرار دهید.
در این حالت، نگه‌داشتن دکمه ماوس می‌تواند ظاهر فشرده‌شده را نمایش دهد و با رهاکردن آن، تعامل موقت پایان می‌یابد.
توجه کنید که Hover یک وضعیت وابسته به نشانگر است و نباید انتظار داشته باشیم روی صفحه لمسی موبایل نیز دقیقاً مانند دسکتاپ عمل کند. برای بررسی بازخورد فشردن در نمونه موبایل، می‌توانیم در صورت نیاز اتصال While pressing مستقلی از حالت Default به Pressed تعریف کنیم.
فعلاً قرار نیست دکمه با کلیک، کاربر را به صفحه ثبت‌نام منتقل کند. این ارتباط را در بخش بعد، هنگام ساخت مسیر کامل پروتوتایپ تنظیم می‌کنیم.
ساخت کامپوننت برای کارت اطلاعات دوره
کامپوننت‌ها فقط مخصوص دکمه‌ها نیستند. در صفحه معرفی دوره HTML، کارت‌های اطلاعات نیز ساختار تکرارشونده دارند. هر کارت از یک برچسب و یک مقدار تشکیل شده است؛ برای مثال «سطح دوره» و «مقدماتی».
برای این بخش نیازی نیست چند Variant بسازیم؛ چون تفاوت اصلی کارت‌ها در محتوای متنی آن‌هاست، نه وضعیت تعاملی.
ابتدا یکی از کارت‌های فریم 03 – Course Info را انتخاب کنید. کارت باید همان ساختار Auto Layout و Padding برابر 20 پیکسل را که در مراحل قبل تعریف کردیم، داشته باشد.
مانند دکمه، یک نسخه از آن را در فضای خالی Canvas کپی و با گزینه Create component به کامپوننت تبدیل کنید. نام کامپوننت اصلی را Card/CourseInfo بگذارید.
اکنون می‌خواهیم متن‌های داخل این کامپوننت قابل تغییر باشند. برای این کار می‌توانیم از Text Property استفاده کنیم.
در کامپوننت اصلی، لایه متن برچسب را انتخاب کنید. از بخش Text در پنل سمت راست، منوی Apply variable/property را باز کنید و یک ویژگی متنی با نام Label بسازید. همین کار را برای لایه مقدار انجام دهید و نام ویژگی دوم را Value بگذارید.
سپس از کامپوننت، چند Instance داخل بخش اطلاعات دوره قرار دهید و مقدار ویژگی‌های آن‌ها را تغییر دهید:
| Instance | Label | Value |
|---|---|---|
| کارت اول | سطح دوره | مقدماتی |
| کارت دوم | موضوع آموزش | طراحی صفحات وب با HTML |
| کارت سوم | پیش‌نیاز | آشنایی اولیه با کامپیوتر |
این اطلاعات نمونه و مربوط به دوره فرضی پروژه هستند.
اکنون هر کارت محتوای مخصوص خودش را دارد، اما ساختار ظاهری همه آن‌ها از یک کامپوننت اصلی پیروی می‌کند. اگر بخواهیم فاصله داخلی یا گوشه‌های کارت‌ها را تغییر دهیم، می‌توانیم به‌جای اصلاح تک‌تک کارت‌ها، ویژگی مشترک را در کامپوننت اصلی ویرایش کنیم.
تفاوت مهم این است که Variant Property برای انتخاب نسخه‌های متفاوت یک کامپوننت استفاده می‌شود، اما Text Property امکان تغییر محتوای متنی آن را فراهم می‌کند. بنابراین لازم نیست برای هر مقدار متنی جدید، Variant جداگانه بسازیم.
بررسی کامپوننت‌ها و آماده‌شدن برای پروتوتایپ
در پایان این مرحله، باید یک کامپوننت دکمه با چهار Variant و یک کامپوننت کارت اطلاعات دوره داشته باشیم. Instanceهای این کامپوننت‌ها نیز باید در بخش‌های مرتبط صفحه دسکتاپ و موبایل قرار گرفته باشند.
برای بررسی نتیجه، سه کار انجام دهید:
- هماهنگی ظاهری: رنگ کامپوننت اصلی دکمه را موقتاً تغییر دهید و بررسی کنید که نمونه‌های متصل و بدون تغییر اختصاصی، ظاهر تازه را دریافت می‌کنند.
- استقلال محتوا: متن مقدار یکی از کارت‌های اطلاعات را تغییر دهید و بررسی کنید که متن کارت‌های دیگر دست‌نخورده باقی می‌ماند.
- رفتار تعاملی: یک Instance از دکمه را در فریمی مناسب قرار دهید و با قابلیت Preview در بخش Prototype، تغییر حالت آن هنگام قرارگیری نشانگر و فشردن را بررسی کنید.
اگر تغییر حالت دکمه در پیش‌نمایش رخ نداد، ابتدا مطمئن شوید که اتصال‌ها بین Variantهای همان Component Set ایجاد شده‌اند و Action آن‌ها روی Change to قرار دارد.
اگر تغییرات کامپوننت اصلی در یک Instance نمایش داده نشد، بررسی کنید که آن نمونه از کامپوننت جدا نشده باشد یا ویژگی موردنظر به‌صورت اختصاصی در همان نمونه تغییر نکرده باشد.
در پایان، باید بتوانید توضیح دهید کدام قسمت از یک عنصر به‌صورت مشترک مدیریت می‌شود و کدام ویژگی را می‌توان برای هر نمونه جداگانه تغییر داد.
با این کار، دکمه‌ها و کارت‌های صفحه فقط عناصر بصری مستقل نیستند؛ به مجموعه‌ای از اجزای قابل استفاده مجدد تبدیل شده‌اند. همچنین رفتار اولیه حالت‌های دکمه را برای پیش‌نمایش آماده کرده‌ایم.
مرحله بعد، اتصال فریم‌های معرفی دوره، ثبت‌نام فرضی و تأیید نهایی است تا کاربر بتواند با کلیک روی دکمه‌ها، یک مسیر مشخص را در پروتوتایپ طی کند.
ساخت پروتوتایپ کلیک‌پذیر در فیگما
تا این مرحله، صفحه معرفی دوره HTML را طراحی کرده‌ایم، چیدمان آن را با Auto Layout منظم کرده‌ایم و برای دکمه‌ها و کارت‌های اطلاعات، کامپوننت ساخته‌ایم. حالا می‌خواهیم مشخص کنیم وقتی کاربر روی دکمه «شروع ثبت‌نام» کلیک می‌کند، چه اتفاقی بیفتد.
برای این کار از قابلیت Prototyping در فیگما استفاده می‌کنیم. پروتوتایپ به ما اجازه می‌دهد فریم‌های مختلف طراحی را به هم متصل کنیم و مسیر حرکت کاربر را پیش از پیاده‌سازی واقعی سایت نمایش دهیم.
در پروژه ما، کاربر باید از صفحه معرفی دوره وارد یک صفحه ثبت‌نام نمایشی شود و سپس به صفحه پایانی برسد. این مسیر فقط برای نمایش و بررسی طراحی ساخته می‌شود؛ هیچ اطلاعاتی در سرور ذخیره نمی‌شود و ثبت‌نام واقعی انجام نمی‌گیرد.
آماده‌سازی فریم‌های موردنیاز پروتوتایپ
برای ساخت یک مسیر کلیک‌پذیر، ابتدا باید صفحه‌هایی را که قرار است کاربر میان آن‌ها جابه‌جا شود آماده کنیم.
فریم Course Landing – Desktop را از مراحل قبل داریم. اکنون دو فریم دیگر به همان فایل اضافه می‌کنیم:
| نام فریم | نقش در مسیر کاربر |
|---|---|
| Course Landing – Desktop | معرفی دوره و شروع مسیر ثبت‌نام |
| Enrollment – Desktop | نمایش فرم نمونه ثبت‌نام |
| Enrollment Confirmation – Desktop | نمایش پایان مسیر فرضی |
برای ساخت فریم دوم، ابزار Frame را با کلید F فعال کنید و یک فریم جدید در فضای خالی Canvas بسازید. عرض آن را برای هماهنگی با طرح قبلی روی 1440 پیکسل قرار دهید و نامش را Enrollment – Desktop بگذارید.
در این فریم، یک عنوان با متن «ثبت‌نام در دوره HTML» قرار دهید. زیر آن، توضیح کوتاهی درباره مرحله ثبت‌نام بنویسید. سپس دو کادر ورودی نمونه با برچسب‌های «نام و نام خانوادگی» و «ایمیل» طراحی کنید.
برای کادرها می‌توانید از مستطیل‌هایی با پس‌زمینه سفید، حاشیه خاکستری و گوشه‌های گرد استفاده کنید. هر برچسب را بالای کادر مربوط به خودش قرار دهید تا مشخص باشد کاربر قرار است چه اطلاعاتی وارد کند.
در انتهای فرم، یک Instance از کامپوننت دکمه اصلی قرار دهید و متن آن را به «مشاهده نتیجه» تغییر دهید. بهتر است عبارت کوتاه «این فرم فقط برای نمایش مسیر طراحی است» نیز نزدیک دکمه دیده شود.
در این تمرین، فیلدها صرفاً ظاهر یک فرم را نشان می‌دهند و امکان تایپ یا اعتبارسنجی واقعی ندارند. بنابراین از کاربر نمی‌خواهیم اطلاعات شخصی وارد کند.
حالا فریم سوم را با نام Enrollment Confirmation – Desktop بسازید. داخل آن، عنوان «پایان مسیر نمونه ثبت‌نام» و متن «به انتهای این پروتوتایپ رسیدید؛ ثبت‌نام واقعی انجام نشده است» را قرار دهید.
در پایین صفحه نیز دکمه‌ای با عنوان «بازگشت به معرفی دوره» اضافه کنید.
هر سه فریم باید مستقیماً روی Canvas قرار داشته باشند و هیچ‌کدام داخل فریم دیگری نباشند. این موضوع اهمیت دارد، زیرا در اتصال معمول بین صفحه‌های پروتوتایپ، مقصد باید یک فریم مستقل در سطح اصلی طراحی باشد.
اتصال دکمه ثبت‌نام به صفحه بعد
اکنون می‌خواهیم دکمه «شروع ثبت‌نام» در صفحه معرفی دوره را به فریم Enrollment – Desktop متصل کنیم.
ابتدا فریم Course Landing – Desktop را پیدا کنید و Instance مربوط به دکمه ثبت‌نام در بخش Hero را انتخاب کنید.
سپس مراحل زیر را انجام دهید:
- در پنل سمت راست، تب Prototype را باز کنید. با میان‌بر Shift + E نیز می‌توانید بین بخش‌های Design و Prototype جابه‌جا شوید.
- نشانگر را روی دکمه انتخاب‌شده قرار دهید تا دستگیره اتصال پروتوتایپ ظاهر شود.
- دستگیره را به فریم Enrollment – Desktop بکشید و روی آن رها کنید.
- در پنجره تنظیمات Interaction، مقدار Trigger را روی On click قرار دهید.
- برای Action، گزینه Navigate to را انتخاب کنید.
- مطمئن شوید مقصد (Destination) همان فریم Enrollment – Desktop است.
- برای حرکت بین صفحات، یک Transition ساده مانند Instant انتخاب کنید.
این تنظیمات به فیگما می‌گویند که هنگام کلیک روی دکمه، صفحه معرفی دوره با صفحه ثبت‌نام نمایشی جایگزین شود.
در اینجا سه مفهوم اصلی داریم: Trigger مشخص می‌کند چه عملی باعث شروع تعامل می‌شود، Action نتیجه آن عمل را تعیین می‌کند و Destination صفحه یا عنصر مقصد را نشان می‌دهد.
در بخش قبل، برای کامپوننت دکمه حالت‌های Hover و Pressed را ساخته بودیم. آن تعامل‌ها ظاهر دکمه را تغییر می‌دهند، اما اتصال جدید وظیفه جابه‌جایی میان صفحات را بر عهده دارد.
فیگما امکان ترکیب تعامل‌های Variant و تعامل‌های صفحه را فراهم می‌کند. بااین‌حال، اگر دو تعامل روی یک عنصر از Trigger یکسان استفاده کنند، تعامل سطح پروتوتایپ می‌تواند بر تعامل Variant اولویت پیدا کند. به همین دلیل، بهتر است تغییر حالت‌های ظاهری و عمل انتقال صفحه را جداگانه بررسی کنیم.
اگر دکمه ثبت‌نام در بخش پایانی صفحه معرفی دوره نیز وجود دارد، همان Instance را انتخاب کنید و اتصال On click → Navigate to → Enrollment – Desktop را برای آن تعریف کنید. در نتیجه، هر دو مسیر ورود به ثبت‌نام مقصد یکسانی خواهند داشت.
اتصال فرم ثبت‌نام به صفحه تأیید
حالا باید مسیر کاربر را از صفحه ثبت‌نام نمایشی به صفحه پایانی ادامه دهیم.
وارد فریم Enrollment – Desktop شوید و دکمه «مشاهده نتیجه» را انتخاب کنید. از تب Prototype، دستگیره اتصال آن را به فریم Enrollment Confirmation – Desktop بکشید.
برای این اتصال نیز تنظیمات زیر را در نظر بگیرید:
- Trigger: On click
- Action: Navigate to
- Destination: Enrollment Confirmation – Desktop
- Transition: Instant
با این تنظیمات، کلیک روی دکمه «مشاهده نتیجه» صفحه پایانی را نمایش می‌دهد.
نکته مهم این است که در پروژه فعلی، انتقال به صفحه پایانی وابسته به واردکردن نام و ایمیل نیست. فیگما صرفاً اتصال تعریف‌شده را اجرا می‌کند. بنابراین نمایش صفحه تأیید به معنای بررسی صحت اطلاعات، ارسال فرم یا ثبت موفق درخواست نیست.
اگر بخواهیم بعدها رفتارهای واقعی‌تری مانند نمایش خطای فرم، فعال‌شدن دکمه پس از تکمیل اطلاعات یا نمایش وضعیت انتظار را شبیه‌سازی کنیم، باید تعامل‌ها و حالت‌های بیشتری طراحی کنیم. این جزئیات خارج از محدوده پروژه فعلی هستند.
برای کامل‌شدن مسیر بازگشت، دکمه «بازگشت به معرفی دوره» را در صفحه پایانی انتخاب کنید و یک اتصال جدید با Action برابر Navigate to و مقصد Course Landing – Desktop بسازید.
همچنین می‌توانید در صفحه ثبت‌نام یک گزینه «بازگشت» قرار دهید و برای آن از Action نوع Back استفاده کنید. این Action کاربر را در تاریخچه پروتوتایپ به صفحه قبلی برمی‌گرداند و نیازی به انتخاب دستی یک مقصد ثابت ندارد.
در این مرحله مسیر اصلی پروژه چنین خواهد بود:
صفحه معرفی دوره ← کلیک روی شروع ثبت‌نام ← فرم نمایشی ثبت‌نام ← کلیک روی مشاهده نتیجه ← صفحه پایان مسیر
تعیین نقطه شروع پروتوتایپ با Flow Starting Point
پس از اتصال فریم‌ها، باید مشخص کنیم پیش‌نمایش پروتوتایپ از کدام صفحه آغاز شود.
در فیگما، مجموعه‌ای از صفحه‌ها و ارتباط‌های آن‌ها که یک مسیر مشخص را تشکیل می‌دهند، Flow نام دارد. هر Flow می‌تواند یک نقطه شروع داشته باشد.
برای پروژه ما، نقطه شروع باید صفحه معرفی دوره باشد؛ چون کاربر ابتدا اطلاعات دوره را مشاهده می‌کند و سپس درباره ورود به ثبت‌نام تصمیم می‌گیرد.
برای تنظیم این نقطه:
- فریم Course Landing – Desktop را انتخاب کنید.
- تب Prototype را در پنل سمت راست باز کنید.
- بخش Flow starting point را پیدا کنید.
- اگر نقطه شروع به‌صورت خودکار ایجاد نشده است، روی علامت افزودن کلیک کنید.
- نام Flow را به Course Enrollment Flow تغییر دهید.
وقتی نخستین اتصال بین دو فریم ساخته می‌شود، فیگما معمولاً نقطه شروع را روی فریم مبدأ ایجاد می‌کند. بنابراین اگر این نقطه از قبل وجود دارد، نیازی به ساخت دوباره آن نیست؛ فقط بررسی کنید روی فریم درست قرار گرفته باشد.
در پروژه‌های بزرگ‌تر می‌توان چند Flow مستقل تعریف کرد؛ برای مثال یک مسیر ثبت‌نام و یک مسیر مشاهده سرفصل‌ها. اما برای آموزش فعلی، یک مسیر کافی است.
اجرای پروتوتایپ و بررسی مسیر کلیک‌ها
اکنون می‌توانیم نتیجه اتصال‌ها را در حالت پیش‌نمایش مشاهده کنیم.
فیگما دو روش اصلی برای نمایش پروتوتایپ دارد: Preview که آن را در کنار محیط طراحی اجرا می‌کند و Present که برای مشاهده و ارائه پروتوتایپ در نمای جداگانه مناسب است.
برای شروع، از بخش Flowها گزینه Preview را انتخاب کنید. پیش‌نمایش باید از صفحه Course Landing – Desktop آغاز شود.
سپس مسیر زیر را دنبال کنید:
- در صفحه معرفی دوره، روی دکمه «شروع ثبت‌نام» کلیک کنید.
- بررسی کنید که صفحه Enrollment – Desktop نمایش داده شود.
- در صفحه ثبت‌نام نمایشی، روی «مشاهده نتیجه» کلیک کنید.
- بررسی کنید که فریم Enrollment Confirmation – Desktop ظاهر شود.
- روی «بازگشت به معرفی دوره» کلیک کنید و ببینید آیا دوباره به صفحه ابتدایی هدایت می‌شوید.
این مراحل، معیار بررسی عملکرد پروتوتایپ هستند و تا زمانی که آن‌ها را در فایل واقعی اجرا نکرده‌ایم، نمی‌توانیم نتیجه‌شان را تأییدشده بدانیم.
اگر کلیک روی یک دکمه باعث تغییر صفحه نشد، ابتدا Instance دکمه را در حالت Design انتخاب کنید و در تب Prototype بررسی کنید که Interaction موردنظر روی همان عنصر تعریف شده باشد. سپس مقدار Trigger، نوع Action و فریم مقصد را کنترل کنید.
اگر پروتوتایپ از صفحه اشتباهی شروع شد، Flow Starting Point را بررسی کنید. در صورت نیاز می‌توانید از گزینه Restart در نمایش پروتوتایپ استفاده کنید تا مسیر دوباره از نقطه شروع آغاز شود.
برای بررسی حالت‌های تعاملی دکمه نیز نشانگر ماوس را روی آن قرار دهید و سپس کلیک کنید. اگر حالت Hover یا Pressed مطابق انتظار نمایش داده نشد، باید اتصال‌های Variant را در Component Set و تعامل‌های تعریف‌شده روی Instance بررسی کنید. مشاهده‌نشدن یک تغییر ظاهری به‌تنهایی ثابت نمی‌کند کدام تنظیم علت مشکل است.
در پایان، باید یک فایل طراحی داشته باشید که سه صفحه آن از طریق دکمه‌های مشخص به یکدیگر متصل شده‌اند. نتیجه قابل قبول این مرحله، امکان پیمودن مسیر فرضی از معرفی دوره تا صفحه پایانی و بازگشت به ابتداست؛ نه ثبت اطلاعات واقعی یا اجرای یک وب‌سایت.
این پروتوتایپ مبنایی برای بازبینی تصمیم‌های طراحی فراهم می‌کند. در بخش بعد، مسیر حرکت کاربر، وضوح دکمه‌ها، نظم بصری و مشکلات احتمالی چیدمان را بررسی می‌کنیم و یک نمونه اصلاح قبل و بعد را نشان می‌دهیم.
بررسی و اصلاح طراحی نهایی در فیگما
تا اینجا صفحه معرفی دوره HTML را طراحی کرده‌ایم و سه فریم اصلی پروژه را به یکدیگر متصل کرده‌ایم. حالا باید بررسی کنیم که آیا طراحی ما از نظر ساختار، خوانایی و مسیر تعامل، با هدف اولیه پروژه هماهنگ است یا نه.
ممکن است یک صفحه از نظر رنگ و چیدمان منظم باشد، اما کاربر نداند از کجا باید وارد مرحله بعد شود. همچنین ممکن است دکمه‌ها به‌درستی کار کنند، ولی نوشته آن‌ها نتیجه کلیک را به‌وضوح توضیح ندهد. به همین دلیل، بررسی نهایی نباید فقط به ظاهر صفحه محدود شود.
در این مرحله، با یک سناریوی مشخص طراحی را بازبینی می‌کنیم، چند معیار کاربردپذیری را روی آن اعمال می‌کنیم و یکی از نقاط قابل اصلاح را به‌صورت عملی تغییر می‌دهیم. هدف این است که بتوانیم برای تصمیم‌های طراحی خود دلیل ارائه کنیم، نه اینکه صرفاً ظاهر صفحه را زیباتر کنیم.
بررسی مسیر کاربر در پروتوتایپ
برای ارزیابی طراحی، ابتدا باید بدانیم کاربر قرار است چه کاری انجام دهد.
در پروژه ما، سناریو این است: فردی می‌خواهد با دوره آموزش HTML آشنا شود، اطلاعات و پیش‌نیازهای آن را بررسی کند و مسیر نمونه ثبت‌نام را تا صفحه پایانی دنبال کند.
این سناریو سه انتظار مشخص دارد:
- کاربر بتواند موضوع دوره، سطح آن و اطلاعات ضروری را در صفحه معرفی پیدا کند.
- مسیر ورود به ثبت‌نام برای او قابل تشخیص باشد.
- پس از ورود به مراحل بعدی، بداند در کدام قسمت مسیر قرار دارد و چگونه می‌تواند به صفحه معرفی دوره بازگردد.
برای بررسی این موارد، فایل پروژه را در فیگما باز کنید و از بخش Prototype، پیش‌نمایش Course Enrollment Flow را اجرا کنید.
ابتدا صفحه معرفی دوره را بدون کلیک‌کردن بررسی کنید. آیا عنوان «دوره آموزش HTML» به‌اندازه کافی برجسته است؟ آیا مشخص است دوره درباره چه موضوعی است؟ آیا اطلاعات مهم قبل از تصمیم برای ثبت‌نام در دسترس قرار دارند؟
سپس روی دکمه «شروع ثبت‌نام» کلیک کنید و وارد صفحه Enrollment – Desktop شوید. بررسی کنید که عنوان صفحه جدید با کاری که کاربر انتظار داشته هماهنگ باشد.
در ادامه، روی دکمه انتقال به صفحه پایانی کلیک کنید و مسیر بازگشت را نیز امتحان کنید.
این بررسی به ما کمک می‌کند اتصال‌ها و هماهنگی ظاهری مسیر را کنترل کنیم. بااین‌حال، پیمودن مسیر توسط طراح به‌تنهایی ثابت نمی‌کند که کاربران واقعی نیز آن را به‌آسانی پیدا خواهند کرد.
ارزیابی کاربردپذیری و وضوح رابط
برای بررسی دقیق‌تر صفحه، می‌توانیم از چند اصل کاربردپذیری استفاده کنیم. چارچوب ده اصل کاربردپذیری یاکوب نیلسن یکی از منابع شناخته‌شده برای ارزیابی رابط‌های کاربری است. در این پروژه لازم نیست هر ده اصل را جداگانه آموزش دهیم؛ فقط معیارهایی را انتخاب می‌کنیم که مستقیماً با مسیر معرفی و ثبت‌نام ارتباط دارند.
| معیار بررسی | پرسشی که باید پاسخ دهیم |
|---|---|
| وضوح اطلاعات | آیا عنوان، سطح و پیش‌نیازهای دوره به‌آسانی قابل تشخیص‌اند؟ |
| مشخص‌بودن اقدام اصلی | آیا دکمه ثبت‌نام از عناصر فرعی صفحه متمایز است؟ |
| سازگاری رفتاری | آیا دکمه‌های مشابه در صفحه‌های مختلف رفتار قابل پیش‌بینی دارند؟ |
| نمایش وضعیت | آیا کاربر می‌فهمد در مرحله معرفی، ثبت‌نام نمایشی یا پایان مسیر قرار دارد؟ |
| کنترل و بازگشت | آیا امکان بازگشت از صفحه پایانی و اصلاح مسیر وجود دارد؟ |
| پیشگیری از برداشت اشتباه | آیا روشن است که فرم پروژه، ثبت‌نام واقعی انجام نمی‌دهد؟ |
این معیارها را ابتدا روی فریم دسکتاپ بررسی کنید. اگر پاسخ پرسشی روشن نیست، همان قسمت را برای اصلاح احتمالی مشخص کنید.
برای مثال، اگر دو دکمه با ظاهر یکسان به مقصدهای متفاوتی می‌روند، باید بررسی کنیم آیا متن آن‌ها تفاوت عملکرد را به‌خوبی نشان می‌دهد. اگر کاربر پس از کلیک روی یک دکمه به صفحه جدیدی منتقل می‌شود، عنوان آن صفحه نیز باید توضیح دهد چه اتفاقی افتاده است.
به همین ترتیب، اگر در صفحه ثبت‌نام فقط چند کادر ورودی و یک دکمه نمایش داده‌ایم، باید روشن کنیم که این صفحه یک نمونه آموزشی است. در غیر این صورت، ممکن است ظاهر فرم انتظاری ایجاد کند که پروتوتایپ توانایی برآورده‌کردن آن را ندارد.
بررسی خوانایی و چیدمان نسخه دسکتاپ و موبایل
بعد از بازبینی مسیر، باید ظاهر صفحه را در اندازه‌های طراحی‌شده بررسی کنیم.
ابتدا فریم Course Landing – Desktop را انتخاب کنید. در این نسخه، عرض صفحه 1440 پیکسل و محدوده اصلی محتوا 1120 پیکسل است. بررسی کنید که عنوان دوره، توضیحات و تصویر Hero در جایگاه مناسب خود قرار دارند و فاصله میان بخش‌ها حفظ شده است.
سپس به فریم Course Landing – Mobile با عرض 390 پیکسل بروید. در این نسخه، محدوده محتوا 350 پیکسل عرض دارد و بخش Hero از ساختار دو‌ستونی به یک ستون تبدیل شده است.
هنگام بررسی نسخه موبایل، به این موارد توجه کنید:
- عنوان دوره باید بدون خروج از فریم و با شکست سطر مناسب نمایش داده شود.
- تصویر نباید باعث ایجاد فضای افقی اضافی یا پوشاندن متن شود.
- کارت‌های اطلاعات باید در محدوده محتوا قرار بگیرند و نوشته آن‌ها بریده نشود.
- دکمه اصلی باید به‌راحتی دیده شود و متن آن در فضای موجود جا بگیرد.
- فاصله بخش‌های مرتبط باید همچنان ارتباط میان آن‌ها را نشان دهد.
اگر یکی از بخش‌ها از فریم بیرون زده است، ابتدا تنظیمات عرض، ارتفاع و Auto Layout همان بخش را بررسی کنید. برای مثال، اگر عنوان دوره در موبایل از محدوده خارج شده، ممکن است عرض لایه متن ثابت مانده باشد یا تنظیم ارتفاع آن اجازه افزایش تعداد سطرها را ندهد.
در چنین وضعیتی باید علت چیدمانی مشکل را پیدا کنیم؛ کوچک‌کردن بی‌دلیل فونت، همیشه راه‌حل مناسبی نیست.
برای بررسی خوانایی نیز متن‌های اصلی را روی پس‌زمینه‌هایشان کنترل کنید. کنتراست رنگ، اندازه متن، فاصله خطوط و تراز فارسی باید با هم بررسی شوند. همین‌طور در طراحی حالت‌های تعاملی، بهتر است وضعیت فوکوس صفحه‌کلید نیز در طراحی پیش‌بینی شود.
توجه کنید که بررسی ظاهری در فیگما معادل آزمون کامل دسترس‌پذیری یک وب‌سایت نیست. عملکرد واقعی صفحه‌کلید، ترتیب فوکوس، نام‌گذاری کنترل‌ها و رفتار فناوری‌های کمکی باید در نسخه پیاده‌سازی‌شده نیز ارزیابی شوند.
در این مرحله فقط نسخه موبایل صفحه معرفی دوره را طراحی کرده‌ایم. بنابراین بررسی مسیر سه‌صفحه‌ای پروتوتایپ را روی نسخه دسکتاپ انجام می‌دهیم و نسخه موبایل را از نظر ساختار و خوانایی صفحه معرفی بررسی می‌کنیم. ارزیابی کامل ثبت‌نام در موبایل به طراحی فریم‌های موبایلی مراحل بعدی نیاز دارد.
اصلاح یک مشکل در صفحه ثبت‌نام؛ مقایسه قبل و بعد
برای اینکه بازبینی طراحی به یک تمرین عملی تبدیل شود، یکی از تصمیم‌های صفحه ثبت‌نام را اصلاح می‌کنیم.
در H2 قبلی، صفحه Enrollment – Desktop را با عنوان «ثبت‌نام در دوره HTML»، دو کادر ورودی برای نام و ایمیل و دکمه «مشاهده نتیجه» طراحی کردیم. همچنین توضیحی درباره نمایشی‌بودن فرم نزدیک دکمه قرار دادیم.
این ساختار از نظر اتصال فریم‌ها قابل استفاده است، اما یک ابهام احتمالی دارد: دکمه «مشاهده نتیجه» دقیقاً مشخص نمی‌کند چه نتیجه‌ای نمایش داده خواهد شد. از سوی دیگر، چون کادرها شبیه ورودی واقعی هستند، بهتر است توضیح نمایشی‌بودن فرم پیش از آن‌ها دیده شود.
این یک ایراد احتمالی شناسایی‌شده در بازبینی تحلیلی است، نه مشکلی که از مشاهده کاربران واقعی به دست آمده باشد.
برای اصلاح آن، ساختار صفحه را به شکل زیر تغییر می‌دهیم:
| بخش | قبل از اصلاح | بعد از اصلاح |
|---|---|---|
| عنوان صفحه | ثبت‌نام در دوره HTML | نمونه مرحله ثبت‌نام دوره HTML |
| توضیح نمایشی‌بودن | نزدیک دکمه پایانی | زیر عنوان و پیش از فیلدها |
| متن دکمه | مشاهده نتیجه | مشاهده پایان مسیر نمونه |
| متن راهنما | این فرم فقط برای نمایش مسیر طراحی است | این فرم نمایشی است؛ اطلاعات واقعی وارد نکنید |
با این تغییرات، قصد داریم تفاوت میان یک فرم عملیاتی و یک نمونه آموزشی را روشن‌تر کنیم. همچنین نوشته دکمه اکنون مقصد مورد انتظار را دقیق‌تر توضیح می‌دهد.
برای اجرای اصلاح در فیگما، فریم Enrollment – Desktop را انتخاب کنید. ابتدا متن عنوان را تغییر دهید و توضیح راهنما را به زیر عنوان منتقل کنید.
اگر عناصر داخل Auto Layout قرار دارند، می‌توانید لایه راهنما را در پنل Layers جابه‌جا کنید تا پیش از کادرهای ورودی قرار بگیرد. فاصله آن را از عنوان و فیلدهای بعدی تنظیم کنید تا به‌عنوان توضیح همان مرحله خوانده شود.
سپس Instance دکمه پایانی را انتخاب کنید و مقدار متن آن را به «مشاهده پایان مسیر نمونه» تغییر دهید. چون دکمه را در بخش کامپوننت‌ها با Hug contents طراحی کرده‌ایم، بررسی کنید که متن طولانی‌تر باعث خروج دکمه از محدوده یا شکست نامناسب نوشته نشده باشد.
اگر فضای کافی وجود ندارد، می‌توانید عرض دکمه را در محدوده والد افزایش دهید یا متن کوتاه‌تر و همچنان روشنی مانند «پایان مسیر نمونه» انتخاب کنید.
در پایان، اتصال Prototype دکمه را بررسی کنید تا مقصد آن همچنان Enrollment Confirmation – Desktop باشد. تغییر متن و جایگاه دکمه نباید مسیر تعریف‌شده را از بین ببرد.
اکنون یک اصلاح مشخص با دلیل انجام داده‌ایم: در نسخه جدید، ماهیت نمایشی صفحه زودتر توضیح داده می‌شود و متن دکمه درباره مقصد خود شفاف‌تر است.
بااین‌حال، اینکه این تغییر واقعاً سردرگمی کاربران را کاهش می‌دهد یا نه، هنوز به مشاهده و آزمون نیاز دارد.
بررسی دوباره اصلاحات و ثبت نتیجه
پس از اعمال تغییرات، پروتوتایپ را دوباره از نقطه شروع اجرا کنید. این بار فقط به عملکرد اتصال‌ها توجه نکنید؛ بررسی کنید که متن‌ها و رفتارها با یکدیگر هماهنگ باشند.
برای بازبینی نهایی پروژه، این چهار مورد را کنترل کنید:
- صفحه معرفی دوره: عنوان، اطلاعات اصلی و مسیر شروع ثبت‌نام مشخص باشند.
- صفحه ثبت‌نام نمایشی: توضیح آموزشی‌بودن فرم پیش از فیلدها نمایش داده شود و دکمه پایانی مقصد خود را روشن کند.
- صفحه پایانی: پیام موجود به‌وضوح اعلام کند که ثبت‌نام واقعی انجام نشده است و مسیر بازگشت در دسترس باشد.
- نسخه موبایل صفحه معرفی: عناصر از فریم خارج نشوند و ترتیب اطلاعات قابل خواندن باقی بماند.
برای هر موردی که درست نمایش داده نمی‌شود، نام فریم، عنصر مربوط، وضعیت مشاهده‌شده و اصلاح موردنیاز را یادداشت کنید. اگر پس از اصلاح، همان مورد را دوباره بررسی کردید، نتیجه جدید را نیز ثبت کنید.
برای مثال، اگر در اجرای واقعی مشاهده کردید متن دکمه جدید در عرض تعیین‌شده جا نمی‌گیرد، این یک مشاهده قابل ثبت درباره چیدمان است. اما تا زمانی که چنین اتفاقی را در محیط پروژه ندیده‌ایم، نباید آن را به‌عنوان مشکل رخ‌داده گزارش کنیم.
همچنین بررسی شخصی طراح را نباید با تست کاربردپذیری با کاربران واقعی یکسان بدانیم. در آزمون واقعی، شرکت‌کننده‌ای متناسب با مخاطب هدف، وظیفه‌ای مشخص را روی رابط انجام می‌دهد و رفتار او بدون هدایت‌کردن به پاسخ مطلوب مشاهده می‌شود. اگر چنین آزمونی برگزار نشده باشد، درباره نرخ موفقیت کاربران یا میزان کاهش خطا ادعایی نداریم.
در پایان این مرحله، باید نسخه بازبینی‌شده‌ای از صفحه معرفی دوره و مسیر ثبت‌نام نمایشی داشته باشیم که تصمیم‌های آن قابل توضیح باشند. می‌دانیم کدام عناصر را بررسی کرده‌ایم، چه تغییری پیشنهاد داده‌ایم و برای تأیید اثر آن به چه شواهد بیشتری نیاز داریم.
در بخش بعد، روش اشتراک‌گذاری فایل طراحی و پروتوتایپ را یاد می‌گیریم تا بتوانیم همین خروجی را برای مشاهده و دریافت بازخورد در اختیار دیگران قرار دهیم.
اشتراک‌گذاری فایل و خروجی گرفتن از فیگما
تا اینجا صفحه معرفی دوره HTML را در نسخه‌های دسکتاپ و موبایل طراحی کرده‌ایم، برای عناصر تکرارشونده کامپوننت ساخته‌ایم و مسیر ثبت‌نام نمایشی را به یک پروتوتایپ کلیک‌پذیر تبدیل کرده‌ایم. حالا باید بتوانیم این طراحی را در اختیار دیگران قرار دهیم تا آن را مشاهده کنند یا درباره قسمت‌های مختلف بازخورد بدهند.
فیگما برای این کار چند روش دارد. می‌توانیم لینک فایل طراحی را ارسال کنیم، پروتوتایپ را برای مشاهده تعامل‌ها به اشتراک بگذاریم یا از صفحه‌ها و عناصر خروجی تصویری بگیریم. هر روش کاربرد متفاوتی دارد؛ برای مثال، یک تصویر PNG ظاهر صفحه را نشان می‌دهد، اما امکان کلیک روی دکمه‌ها و حرکت میان فریم‌های پروتوتایپ را فراهم نمی‌کند.
در این بخش، خروجی مناسب پروژه را انتخاب می‌کنیم و تنظیمات دسترسی را نیز بررسی می‌کنیم تا مشخص باشد چه کسانی می‌توانند طراحی را مشاهده یا ویرایش کنند.
اشتراک‌گذاری فایل طراحی و تنظیم سطح دسترسی
اگر بخواهیم فرد دیگری ساختار صفحه، لایه‌ها، کامپوننت‌ها یا نسخه‌های دسکتاپ و موبایل را بررسی کند، اشتراک‌گذاری فایل Figma Design انتخاب مناسبی است.
برای ارسال لینک فایل پروژه، مراحل زیر را دنبال کنید:
- فایل «پروژه طراحی صفحه دوره HTML» را باز کنید.
- روی دکمه Share در قسمت بالای محیط ویرایش کلیک کنید.
- در پنجره بازشده، تنظیمات مربوط به دسترسی افراد را بررسی کنید.
- اگر می‌خواهید فایل فقط برای افراد مشخصی قابل مشاهده باشد، گزینه Only invited people را انتخاب کنید و نشانی ایمیل آن‌ها را وارد کنید.
- سطح دسترسی را متناسب با نقش فرد تعیین کنید؛ برای دریافت بازخورد معمولاً Can view کافی است.
- دعوت‌نامه را ارسال کنید یا پس از تنظیم دسترسی، از گزینه Copy link برای دریافت لینک فایل استفاده کنید.
دو سطح دسترسی اصلی در این مرحله اهمیت دارند:
- Can view: فرد می‌تواند طراحی را مشاهده و بررسی کند و با داشتن دسترسی لازم درباره آن نظر ثبت کند، اما امکان ویرایش لایه‌های فایل را ندارد.
- Can edit: فرد اجازه تغییر عناصر، فریم‌ها و سایر بخش‌های طراحی را خواهد داشت.
اگر هدف فقط دریافت نظر درباره پروژه است، بهتر است دسترسی ویرایش را بدون ضرورت در اختیار دیگران نگذارید.
در تنظیمات اشتراک‌گذاری ممکن است گزینه Anyone نیز وجود داشته باشد. انتخاب آن به این معناست که افراد خارج از فهرست دعوت‌شدگان نیز می‌توانند مطابق سطح دسترسی تعریف‌شده به فایل دسترسی پیدا کنند. در حساب‌های سازمانی، نمایش این گزینه ممکن است به سیاست مدیر سازمان وابسته باشد.
برای پروژه آموزشی ما، ابتدا اشتراک‌گذاری با افراد مشخص و دسترسی مشاهده را پیشنهاد می‌کنیم. اگر قرار است فایل به‌صورت عمومی منتشر شود، باید آگاهانه تنظیمات دسترسی آن را تغییر دهیم.
در طرح رایگان Starter نیز می‌توان فایل را به اشتراک گذاشت؛ بااین‌حال، هنگام اشتراک‌گذاری عمومی فایلی که در Drafts قرار دارد، دسترسی افراد دارای لینک به مشاهده محدود می‌شود و برای اعطای دسترسی ویرایش ممکن است لازم باشد فایل را به یک پوشه مناسب منتقل کنید.
اشتراک‌گذاری لینک پروتوتایپ برای بررسی مسیر ثبت‌نام
گاهی لازم نیست فرد مقابل وارد جزئیات لایه‌ها و تنظیمات طراحی شود؛ کافی است بتواند دکمه‌ها را انتخاب کند و مسیر حرکت میان صفحه‌ها را ببیند.
در پروژه ما، هدف بازبین این است که از صفحه معرفی دوره وارد ثبت‌نام نمایشی شود، به صفحه پایانی برسد و دوباره به صفحه معرفی بازگردد.
برای دریافت لینک نمایش پروتوتایپ، فایل طراحی را باز کنید و با استفاده از گزینه Present وارد نمای ارائه شوید. در این نما، Flow با نام Course Enrollment Flow را انتخاب کنید و مطمئن شوید نقطه شروع آن روی Course Landing – Desktop قرار دارد.
سپس گزینه Share prototype را باز کنید. متناسب با امکانات طرح اشتراک، تنظیمات دسترسی را بررسی کنید و از گزینه Copy link برای دریافت لینک استفاده کنید.
باکس نکته محدودیت اشتراک‌گذاری پروتوتایپ در طرح رایگان:
فیگما میان ارسال لینک نمایش پروتوتایپ و محدودکردن دسترسی به «فقط پروتوتایپ» تفاوت قائل است. قابلیت اشتراک‌گذاری مستقل پروتوتایپ، بدون دسترسی به فایل طراحی اصلی، به طرح‌های پولی وابسته است. در طرح رایگان Starter، فردی که لینک پروتوتایپ را دریافت می‌کند ممکن است از نمای ارائه بتواند فایل طراحی اصلی را نیز باز کند. بنابراین لینک پروتوتایپ در طرح رایگان را راهی برای پنهان‌کردن فایل اصلی در نظر نگیرید.
برای دریافت بازخورد، بهتر است همراه لینک یک وظیفه مشخص نیز به بازبین بدهید؛ برای مثال:
«لطفاً از صفحه معرفی دوره HTML شروع کنید، وارد مرحله ثبت‌نام نمایشی شوید و به صفحه پایانی برسید. بررسی کنید که عنوان صفحه‌ها و عملکرد دکمه‌ها برایتان قابل فهم هستند.»
این درخواست به بازبین کمک می‌کند بداند کدام مسیر را باید بررسی کند. البته اگر صرفاً لینک را ارسال کنیم و خودمان مسیر را از ابتدا تا انتها اجرا نکرده باشیم، هنوز نمی‌توانیم درباره درست‌بودن تمام اتصال‌ها یا موفقیت کاربران نتیجه‌گیری کنیم.
خروجی گرفتن از صفحه طراحی به‌صورت تصویر و PDF
گاهی هدف، نمایش یک طرح ثابت در مقاله، سند آموزشی یا ارائه است. در چنین شرایطی، نیازی نیست لینک فایل اصلی را ارسال کنیم و می‌توانیم از فریم موردنظر خروجی بگیریم.
برای نمونه، اگر بخواهیم تصویر نهایی صفحه معرفی دوره HTML را در یک گزارش قرار دهیم، کافی است از فریم دسکتاپ خروجی PNG تهیه کنیم.
مراحل خروجی گرفتن به این صورت است:
- در پنل Layers، فریم Course Landing – Desktop را انتخاب کنید.
- در پنل سمت راست، بخش Export را پیدا کنید.
- روی علامت + کلیک کنید تا یک تنظیم خروجی اضافه شود.
- فرمت PNG را انتخاب کنید و مقیاس خروجی را برای شروع روی 1x بگذارید.
- در صورت نیاز، از گزینه Preview برای بررسی تصویر استفاده کنید.
- روی Export کلیک کنید تا فایل خروجی ایجاد شود.
اگر از نسخه مرورگر فیگما استفاده می‌کنید، فایل معمولاً در مسیر دانلود تعیین‌شده مرورگر ذخیره می‌شود.
فیگما فرمت‌های دیگری نیز برای خروجی ثابت ارائه می‌دهد. انتخاب آن‌ها به کاربرد خروجی بستگی دارد:
| فرمت | کاربرد مناسب |
|---|---|
| PNG | تصاویر رابط کاربری، آموزش‌های تصویری و طرح‌هایی که وضوح متن در آن‌ها مهم است |
| JPG | تصاویر ثابت، به‌ویژه وقتی حجم فایل اهمیت دارد |
| SVG | عناصر برداری مانند آیکون‌ها و شکل‌هایی که باید بدون افت کیفیت مقیاس‌پذیر باشند |
| ارائه یا آرشیو نسخه ثابت طراحی در قالب سند |
برای پروژه ما، PNG انتخاب مناسبی برای نمایش صفحه دسکتاپ و موبایل در مقاله آموزشی است. اگر بخواهیم خروجی چند فریم را در قالب سند بررسی کنیم، PDF نیز می‌تواند کاربرد داشته باشد.
نکته مهم این است که خروجی‌های تصویری و PDF، تعامل‌های پروتوتایپ را حفظ نمی‌کنند. برای نمایش عملکرد دکمه‌ها و جابه‌جایی میان صفحه‌ها، همچنان باید از قابلیت ارائه پروتوتایپ استفاده کنیم.
ذخیره نسخه محلی فایل با فرمت FIG
علاوه بر خروجی تصویری، ممکن است بخواهیم یک نسخه محلی از فایل طراحی برای نگهداری یا انتقال به حساب دیگری تهیه کنیم.
فیگما برای فایل‌های Figma Design از فرمت اختصاصی .fig استفاده می‌کند. این فرمت با خروجی‌هایی مانند PNG و PDF متفاوت است؛ زیرا برای نگهداری ساختار فایل طراحی و واردکردن دوباره آن به فیگما استفاده می‌شود.
برای ذخیره نسخه محلی، فایل پروژه را باز کنید و از منوی اصلی مسیر زیر را انتخاب کنید:
File > Save local copy
فایل .fig در محل دانلود ذخیره می‌شود. برای واردکردن دوباره آن، می‌توانید فایل را به محیط مدیریت فایل‌های حساب فیگما بکشید.
باید توجه کنید که نسخه محلی .fig تمام اطلاعات همکاری را حفظ نمی‌کند. برای مثال، تاریخچه نسخه‌ها و نظرهای ثبت‌شده در فایل اصلی همراه نسخه محلی ذخیره نمی‌شوند. پس اگر بازخوردها و سوابق تغییرات برای پروژه اهمیت دارند، نباید فایل محلی را جایگزین کامل فایل اصلی و تاریخچه آن بدانیم.
بررسی خروجی‌ها پیش از ارسال پروژه
پس از آماده‌کردن لینک‌ها و فایل‌های خروجی، بهتر است هر کدام را از نظر کاربرد مورد انتظار بررسی کنیم.
در پروژه صفحه معرفی دوره HTML، معیارهای بررسی به این صورت‌اند:
- فایل طراحی: لینک باید برای افراد دارای مجوز باز شود و امکان مشاهده فریم‌های دسکتاپ و موبایل را فراهم کند.
- پروتوتایپ: مسیر نمونه باید از صفحه معرفی دوره آغاز شود و اتصال‌های ثبت‌نام، صفحه پایانی و بازگشت قابل اجرا باشند.
- خروجی PNG: تصویر صفحه باید کامل باشد و متن فارسی یا اجزای مهم از محدوده تصویر بیرون نمانده باشند.
- نسخه محلی FIG: فایل دانلودشده باید برای نگهداری یا واردکردن مجدد به فیگما در دسترس باشد.
برای اطمینان از تنظیمات اشتراک‌گذاری، بهتر است لینک را با حساب یا فردی که دقیقاً سطح دسترسی موردنظر را دارد بررسی کنید. بازکردن لینک در حساب مالک فایل به‌تنهایی نشان نمی‌دهد که افراد دیگر نیز همان دسترسی را خواهند داشت.
اگر دریافت‌کننده نتوانست فایل را باز کند، ابتدا تنظیمات Share و مجوزهای همان فرد را بررسی کنید. اگر خروجی تصویر ناقص بود، محدوده فریم انتخاب‌شده و تنظیمات Export را کنترل کنید. هر یک از این مشکلات باید بر اساس مشاهده واقعی بررسی شود، نه صرفاً حدس درباره علت آن.
در پایان این مرحله، باید بتوانیم سه خروجی متفاوت از پروژه تهیه کنیم: لینک فایل طراحی برای بررسی ساختار، لینک پروتوتایپ برای مشاهده مسیر تعاملی و یک خروجی تصویری برای نمایش ظاهر صفحه. در صورت نیاز نیز می‌توانیم نسخه محلی .fig را نگه داریم.
به این ترتیب، مسیر آموزشی ما از یک وایرفریم اولیه به طراحی بصری، کامپوننت‌های قابل استفاده مجدد و یک پروتوتایپ قابل ارائه رسیده است. البته تکمیل واقعی این خروجی‌ها زمانی قابل تأیید است که فایل ساخته شود، اتصال‌ها اجرا شوند و لینک‌ها و فایل‌های خروجی بررسی شوند.
جمع بندی
در این آموزش فیگما، مسیر تبدیل یک وایرفریم به رابط کاربری را با پروژه طراحی صفحه معرفی دوره HTML دنبال کردیم. در طول این مسیر دیدیم که طراحی فقط به انتخاب رنگ و چیدمان عناصر محدود نمی‌شود؛ سازمان‌دهی فریم‌ها، مدیریت فاصله‌ها، ساخت کامپوننت‌های قابل استفاده مجدد و تعریف رفتار دکمه‌ها نیز بخشی از کار است.
برای ارزیابی خروجی خود، سه مورد را بررسی کنید: آیا نسخه‌های دسکتاپ و موبایل صفحه معرفی دوره خوانا و منظم‌اند؟ آیا دکمه‌ها و کارت‌های تکرارشونده از کامپوننت‌های مشترک استفاده می‌کنند؟ و آیا می‌توانید در پیش‌نمایش پروتوتایپ، مسیر معرفی دوره تا پایان ثبت‌نام نمایشی و بازگشت به صفحه نخست را طی کنید؟
اگر یکی از این موارد مطابق انتظار عمل نمی‌کند، همان بخش را در فایل طراحی بررسی و اصلاح کنید. پس از آن می‌توانید فایل و لینک پروتوتایپ را با دسترسی مناسب در اختیار دیگران قرار دهید تا درباره ساختار و مسیر تعامل بازخورد بدهند.
به یاد داشته باشید که خروجی فیگما هنوز یک طرح است، نه وب‌سایت آماده استفاده. گام بعدی، بازبینی و تأیید طراحی و سپس استفاده از آن به‌عنوان مبنای پیاده‌سازی رابط کاربری است.
سوالات متداول
گزینه Fill container فقط برای عناصری در دسترس است که داخل یک فریم دارای Auto Layout قرار گرفته باشند. اگر یک عنصر مستقیماً روی Canvas باشد یا فریم والد آن Auto Layout نداشته باشد، نمی‌توانید این تنظیم را به همان شکل استفاده کنید. ابتدا فریم والد را انتخاب و Auto Layout را فعال کنید؛ سپس عنصر داخلی را انتخاب کنید و تنظیمات تغییر اندازه آن را بررسی کنید. این گزینه برای فریم‌های مستقل سطح اصلی Canvas نیز در دسترس نیست.
Auto Layout نحوه قرارگیری عناصر نسبت به یکدیگر را با تنظیماتی مانند جهت چیدمان، فاصله و Padding مدیریت می‌کند. در مقابل، Constraints مشخص می‌کند یک عنصر هنگام تغییر اندازه فریم والد، موقعیت یا ابعاد خود را چگونه حفظ کند. برای ساخت بخش‌هایی مانند کارت‌ها، دکمه‌ها و چیدمان متنی پروژه ما، Auto Layout انتخاب مناسب‌تری است. Constraints بیشتر برای کنترل جایگاه عناصر در فریم‌های معمولی کاربرد دارد. این دو قابلیت مکمل‌اند، اما روی عناصر داخلی جریان عادی Auto Layout نمی‌توان مستقیماً Constraints اعمال کرد.
ابتدا نام Vazirmatn را در فهرست فونت‌های فیگما جست‌وجو و فیلتر فونت‌ها را بررسی کنید. فیگما به مجموعه‌ای از Google Fonts دسترسی دارد. اگر از نسخه محلی یک فونت استفاده می‌کنید، باید آن را روی کامپیوتر نصب کرده باشید. در نسخه مرورگر نیز برای دسترسی به فونت‌های نصب‌شده ممکن است به Figma Font Installer نیاز داشته باشید. پس از نصب، فایل طراحی را دوباره بارگذاری کنید. اگر همچنان فونت نمایش داده نمی‌شود، وضعیت اتصال Font Installer و مجوز دسترسی محلی مرورگر را بررسی کنید.
باید بین Figma Design و Figma Sites تفاوت بگذاریم. در Figma Design می‌توانید ظاهر صفحه و پروتوتایپ تعاملی بسازید، اما خروجی معمول آن به‌تنهایی یک وب‌سایت عملیاتی با فرم ثبت‌نام واقعی نیست. فیگما ابزار جداگانه‌ای به نام Figma Sites نیز دارد که امکان طراحی و انتشار وب‌سایت بدون کدنویسی را فراهم می‌کند. این قابلیت در وضعیت بتا ارائه شده و انتشار سایت طبق شرایط فعلی به طرح پولی نیاز دارد. پروژه این مقاله در Figma Design انجام می‌شود و انتشار وب‌سایت با Figma Sites جزو مراحل آن نیست.
برای مشاهده پروتوتایپ روی گوشی می‌توانید لینک آن را در مرورگر موبایل باز کنید یا از برنامه Figma برای اندروید و iOS استفاده کنید. برنامه موبایل امکان مشاهده فریم‌ها، اجرای پروتوتایپ و بررسی تعامل‌ها را فراهم می‌کند. البته در پروژه فعلی، نسخه موبایل صفحه معرفی دوره را طراحی کرده‌ایم و مسیر کامل سه‌صفحه‌ای ثبت‌نام فقط برای دسکتاپ آماده شده است. بنابراین برای بررسی کامل مسیر ثبت‌نام در موبایل، ابتدا باید فریم‌ها و اتصال‌های متناسب با نسخه موبایل را نیز طراحی کنیم. نمایش صحیح روی گوشی هم به‌تنهایی جای آزمون کاربران واقعی را نمی‌گیرد.
ابتدا تنظیمات Share فایل را بررسی کنید. اگر دسترسی روی Only invited people قرار دارد، دریافت‌کننده باید با حسابی وارد شود که برای آن مجوز صادر شده است. اگر قصد اشتراک‌گذاری عمومی دارید، باید بررسی کنید گزینه Anyone برای فایل و حساب شما در دسترس و فعال باشد. بعضی سازمان‌ها اشتراک‌گذاری عمومی را محدود می‌کنند. همچنین مطمئن شوید لینک درست پروتوتایپ را ارسال کرده‌اید. اگر لینک باز می‌شود اما دکمه‌ها کار نمی‌کنند، مشکل متفاوت است و باید اتصال‌های Prototype و Flow Starting Point بررسی شوند.
هنوز دیدگاهی ثبت نشده است.