به دوره آموزش Adobe XD خوش آمدید. در این دوره قرار است ابتدا مبانی و اصول کار با نرم افزار Adobe XD را مورد بررسی قرار دهیم و سپس تکنیک های پیشرفته کار با این نرم افزار را آموزش خواهم داد.

Adobe XD چیست؟

XD مخفف Experience Design است. این نرم افزار به شما کمک می کند طرح اولیه ای (Prototype) از نرم افزار ویندوزی، اپ اندرویدی یا آی او اس، وب سایت یا مواردی از این دست را طراحی کنید. این امر به شما کمک می کند دید خوبی نسبت به آن چیزی که قرار است پیاده سازی کنید پیدا کنید.

اگر خاطرتان باشد، قبل از XD نرم افزار Muse محبوب دل Adobe بود. ولی ایده Muse از همان ابتدا محکوم به شکست بود. در واقع امسال که سال 1399 است، آخرین سالی است که شرکت Adobe از Muse پشتیبانی می کند و در واقع پشتیبانی آن به اتمام رسیده. در عوض Adobe با گرفتن تجربه در شکست Muse، به موفقیت بزرگی به نام XD رسیده است.

چرا نیاز به یک Prototype یا همان طرح اولیه داریم؟

معمولا زمانی که یک مشتری به شما مراجعه می کند و درخواست فرضا وب سایتی می کند، بهتر است ابتدا یک طرح اولیه با استفاده از XD طراحی شده و به مشتری نشان داده شود. به احتمال زیاد مشتری درخواست تغییراتی از جمله رنگ، فونت، مکان المان ها، تصاویر و … خواهد داشت. بنابراین لازم نیست شما سایت را با زحمت فراوان طراحی کنید و سپس مشتری از شما بخواهد که تغییراتی اعمال کنید. بلکه ابتدا طرح اولیه ای از وب سایت را با استفاده از XD و با سرعت پیاده سازی می کنید و پس از تایید مشتری، شروع به پیاده سازی وب سایت با استفاده از HTML, CSS و جاوااسکریپت خواهید کرد.

نصب XD و باز هم تحریم

برای نصب XD دو راه پیش روی شماست. یا در یکی از سایت های دانلود فارسی، XD را دانلود و نصب کنید. این روش را پیشنهاد نمی کنم. چرا که بعد از نصب، قسمت هایی از برنامه مثل پلاگین ها به درستی کار نمی کند و به شما خطایی مشابه زیر می دهد:

روش دوم این است که شِکَن را بر روی سیستم خود فعال کنید. دوستانی که دوره اندروید من را استفاده کرده اند با شکن آشنایی کامل دارند. ولی برای آن دسته از کسانی که با شکن آشنایی ندارند، توضیح کوتاهی می دهم.
وارد سایت shecan.ir شوید. سپس بر اساس دستورالعملی که داخل سایت است، دو آی پی به شما داده می شود که باید بر روی DNS سیستم تان تنظیم کنید. اگر این کار را به درستی انجام داده باشید، یک نوار سبز رنگ داخل سایت شکن به شما نمایش داده می شود. در نظر داشته باشید که در این مرحله اگر VPN دارید آن را غیرفعال کنید.
نکته اینکه با VPN وارد سایت Adobe نشوید. بهتر است از شکن استفاده کنید.
بعد از فعال کردن شکن، وارد سایت letsxd.com شوید. فایل نصب (Installer) مربوط به XD را دانلود و نصب را شروع کنید، به همین راحتی!

نمونه کار Adobe XD

شاید بعد از نصب XD و باز کردن برنامه، در اولین نگاه فکر کنید که این برنامه خیلی ساده است و توانایی های فتوشاپ را در طراحی طرح اولیه ندارد.

ولی در اینجا به شما چند نمونه کار Adobe XD را نشان می دهم که پی به قدرت این نرم افزار ببرید. یکی از امکانات فوق العاده این نرم افزار، Auto-Animate است. در واقع این نرم افزار امکانات قدرتمندی برای کار با انیمیشن به شما خواهد داد که در زیر چند نمونه از آن آمده است.

برای مشاهده نسخه ویدیویی این آموزش، می توانید به یوتیوب کد آکادمی مراجعه کنید.