آموزش فیگما - ساخت کامپوننت های اینتراکتیو در Figma

[caption id="attachment_10446" align="aligncenter" width="1200"] آموزش کامپوننت های اینتراکتیو فیگما[/caption] اخیرا فیگما ویژگی کامپوننت های اینتراکتیو را از حالت آزمایشی خارج کرد و الان همه می تونن از آن در ساخت پروتوتایپ های پیشرفته تر از آن استفاده کنند. همانطور که در آموزش جامع ساخت پروتوتایپ در فیگما دیدید ( و یا اینکه خواهید دید ) در آنجا فقط ما می تونستیم یک سری اینتراکشن برای جا به جایی بین صفحات مختلف طرح هایمان استفاده کنیم . حالا با قابلیت اینتراکتیو کامپوننت شما می توانید بدون اینکه بخواهید بین صفحات مختلف جا به جا شوید به عنوان مثال State یا وضعیتهای مختلف یک دکمه یا یک چک باکس رو ایجاد کنید اینها را در یک مثال کامل در ادامه به شما نشان می دهم. پس اگر میخواید در پروتوتایپ هایی که در فیگما می سازید برای کامپوننت های مختلفی که در صفحه دارید هم یک اینتراکشن تعریف کنید و به عنوان مثال حالت های مختلف دکمه ها رو نشان بدهید ، با من در این آموزش همراه باشید.   [lwptoc]  

در آموزش فیگما - ساخت کامپوننت های اینتراکتیو در Figma چه مواردی معرفی می شود؟

از جمله مواردی که در این فیلم به آن می پردازم:

1. 00:50 | کامپوننت های اینتراکتیو در فیگما چی هستند؟
2. 01:40 | چطور کامپوننت های اینتراکتیو را در فیگما بسازیم؟
3. 03:55 | آیا کامپوننت های اینتراکتیو چند حالتی در فیگما داریم؟
4. 05:33 | ساخت یک نمونه پروتوتایپ با کامپوننت های اینتراکتیو در فیگما

     

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

https://www.youtube.com/watch?v=DO2GHU3wCJg

آموزش فیگما - ساخت کامپوننت های اینتراکتیو در Figma

عضویت در کانال یوتوب من: Youtube

 

آموزش های مرتبط ذکر شده در فیلم آموزشی فیگما

01 - آموزش ساخت پروتوتایپ و Multiple Flows در Figma

02- آموزش Figma - طراحی یک عنصر با بینهایت حالت با Variants

3- آموزش جامع Adobe Xd - ساخت پروتوتایپ - قسمت ششم

 

قسمت های دیگر آموزش فیگما را در کجا ببینیم؟

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

چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟

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

1. آموزش طراحی رابط کاربری - UI Design
2. آموزش طراحی تجربه کاربری - UX Design
3. آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
4. آموزش طراحی گرافیک با فتوشاپ 

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

ثبت نام در دوره های آموزشی طراحی  UI/UX از AsteriXarts

   

گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری

این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید. عضویت در گروه تلگرام UIXFamily    

کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف

شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید: عضویت در کانال تلگرام AsteriXarts    

آموزش های اختصاصی طراحی در اینستاگرام

همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و ... دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید: دنبال کردن AsteriXarts در اینستاگرام      

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

بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید. برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت dexigner news عضو خبرنامه شوید. عضویت در خبرنامه هفتگی دیزاین Dexigner News [newsletter-pack newsletter='8661']  

طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟

شما می توانید با عضویت در کانال یوتیوب من آموزش های دیگر طراحی رابط و تجربه کاربری ( UI / UX ) را دنبال و یاد بگیرید. عضویت در کانال آموزشی یوتیوب : Youtube.com/AsteriXarts اگر سوالی در مورد طراحی رابط کاربری UI داشتید، می توانید در قسمت نظرات بپرسید تا به آن ها جواب دهم.

   

نمونه کارهای طراحی رابط و تجربه کاربری ( UI/UX )

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

1. Dribbble.com/iHMahmoodi
2. Behance.net/iHMahmoodi
3. Instagram.com/iHMahmoodi

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

آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی

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

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

عضویت در کانال آموزشی: Youtube.com/AsteriXarts

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

   

لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:

آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی آموزش جامع Figma - کار با ابزارها و محیط فیگما 2021 - قسمت اول آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم آموزش فیگما - Auto Layout و طراحی ریسپانسیو با آن در Figma 10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma 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 : اصول طراحی رابط کاربری برای تلویزیون