در این آموزش قصد دارم نحوه ساخت پروتوتایپ در فیگما رو از صفر و بصورت جامع به شما آموزش دهم.
پروتوتایپ مثل یک روح هست که شما اون در قالب وایرفریم یا طرح یو ای خودتون می دمید تا اون طرح زنده بشه. در واقع شما با پروتوتایپ می آید اینتراکشن ها یا حرکت های تعاملی مختلفی به طرحتون اضافه می کنید.
در نتیجه به عنوان مثال زمانی که کاربر بر روی یک دکمه کلیک کرد وارد صفحه دیگه بشود و یا اینکه اگر بخش به خصوصی از صفحه را درگ کرد، به صفحه دوم آنبوردینگی که طراحی کردید منتقل بشه و حرکات و اینتر اکشن های مختلف دیگه ای که در این ابزار وجود دارد.
شما هم از پروتوتایپ در طراحی یوای و هم در طراحی یوایکس برای اهداف مختلف استفاده می کنید. به عنوان مثال یک طراح یوایکس می تونه با ساخت پروتوتایپ وایرفریمی که ایجاد کرده، نحوه ی تعامل کاربر با بخشی از اپلیکیشن رو نشون بده.
همچنین در این آموزش به ویژگی جدید multiple flow در فیگما نیز می پردازم و در آخر این آموزش پیشنهاد ویژه ای برای شما دارم، پس تا آخر این آموزش با من همراه باشید.
درآموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows چه مواردی بررسی می شود؟
محتوای آموزش ساخت پروتوتایپ در فیگما – Figma:
- 00:42 | پروتوتایپ یا Prototype چیست؟
- 01:12 | مثالی از کاربرد پروتوتایپ در طراحی UI/UX
- 01:49 | نحوه استفاده از پروتوتایپ در طراحی UI و UX
- 03:05 | نحوه دسترسی به بخش پروتوتایپ در فیگما
- 03:19 | نحوه نمایش پروتوتایپ در قالب دستگاه های موبایلی مختلف
- 03:35 | تغییر صفحه شروع نمایش پروتوتایپ در فیگما
- 03:52 | اجرای پروتوتایپ در فیگما
- 04:15 | تغییر رنگ پس زمینه اطراف پروتوتایپ در فیگما
- 05:08 | نحوه نمایش پروتوتایپ گوشی فیگما در حالت های افقی و عمودی
- 06:35 | دسترسی به تنظیمات ساخت اینتراکشن و یا تنظیمات کلی پروتوتایپ در فیگما
- 07:00 | تنظیمات و ساخت اولین اینتراکشن پروتوتایپ در فیگما Figma
- 09:19 | نحوه ساخت اینتراکشن بازگشتی در فیگما Figma
- 11:12 | نحوه ساخت اینتراکشن Tap در فیگما
- 12:34 | نحوه دیدن اینتراکشن هایی که در پروتوتایپ فیگما تعریف شده اند
- 13:32 | معرفی دیگر اینتراکشن ها و حالت های ساخت پروتوتایپ در فیگما
- 14:00 | نحوه باز کردن لینک سایت در پروتوتایپ فیگما
- 15:07 | نحوه ساخت اینتراکشن پروتوتایپ با فشردن دکمه های کیبورد در فیگما
- 16:52 | معرفی اینتراکشن After Delay در ساخت پروتوتایپ فیگما
- 17:26 | ساخت انیمیشن با پروتوتایپ در فیگما
- 18:28 | کاربرد اینتراکشن Smart Animate در فیگما
- 19:47 | معرفی و نحوه کار با Multiple Flows در فیگما
- 21:40 | نحوه ساخت چندین حالت شروع پروتوتایپ در فیگما
- 22:22 | نحوه پاک کردن اینتراکشن ها در فیگما Figma
آموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows
قسمت های دیگر آموزش Figma را در کجا ببینیم؟
شما می توانید تمام قسمت های آموزش Figma را در بخش آموزش Figma وبلاگ و یا اینکه در لیست پخش آن در یوتیوب ببینید.
همچنین در آخر همین پست تعدادی از لینک های مرتبط آموزش فیگما نیز قرار داده شده است.
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – UI Design
- آموزش طراحی تجربه کاربری – UX Design
- آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
- آموزش طراحی گرافیک با فتوشاپ
این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.
کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.
گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری
این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.
عضویت در گروه تلگرام UIXFamily
کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف
شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:
عضویت در کانال تلگرام AsteriXarts
آموزش های اختصاصی طراحی در اینستاگرام
همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:
دنبال کردن AsteriXarts در اینستاگرام
خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی
بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید.
برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت dexigner news عضو خبرنامه شوید.
عضویت در خبرنامه هفتگی دیزاین Dexigner News
[newsletter-pack newsletter=’8661′]
طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟
در آموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows شما انواع روش هایی که می توانید اینتراکشن های مختلفی برای حرکت دادن و زنده کردن طرح یا وایرفریم خود در طراحی UI/UX را یاد گرفتید و اکنون می توانید از انواع مختلف پروتوتایپ را در فیگما ایجاد کنید.
در صورتی که هنوز با این نرم افزار آشنا نیستید و میخواهید انگیزه بیشتری برای یادگیری آن داشته باشید می توانید از طریق لینک زیر در کمتر از 30 دقیقه با ویژگی های مهم Figma – فیگما بوسیله طراحی یک اپلیکیشن سفارش غذا آشنا شوید.
آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی
همچنین برای اینکه قسمت های بعدی آموزش فیگما را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در فیگما علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.
لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:
آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی
آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول
آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم
آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma
10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول
آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم
آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول
آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم
آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم
آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم
آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم
آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم
معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول
آموزش Adobe Xd - یک دکمه برای همه جا در طراحی رابط کاربری
10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری
آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
چطور طرح رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟
لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
صطلاحات طراحی رابط کاربری – بخش اول: رنگها
آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون
