
در آموزش کامپوننت ها در Adobe Xd و ساخت یک دکمه برای همه جا میخواهیم با استفاده از کامپوننت ها دکمه ای را به عنوان نمونه درست می کنیم که براحتی بتوان در سرتاسر طراحی رابط کاربری از آن استفاده کرد.
کامپوننت ها را شما یک پدر در نظر بگیرید که تعدادی فرزند دارد. هر کدام از فرزندان به تنهایی می توانند ویژگی های منحصر بفردی داشته باشند، و اگر شما خواستید همه ی فرزندان یک ویژگی مشترک را داشته باشند باید آن تغییر را به پدر اعمال کنید.
کامپوننت ویژگی است که در برنامه نویسی سالهاست وجود دارد و مفاهیمی چون شی گرایی و ارث بری نیز برای آن تعریف می شود، بدین صورت که در برنامه نویسی نیز شما یک تکه کد اصلی را می نویسید و سپس در قسمت های مختلف نرم افزارتان از آن استفاده می کنید.
پس بصورت خلاصه در این فیلم آموزشی می خواهیم یک دکمه در Adobe XD طراحی کنیم و آن را برای همه جای طرح استفاده کنیم. بصورت کلی نیاز نباشد که هربار اندازه های آن را تنظیم کنیم و بصورت اتوماتیک این کار خودش انجام شود.
مزیت این ویژگی در این است که شما بعد از تغییر متن دکمه دیگر نیازی نیست که در هربار جای متن را در دکمه تنظیم کنید و یا اینکه اندازه دکمه را با توجه به متن تنظیم کنید و همه ی این موارد بصورت اتوماتیک تغییر پیدا میکنند.
در آموزش کامپوننت ها در Adobe Xd و ساخت یک دکمه برای همه جا چه چیزهایی یاد می گیریم؟
در این فیلم آموزشی من یک مثال از کامپوننت ها و نحوه ایجاد آن ها را روی یک دکمه توضیح می دهم، با این وجود شما قادر هستید از ویژگی کامپوننت ها و Content-Aware Layout برای هر چیزی در Adobe Xd استفاده کنید.

کامپوننت ها در Adobe Xd و ساخت یک دکمه برای همه جا
قسمت های دیگر آموزش Adobe Xd را در کجا ببینیم؟
شما می توانید تمام قسمت های آموزش Adobe Xd را در بخش آموزش Adobe Xd وبلاگ و یا اینکه در لیست پخش آن در یوتیوب ببینید.
همچنین در آخر همین پست تعدادی از لینک های مرتبط آموزش ادوبی ایکس دی نیز قرار داده شده است.
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – 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 ) را از صفر از کجا یاد بگیرم؟
همچنین برای اینکه قسمت های بعدی آموزش Adobe Xd و دیگر آموزش های پایه طراحی و دیزاین را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش کامپوننت ها و ساخت یک دکمه برای همه جا در Adobe Xd چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در طراحی و دیزاین علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.
لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( 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- قسمت اول
10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری
آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
چطور طرح رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟
لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
اصطلاحات طراحی رابط کاربری – بخش اول: رنگها
آموزش UI/UX : اصول طراحی رابط کاربری برای تلویزیون