نحوه استفاده از Figma برای طراحی وب سایت واکنش گرا

یک وب سایت واکنش گرا باید طیف وسیعی از صفحه نمایش ها و دستگاه ها، از جمله رایانه، تبلت و گوشی های هوشمند را در نظر بگیرد. امروز به چند نکته و ترفند برای ایجاد یک طراحی واکنش گرا در Figma خواهیم پرداخت.

شاید در نظر گرفتن زیاد به نظر برسد، اما حقیقت این است که نرم افزار ساخت یک نمونه اولیه پاسخگو Figma را برای طراحان بسیار آسان می کند.

این یک ابزار عالی برای ارائه نحوه انطباق طراحی آنها با صفحه نمایش های مختلف به مشتریان است. این به ما طراحان کمک می کند تا ساختار کلی خود و تمام عناصری را که باید برای طراحی خود در چندین دستگاه در نظر بگیریم، درک کنیم.

نحوه استفاده از Figma برای طراحی وب سایت واکنش گرا

در این آموزش یاد خواهیم گرفت که چگونه با استفاده از یک طراحی وب ریسپانسیو Figma بسازیم محدودیت ها و طرح بندی خودکار

برای راهنمایی شما در این فرآیند، من کار خواهم کرد قالب Upec Portfolio Figma از Envato Elements.

1. اصول طراحی وب سایت واکنش گرا

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

1. فکر کن تجربه و تعامل کاربر تا جابجایی از هر دستگاهی تا حد امکان برای کاربران آسان شود.
2. در نظر گرفتن محتوا سلسله مراتب برای هر نوع دستگاه، بنابراین کاربران آنچه را که به دنبال آن هستند در زمان کمتری پیدا می کنند.
3. داشتن تصاویر انعطاف پذیر برای اطمینان از اینکه کاربران دقیقاً به آنچه ما می خواهیم به آنها نشان دهیم، نگاه می کنند، کلیدی است. به این فکر کنید که وقتی صفحه تنظیم می شود، تصویر چگونه مقیاس می شود.
4. همیشه تنظیم کنید جهت یابی به فضای صفحه نمایش موجود برای مثال، نسخه های موبایل نیازی به نمایش کل منو روی صفحه ندارند. در عوض، از منوی همبرگر استفاده کنید.

2. چگونه عناصر طراحی را پاسخگو کنیم

ما با نسخه دسکتاپ طراحی صفحه فرود خود شروع می کنیم. این فرمت به ما امکان می دهد تمام عناصری را که باید برای پیمایش اصلی خود در نظر بگیریم نمایش دهیم. در این مورد، من قالب را با نیازهای طراحی خودم تنظیم کردم.

سعی کنید عرض قاب خود را تنظیم کنید و به نحوه حرکت همه چیز توجه کنید. در طراحی واکنشگرا، عناصر باید به روشی منسجم توزیع شوند. این چیزی است که ما می خواهیم با این آموزش برطرف کنیم.

مرحله 1: محدودیت ها را به نوار ناوبری خود اضافه کنید

بیایید با تنظیم محدودیت ها در نوار ناوبری خود شروع کنیم. ما می‌خواهیم همه عناصرمان در موقعیت خود باقی بمانند، حتی وقتی صفحه نمایش کوچک یا بزرگ می‌شود.

با حذف گروه بندی همه عناصر نوار پیمایش خود شروع کنید. لوگوی خود را انتخاب کنید و در منوی سمت راست به Constraints بروید. مطمئن شوید که محدودیت های شما روی آن تنظیم شده است بالا و ترک کرد.

حالا بیایید همین کار را با منوی وسط انجام دهیم. ما می خواهیم محدودیت ها را برای مرکز و بالا.

در نهایت، ما همین کار را با دکمه ثبت نام خود انجام خواهیم داد. آن را انتخاب کنید و محدودیت ها را روی آن تنظیم کنید بالا و درست.

حالا آن را تست کنید! عرض قاب خود را تنظیم کنید و متوجه خواهید شد که همه چیز در جای خود باقی می ماند.

مرحله 2: محدودیت هایی را به پس زمینه خود اضافه کنید

اگر رنگ‌های پس‌زمینه یا تصاویری دارید، می‌خواهید برای آن‌ها نیز محدودیت‌هایی تنظیم کنید.

در این مورد، ما یک نوار پس زمینه در پشت منوی خود داریم. ما می خواهیم آن را به عنوان قرارداد با تمام عناصر منو گسترش دهیم. آن را انتخاب کنید و محدودیت ها را روی آن تنظیم کنید چپ و راست. باید چیزی شبیه این باشد:

مرحله 3: محدودیت ها و طرح بندی خودکار را به بخش قهرمان خود اضافه کنید

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

ابتدا، بیایید محتوای قهرمان خود را حذف کنیم تا بتوانیم عناصر را به صورت جداگانه دستکاری کنیم. اکنون زیر متن، عنوان و دکمه ها را انتخاب کنید. سپس فشار دهید Shift + A برای فعال کردن ویژگی Auto Layout و حفظ فاصله بین آنها با تنظیم صفحه.

