ساخت یک افزونه برای Adobe XD

عکس از صفحه رسمی Adobe XD‌ در توئیتراگه جزو طراحانی باشید که یکم برنامه نویسی بلد هستن یا برعکس جزو برنامه نویس هایی باشید که یکم طراحی بلد هستن و در عین حال برای کارهای مربوط به طراحی از Adobe XD استفاده میکنن حتما میدونید که این برنامه به صورت رایگان هست و تعدادی هم پلاگین و افزونه برای افزایش راحتی استفادهاز این برنامه نوشته شده.حالا ما تو این مقاله میخوایم یکم به API که شرکت Adobe برای نوشتن افزونه معرفی کرده کار کنیم و یک پلاگین خیلی کوچیک رو با هم بنویسیم و در آخر هم چندتا از افزونه هایی که خودم باهاشون کار میکنم و راضی هستم رو معرفی کنم بهتون تا شما هم ازشون استفاده کنیدمقدمات لازم برای شروعبرای اینکه بتونید یک افزونه برای Adobe XD بنویسید با دو تا مورد نیاز هست :دانش اولیه در مورد برنامه نویسی وب خصوصا Jsیک ویرایشگر مثل Atome یا Sublime یا هر چیزی که خودتون باهاش راحت هستینبعد از اون برای شروع کار لازمه تا به آدرس زیر 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 میشه که فایل اول در واقع فایل اصلی افزونه یا به عبارت دیگه منطق اصلی افزونه شماست و فایل دوم تنها شامل اطلاعات و تنظیمات اصلی خود افزونه میشه. بررسی فایل Manifest.JSON بیاید با هم یک نگاه دقیق‌تر به این فایل داشته باشیم تا بدونیم اگه نیاز به تغییر در این بخش بود دقیقا باید چه کاری انجام بدیم. برای اینکه خوانایی این بخش بیشتر باشه من یک تصویر از محتوای فایل رو در این بخش قرار میدم و جلوی هر خط توضیحات مربوط بهش رو مینویسم و در ادامه بخش‌ها مهم‌تر مثل ایجاد منو و Hotkey رو به صورت مجزا توضیح میدم. فایل Manifest.Json در یک نگاهفایل بالا تقریبا یک فایل کامل با کلیه تنظیمات مربوط به این فایل میباشد که شما میتوانید مقادیر هر فیلد رو با مقادیر دلخواه خود جایگزین نمایید. اما همانطور که در تصویر بالا مشاهده میکنید شما می‌بایست برای هر آپدیتی که برای افزونه خود درنظر میگیرید علاوه برا تغییر نسخه افزون یک سری توضیحات درباره آپدیت جدید نیز به کاربران ارائه کنید تا کاربران از تغییرات احتمالی افزونه شما با خبر شوند.همچنین شما میتوانید برای افزونه خود Hotkey های مختلف تعریف کنید تا عملکردهای مختلف افزونه شما از طریق صفحه‌کلید نیز در دسترس کابران باشد اما باید به این نکته توجه داشته باشید که ممکن است افزونه‌های دیگر نیز از این Hotkeyها در افزونه خود استفاده کرده باشن که در این صورت الویت تخصیص این Hotkey به افزونه‌ای که زودتر توسط کاربر نصب شده باشد خواهد رسید. اما جای نگرانی نیست چرا که افزونه شما به خوبی کار خواهد کرد و این مورد باعث نقص در عملکرد افزونه نخواهد شد. محیط برنامه‌نویسی Adobe XD تقریبا همه برنامه‌نویسا موقع برنامه نویسی برای اینکه نتایج کار خودشون رو ببین از Print‌ استفاده میکنن حالا این مورد در زبون های مختلف دستورات متفاوتی داره اما در زبان جاوا اسکریپت معمولا از Console.log استفاده میکنن اما خب حتما براتون سوال پیش میاد که خب حالا به فرض ما ازش داخل افزونه خودمون استفاده کردیم کجا میتونیم خروجی رو ببینیم ؟ باید بهتون بگم که Adobe XD یه محیط تست و رفع باگ برای افزونه‌های خودش فراخم کرده که از طریق منو زیر خیلی راحت میتونید بهش دسترسی داشته باشید :Plugins > Development > Developer Consoleبا باز کردن این بخش شما میتوانید تمام Log‌های مربوط به افزونه‌های نصب شده روی سیستم خودتون رو مشاهده کنید و درهنگام برنامه‌نویسی ازش برای تست و رفع باگ استفاده کنید. حرف آخرتو این مقاله سعی کردم یه توضیح مختصر درباره شروع نوشت یک افزونه کوچیک برای Adobe XD آشناتون کنم در مقالات بعدی سعی میکنم تا بیشتر وارد بحث برنامه نویسی بشیم و API هایی که برای نوشت یک افزونه در اختیار داریم و باهم بررسی کنیم. اما اگه خودتون علاقه مند هستید هر چه زودتر وارد بخش برنامه‌نویسی بشید و یا به نوشتن یک افزونه فکر میکنید اما نمیدونید از کجا میتونید بیشتر در موردش بخونید من چندتا منبع معرفی میکنم تا ازش استفاده کنید: https://github.com/AdobeXD/plugin-samples https://adobexdplatform.com/plugin-docs/reference/how-to-read.html https://medium.com/adobetech/adobe-xd-plugin-apis-are-here-7d25e39c555b