آموزش adobe xd درگ (drag) کردن

آموزش Adobe XD
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/04/15
آموزش Adobe XD

درود به همراهان بیت بنگ! در این پست با آموزش adobe xd درگ (drag) کردن در خدمت شما هستیم.

بعضی مواقع در وب سایت یا اپلیکیشنی که طراحی می کنیم لازم است تا آبجکتی را با استفاده از موس drag کنیم!

درگ (Drag) کردن به چه معناست؟

حتما پیش از این این کار را تجربه کرده اید!

وقتی موس را روی یک آبجکت برده و با کلیک کردن و همزمان کشیدن موس به اطراف آبجکتی را حرکت می دهیم در واقع آن را drag کردیم.


در این آموزش قرار است drag کردن در adobe xd را چگونه بیاموزیم ؟!

در این جا با یک مثال بسیار ساده که طراحی اپلیکیشن ToDo List است این کار را انجام می دهیم.

این نوع اپلیکیشن لیست کار هایی که قرار است انجام دهیم را برای ما نگهداری می کند.

می توانیم پس از انجام هر کدام از کار ها آن را از لیست حذف کنیم.

نمونه نهایی

اگر فیلم بازی تاج و تخت را دیده باشید با این لیست آشنا هستید 🙂

قدم اول؛ ایجاد یک پروژه جدید در Adobe xd

مثل همیشه من artboard دلخواه خودم یعنی iPhone/X/Xs/11 Pro را انتخاب می کنم.

شما می توانید به دلخواه هر آرت بوردی که خواستید انتخاب کنید.

آموزش adobe xd - ایجاد پروژه

پس از ایجاد پروژه جدید رنگ پس زمینه آرت بورد را به رنگ 252525# تغییر می دهیم.

آموزش adobe xd

قدم دوم؛ طراحی هدر اپلیکیشن در adobe xd

برای طراحی هدر اپلیکیشن ابتدا پلاگین Icons 4 Design را نصب کنید.

در این آموزش می توانید چگونگی نصب پلاگین در Adobe xd را بیاموزید.

سپس با استفاده از ابزار چهار ضلعی یک مستطیل ایجاد کنید وآن را بالای صفحه قرار دهید.

border آن را حذف کرده و رنگ پس زمینه آن را با استفاده از Gradient در Adobe xd به شکل زیر در آورید.

آموزش adobe xd

همچنین برای موج دار کردن قسمت پایین مستطیل دو بار روی آن کلیک کرده و نقاط ضلع پایین آن را کنترل و تنظیم کنید.

قدم سوم؛ طراح آیتم های لیست در Adobe xd

حالا زمان است تا لیست کار ها را طراحی کنیم.

در این جا هدف یاد گیری Drag کردن در adobe xd است بنابراین کارت های وظایف را خیلی ساده طراحی می کنیم.

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

آموزش adobe xd

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

همچنین فراموش نکنید گردی گوشه های سمت راست آن را به اندازه باکس اصلی تنظیم کنید!

رنگ پس زمینه آن را به E33805 تغییر دهید.

آموزش adobe xd

حالا با استفاده از پلاگین Icons 4 Design آیکن user را جستجو کرده و به دلخواه یک آی کن را به آرت بورد اضاف کنید.

یک آیکن دیگر نیز با نام flag در سمت راست قرار می دهیم و Opacity آن را کم می کنیم.

می توانید نام افراد لیست آریا را به هر آیتم اضافه کرده و فونت و رنگ دلخواه خود را اعمال کنید.

آموزش adobe xd

قدم چهارم؛ طراحی حالت Drag در Adobe xd

برای حالتی که آیتم را به سمت چپ کشیده ایم باید آرت بورد جداگانه ای در نظر بگیریم.

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

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

سپس همین طور که در آرت بورد دوم هستید یک آیکن ضربدر روی مربع قرمر قرار دهید.

برای این کار در پلاگین Icons 4 Design کلمه times را جستجو کنید.

قدم آخر؛ تنظیمات محیط Prototype در Adobe xd

پیش از ورود به محیط Prototype آیتم و محتویان آن را با CTRL + G در یک گروه قرار دهید.

به محیط Prototype می رویم و برای آیتمی که ایجاد کردیم (در آرت بورد اول) یک interAction ایجاد می کنیم.

مانند تصویر زیر اتصال گر را از آیتم به آرت بورد دوم وصل کنید.

تنظیمات INTERACTION در پنل سمت راست را نیز مانند تصویر تغییر دهید.

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

می توانید آیتم های لیست را اضاف کنید تا یک لیست کامل داشته باشید!

امیدوارم از آموزش adobe xd درگ (drag) کردن لذت برده باشید.

اگر پرسشی دارید می توانید از طریق دیدگاه ها آن را بیان کنید.

شاد و پیروز باشید.