من نام لایه را به “محتوای قهرمان” تغییر دادم و ویژگی تغییر اندازه را روی آن تنظیم کردم عرض ثابت.

به این ترتیب می توانیم محدودیت های خود را تنظیم کنیم مقیاس و بالا.

ما تقریبا اینجا هستیم. برای اینکه این بخش کامل شود، باید عنوان را برای تنظیم تنظیم کنیم. پس بیایید روی عنوان دوبار کلیک کنیم تا آن را انتخاب کنیم. اکنون، ویژگی تغییر اندازه افقی را به تنظیم کنید ظرف را پر کنید.

اکنون آن را با تنظیم قاب خود آزمایش کنید تا مطمئن شوید که کار می کند.

مرحله 4: محدودیت ها را به تصویر اضافه کنید

این آخرین مرحله است، بنابراین ما طراحی کاملا واکنشگرا در Figma داریم. بیایید تصاویر را برای تنظیم با فرمت صفحه نمایش خود تنظیم کنیم.

ابتدا مطمئن شوید که تصاویر گروه بندی نشده اند. سپس، همه آنها را انتخاب کرده و Constraints را تنظیم کنید مقیاس و بالا.

مطمئن شوید که تصاویرتان روی «پر» تنظیم شده‌اند تا وقتی اندازه صفحه را تنظیم می‌کنید کشیده نشوند.

آن را تست کنید تا مطمئن شوید کار می کند. گوشه های فریم خود را حرکت دهید تا ببینید نمونه اولیه پاسخگو Figma چگونه کار می کند!

3. برای تبلت و موبایل تنظیم کنید

اکنون یک نمونه اولیه پاسخگو Figma برای نسخه دسکتاپ خود داریم. بیایید به سراغ تبلت و موبایل برویم.

با کپی کردن فشار دادن فریم شروع کنید Command + D. نام قاب را به “تبلت” تغییر دهید و عرض را روی 820 پیکسل تنظیم کنید تا بتوانیم طراحی خود را برای iPad Air تنظیم کنیم.

متوجه خواهید شد که برخی از عناصر در نوار پیمایش با هم همپوشانی دارند. پس بیایید آن را درست کنیم.

این نکته ای است که ما به عنوان طراح می توانیم با باقی گذاشتن تنها عناصر ضروری روی صفحه، به خصوص در هنگام حرکت از یک دستگاه کوچکتر مانند تبلت، UX خود را بهینه کنیم. در این صورت، ما منو و CTA خود را حذف می کنیم و آن را برای نماد منوی همبرگر جایگزین می کنیم.

رفتن به منابع در نوار بالا و جستجوی یک کتابخانه نماد در Plugins. من از Iconoir Icon Library استفاده خواهم کرد.

سپس، نمادهای “منو” را جستجو کنید و آیکون مورد علاقه خود را به قاب خود بکشید.

نماد را با طرح خود تنظیم کنید، با لوگوی خود هماهنگ کنید و محدودیت ها را تنظیم کنید درست و بالا.

طرح خود را آزمایش کنید و در صورت لزوم، عرض محتوا و تصاویر قهرمان خود را تنظیم کنید تا به اندازه صفحه نمایش داده شوند.

اکنون، بیایید Frame رایانه لوحی خود را برای کار بر روی نسخه تلفن همراه خود کپی کنیم. مطبوعات Command + D و نام فریم را به اسمارتفون تغییر دهید. برای شبیه سازی صفحه نمایش آیفون 12، عرض را روی 390 پیکسل تنظیم کنید.

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

و بس! شما آماده اید و آماده ارائه طرح پاسخگو Figma خود به مشتری خود هستید.

الگوهای وب سایت Figma در Envato Elements

خبر خوب برای طراحان امروزه این است که ما مجبور نیستیم همه چیز را از ابتدا بسازیم. با کار کردن می توانید یک قدم جلوتر بروید قالب های وب سایت برای ایجاد طراحی ریسپانسیو ما در Figma.

به کتابخانه ما با بیش از 18 هزار گزینه برای انتخاب شما نگاهی بیندازید!

قالب‌های Premium Figma با در نظر گرفتن بهترین شیوه‌های طراحی UX/UI ایجاد می‌شوند. در زمان خود صرفه جویی کنید و روی محتوای خود تمرکز کنید. یکی از چندین مورد را امتحان کنید قالب های وب سایت Figma موجود در Envato Elements!

منابع و آموزش های بیشتر Figma

اکنون می‌دانید که چگونه یک طرح واکنش‌گرا Figma ایجاد کنید تا به مشتریان خود ارائه دهید. برخی از آموزش ها و منابع Figma ما را بررسی کنید تا مهارت های خود را به سطح بعدی برسانید:

شما آماده اید!

برای کار بر روی طراحی واکنش گرا بعدی خود در Figma آماده هستید؟ امیدواریم نکات و ترفندهای مفیدی را برای استفاده در هر نمونه اولیه پاسخگو Figma که با آن کار می کنید، پیدا کرده باشید. تمام منابع الهام بخش و خلاق مورد نیاز خود را پیدا کنید عناصر Envato.