آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma

در این آموزش فیگما – Figma قصد دارم با استفاده از ویژگی Auto Layout یک جدول ریسپانسیو طراحی کنم. ویژگی Auto Layout در فیگما این امکان را به ما می دهد که بتوانیم UI هایی رو طراحی بکنیم که بسته به شرایط مختلف از جمله تغییر سایز اسکرین یا صفحه نمایش بتونن خودشون رو تغییر شکل بدن و به عبارتی Auto Layout به ما کمک می کنه که بتونیم طرحمون رو راحت تر ریسپانسیو کنیم. بعد از دیدن این آموزش شما شما دیگه برای ساخت یک دکمه در فیگما نمی آیید یک Rectengle درست کنید و یک تکست در داخل آن بنویسید ، بلکه با فریم ها همه ی دکمه های خود را درست می کنید. درست شنید اساس و پایه ی Auto Layout در فیگما بر اساس فریم هاست و در نتیجه هر چیزی رو که شما تبدیل به Auto Layout کنید در واقع دارید آن را در داخل یک فریم قرار می دهید.    

در آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma چه مواردی بررسی می شود؟

محتوای این فیلم آموزشی فیگما Figma:

1. 00:19 | Auto Layout در فیگما چیست؟
2. 01:29 | آموزش کار با Auto Layout در فیگما
3. 01:51 | ساخت Auto Layout از هر عنصری در فیگما
4. 03:56 | اضافه کردم آیکان به فریم Auto Layout
5. 04:25 | ادامه آموزش تنظیمات مختلف Auto Layout در فیگما
6. 16:00 | نکاتی در مورد Auto Layout و طراحی ریسپانسیو

 

آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma

 

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

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

اگر می‌خواهید این مسیر را حرفه‌ای ادامه دهید

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

مشاهده مسترکلاس Product Design Pro X

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

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

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

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

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

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

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

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

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

        در آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma شما روش هایی را یاد گرفتید که کمک می کند خیلی سریعتر بتوانید طرح های ریسپانسیو و منعطف را در فیگما طراحی کنید. در صورتی که هنوز با این نرم افزار آشنا نیستید و میخواهید انگیزه بیشتری برای یادگیری آن داشته باشید می توانید از طریق لینک زیر در کمتر از 30 دقیقه با ویژگی های مهم Figma – فیگما بوسیله طراحی یک اپلیکیشن سفارش غذا آشنا شوید.

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

    همچنین برای اینکه قسمت های بعدی آموزش فیگما را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.     نظر شما در مورد آموزش فیگما – Auto Layout و طراحی ریسپانسیو با آن در Figma چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در فیگما علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.  

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

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

برای ادامه یادگیری: آموزش Variants در Figma و دوره UI Design