اگه جزو طراحانی باشید که یکم برنامه نویسی بلد هستن یا برعکس جزو برنامه نویس هایی باشید که یکم طراحی بلد هستن و در عین حال برای کارهای مربوط به طراحی از Adobe XD استفاده میکنن حتما میدونید که این برنامه به صورت رایگان هست و تعدادی هم پلاگین و افزونه برای افزایش راحتی استفادهاز این برنامه نوشته شده.
حالا ما تو این مقاله میخوایم یکم به API که شرکت Adobe برای نوشتن افزونه معرفی کرده کار کنیم و یک پلاگین خیلی کوچیک رو با هم بنویسیم و در آخر هم چندتا از افزونه هایی که خودم باهاشون کار میکنم و راضی هستم رو معرفی کنم بهتون تا شما هم ازشون استفاده کنید
برای اینکه بتونید یک افزونه برای Adobe XD بنویسید با دو تا مورد نیاز هست :
بعد از اون برای شروع کار لازمه تا به آدرس زیر I/O Console خودتون در وب سایت Adobe برید و پلاگین خودتون رو ثبت کنید برای اینکار هم کافیه وارد اکانت خودتون بشید و در لینک بالا بر روی دکمه Create Plugin کلیک کنید و اسم افزونه خودتون رو وارد کنید.
بعد از اون وقتی افزونه رو ساختید به صورت خودکار به صفحه افزونه هدایت میشید که در اونجا میتونید یک پروژه خیلی کوچیک رو که برای افزونه شما تولید شده دانلود کنید. حالا برای استفاده از پروژه‌ای که دانلود کردید در محیط Adobe اگر از سیستم عامل Windowsاستفاده میکنید باید به مسیر زیر برید و پروژه رو در اون قسمت از حالت فشرده خارج کنید :
C:\Users\%USERNAME%\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\
ام اگه از سیستم Mac استفاده میکنید باید به مسیر زیر برید :
~/Library/Application\ Support/Adobe/Adobe\ XD/
با اضافه کردن پروژه خودتون در این مسیر و سپس اجرای XD میتونید به بخش Plugins برید و افزونه خودتون رو که اضافه شده مشاهده کنید. اما بهتره یه نگاهی به ساختار اولیه افزونه داشته باشیم تا بدونیم دقیقا به چه شکلی باید عمل کنیم.
وقتی به پوشه افزونه خودتون دقت کنید در حالت اولیه ما یک فولدر Images داریم که شامل آیکن های مرتبط به افزونه هستن که شما میتونید اون رو با تصویر دلخواه خودتون و در سایزهایی که موجود هستن جایگزین کنید اما علاوه بر این افزونه ما شامل یک فایل main.js و یک فایل manifest.json میشه که فایل اول در واقع فایل اصلی افزونه یا به عبارت دیگه منطق اصلی افزونه شماست و فایل دوم تنها شامل اطلاعات و تنظیمات اصلی خود افزونه میشه.
بیاید با هم یک نگاه دقیق‌تر به این فایل داشته باشیم تا بدونیم اگه نیاز به تغییر در این بخش بود دقیقا باید چه کاری انجام بدیم. برای اینکه خوانایی این بخش بیشتر باشه من یک تصویر از محتوای فایل رو در این بخش قرار میدم و جلوی هر خط توضیحات مربوط بهش رو مینویسم و در ادامه بخش‌ها مهم‌تر مثل ایجاد منو و Hotkey رو به صورت مجزا توضیح میدم.
فایل بالا تقریبا یک فایل کامل با کلیه تنظیمات مربوط به این فایل میباشد که شما میتوانید مقادیر هر فیلد رو با مقادیر دلخواه خود جایگزین نمایید. اما همانطور که در تصویر بالا مشاهده میکنید شما می‌بایست برای هر آپدیتی که برای افزونه خود درنظر میگیرید علاوه برا تغییر نسخه افزون یک سری توضیحات درباره آپدیت جدید نیز به کاربران ارائه کنید تا کاربران از تغییرات احتمالی افزونه شما با خبر شوند.
همچنین شما میتوانید برای افزونه خود Hotkey های مختلف تعریف کنید تا عملکردهای مختلف افزونه شما از طریق صفحه‌کلید نیز در دسترس کابران باشد اما باید به این نکته توجه داشته باشید که ممکن است افزونه‌های دیگر نیز از این Hotkeyها در افزونه خود استفاده کرده باشن که در این صورت الویت تخصیص این Hotkey به افزونه‌ای که زودتر توسط کاربر نصب شده باشد خواهد رسید. اما جای نگرانی نیست چرا که افزونه شما به خوبی کار خواهد کرد و این مورد باعث نقص در عملکرد افزونه نخواهد شد.
تقریبا همه برنامه‌نویسا موقع برنامه نویسی برای اینکه نتایج کار خودشون رو ببین از Print استفاده میکنن حالا این مورد در زبون های مختلف دستورات متفاوتی داره اما در زبان جاوا اسکریپت معمولا از Console.log استفاده میکنن اما خب حتما براتون سوال پیش میاد که خب حالا به فرض ما ازش داخل افزونه خودمون استفاده کردیم کجا میتونیم خروجی رو ببینیم ؟
باید بهتون بگم که Adobe XD یه محیط تست و رفع باگ برای افزونه‌های خودش فراخم کرده که از طریق منو زیر خیلی راحت میتونید بهش دسترسی داشته باشید :
Plugins > Development > Developer Console
با باز کردن این بخش شما میتوانید تمام Logهای مربوط به افزونه‌های نصب شده روی سیستم خودتون رو مشاهده کنید و درهنگام برنامه‌نویسی ازش برای تست و رفع باگ استفاده کنید.
تو این مقاله سعی کردم یه توضیح مختصر درباره شروع نوشت یک افزونه کوچیک برای Adobe XD آشناتون کنم در مقالات بعدی سعی میکنم تا بیشتر وارد بحث برنامه نویسی بشیم و API هایی که برای نوشت یک افزونه در اختیار داریم و باهم بررسی کنیم.
اما اگه خودتون علاقه مند هستید هر چه زودتر وارد بخش برنامه‌نویسی بشید و یا به نوشتن یک افزونه فکر میکنید اما نمیدونید از کجا میتونید بیشتر در موردش بخونید من چندتا منبع معرفی میکنم تا ازش استفاده کنید:
